diff --git a/package-lock.json b/package-lock.json index f887eb8ff..12105ca6a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -31,7 +31,7 @@ "internal-nav-helper": "^3.1.0", "intl-messageformat": "^9.11.3", "ip": "^1.1.5", - "ipfs-css": "^1.3.0", + "ipfs-css": "^1.4.0", "ipfs-geoip": "^8.0.0", "ipfs-http-client": "49.0.2", "ipfs-provider": "^2.1.0", @@ -35375,9 +35375,9 @@ "dev": true }, "node_modules/ipfs-css": { - "version": "1.3.0", - "resolved": "https://registry.npmjs.org/ipfs-css/-/ipfs-css-1.3.0.tgz", - "integrity": "sha512-NXou2Gc5ofjdyEedZZSr7Zzfd/WQIf/LyWktyv28xhA4R8FnxngXbuXFuiN4JnB6qx2GWjV7o1zU9Mp0SvJ7eg==" + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/ipfs-css/-/ipfs-css-1.4.0.tgz", + "integrity": "sha512-LgwMSbxUQMR7DHwRd+esDT+k5M9vJkXCUyjyY0R745ol0n30QDgbHkGazJ3gT/wSFL5E157l0PKEVgFBJP6c4g==" }, "node_modules/ipfs-daemon": { "version": "0.9.8", @@ -97001,9 +97001,9 @@ } }, "ipfs-css": { - "version": "1.3.0", - "resolved": "https://registry.npmjs.org/ipfs-css/-/ipfs-css-1.3.0.tgz", - "integrity": "sha512-NXou2Gc5ofjdyEedZZSr7Zzfd/WQIf/LyWktyv28xhA4R8FnxngXbuXFuiN4JnB6qx2GWjV7o1zU9Mp0SvJ7eg==" + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/ipfs-css/-/ipfs-css-1.4.0.tgz", + "integrity": "sha512-LgwMSbxUQMR7DHwRd+esDT+k5M9vJkXCUyjyY0R745ol0n30QDgbHkGazJ3gT/wSFL5E157l0PKEVgFBJP6c4g==" }, "ipfs-daemon": { "version": "0.9.8", diff --git a/package.json b/package.json index bd629af9d..0ae37fed5 100644 --- a/package.json +++ b/package.json @@ -60,7 +60,7 @@ "internal-nav-helper": "^3.1.0", "intl-messageformat": "^9.11.3", "ip": "^1.1.5", - "ipfs-css": "^1.3.0", + "ipfs-css": "^1.4.0", "ipfs-geoip": "^8.0.0", "ipfs-http-client": "49.0.2", "ipfs-provider": "^2.1.0", diff --git a/public/locales/en/files.json b/public/locales/en/files.json index 3f7e4c19a..0e5179d04 100644 --- a/public/locales/en/files.json +++ b/public/locales/en/files.json @@ -108,10 +108,16 @@ "checkboxLabel": "View more options for {name}", "pinned": "Pinned", "pinnedRemotely": "Pinned remotely", + "pinningRemotely": "Pinning remotely", + "pinningCompleted": "Pinning completed", + "pinningFailed": "Pinning failed", + "clickToDismiss": "Click to dismiss", + "clickToCancel": "Click to cancel", "blocks": "Blocks", "allBlocks": "All blocks", "allBlocksDescription": "Total size of blocks on your entire IPFS node; this includes everything in Files, plus all locally pinned items and any temporary cached data", "filesDescription": "Total size of data in the current directory (if a subdirectory, the size of all data in Files is also displayed)", + "pinningQueue": "Pinning queue", "more": "More", "files": "Files", "cidNotFileNorDir": "The current link isn't a file, nor a directory. Try to <1>inspect it instead.", @@ -125,5 +131,7 @@ "linkCopied": "Link copied!", "sharingPrompt": "Copy the link below and share it with others. The IPNS address will resolve as long as your node remains available on the network once a day to refresh the IPNS record.", "pleaseWait": "Please wait while the initial 20 copies of the updated IPNS record are stored with the help of DHT peers…" - } + }, + "noPinsInProgress": "All done, no remote pins in progress.", + "remotePinningInProgress": "Remote pinning in progress:" } diff --git a/src/bundles/files/actions.js b/src/bundles/files/actions.js index 0e5a4f4c3..f33362cd9 100644 --- a/src/bundles/files/actions.js +++ b/src/bundles/files/actions.js @@ -134,17 +134,6 @@ const getRawPins = async function * (ipfs) { */ const getPinCIDs = (ipfs) => map(getRawPins(ipfs), (pin) => pin.cid) -/** - * @param {IPFSService} ipfs - * @returns {AsyncIterable} - */ -const getPins = async function * (ipfs) { - for await (const cid of getPinCIDs(ipfs)) { - const info = await stat(ipfs, cid) - yield fileFromStats({ ...info, pinned: true }, '/pins') - } -} - /** * @typedef {import('./protocol').Message} Message * @typedef {import('./protocol').Model} Model @@ -201,22 +190,11 @@ const actions = () => ({ * @param {Info} info * @returns {function(Context): *} */ - doFetch: ({ path, realPath, isMfs, isPins, isRoot }) => perform(ACTIONS.FETCH, async (ipfs, { store }) => { - if (isRoot && !isMfs && !isPins) { + doFetch: ({ path, realPath, isMfs, isRoot }) => perform(ACTIONS.FETCH, async (ipfs, { store }) => { + if (isRoot && !isMfs) { throw new Error('not supposed to be here') } - if (isRoot && isPins) { - const pins = await all(getPins(ipfs)) // FIX: pins path - - return { - path: '/pins', - fetched: Date.now(), - type: 'directory', - content: pins - } - } - const resolvedPath = realPath.startsWith('/ipns') ? await last(ipfs.name.resolve(realPath)) : realPath diff --git a/src/bundles/files/index.js b/src/bundles/files/index.js index 59b4f4a72..fd75946f0 100644 --- a/src/bundles/files/index.js +++ b/src/bundles/files/index.js @@ -53,19 +53,15 @@ const createFilesBundle = () => { const result = task.status === 'Exit' && task.result.ok ? task.result.value : null - const { pageContent, pins } = result + const { pageContent } = result ? { - pageContent: result, - pins: result.type === 'directory' && result.path === '/pins' - ? result.content.map($ => $.cid.toString()) - : state.pins + pageContent: result } : state return { ...updateJob(state, task, type), - pageContent, - pins + pageContent } } case ACTIONS.DISMISS_ERRORS: { diff --git a/src/bundles/files/utils.js b/src/bundles/files/utils.js index 7a8294e2d..2f4c8eaa8 100644 --- a/src/bundles/files/utils.js +++ b/src/bundles/files/utils.js @@ -189,7 +189,6 @@ export const sortFiles = (files, sorting) => { * @property {string} path * @property {string} realPath * @property {boolean} isMfs - * @property {boolean} isPins * @property {boolean} isRoot * * @param {string} path @@ -201,7 +200,6 @@ export const infoFromPath = (path, uriDecode = true) => { path, realPath: '', isMfs: false, - isPins: false, isRoot: false } @@ -219,13 +217,6 @@ export const infoFromPath = (path, uriDecode = true) => { } else if (info.path.startsWith('/files')) { check('/files') info.isMfs = true - } else if (info.path.startsWith('/pins')) { - check('/pins') - info.isPins = true - - if (info.realPath !== '/') { - info.realPath = `/ipfs${info.realPath}` - } } else { return } diff --git a/src/bundles/pinning.js b/src/bundles/pinning.js index a8a0da450..051e70d09 100644 --- a/src/bundles/pinning.js +++ b/src/bundles/pinning.js @@ -4,16 +4,23 @@ import memoize from 'p-memoize' import CID from 'cids' import all from 'it-all' +import { readSetting, writeSetting } from './local-storage' + // This bundle leverages createCacheBundle and persistActions for // the persistence layer that keeps pins in IndexDB store // to ensure they are around across restarts/reloads/refactors/releases. const CID_PIN_CHECK_BATCH_SIZE = 10 // Pinata returns error when >10 +const PIN_CHECK_INTERVAL = 30000 + // id = `${serviceName}:${cid}` const cacheId2Cid = (id) => id.split(':').at(-1) const cacheId2ServiceName = (id) => id.split(':').at(0) +const uniq = (arr) => [...new Set(arr)] +const notIn = (...arrays) => p => arrays.every(array => !array.some(a => a === p)) + const parseService = async (service, remoteServiceTemplates, ipfs) => { const template = remoteServiceTemplates.find(t => service.endpoint.toString() === t.apiEndpoint.toString()) const icon = template?.icon @@ -55,23 +62,81 @@ const uniqueCidBatches = (arrayOfCids, size) => { return result } +const remotePinLs = (ipfs, params) => { + const backoffs = readSetting('remotesServicesBackoffs') || {} + const { service } = params + + const { lastTry, tryAfter } = backoffs[service] || { lastTry: 0, tryAfter: PIN_CHECK_INTERVAL } + if (lastTry + tryAfter > new Date().getTime()) { + throw new Error('still within back-off period') + } + + try { + return ipfs.pin.remote.ls(params) + } catch (e) { + if (e.toString().includes('429 Too Many Requests')) { + backoffs[service] = { + lastTry: new Date().getTime(), + tryAfter: tryAfter * 3 + } + writeSetting('remotesServicesBackoffs', backoffs) + } + + throw e + } +} + +const resumePendingPins = (store) => { + const interval = setInterval(() => { + const isReady = store.selectIpfsReady() + if (isReady) { + clearTimeout(interval) + const pendingPins = store.selectPendingPins() + + pendingPins.forEach(pin => { + const [service, cid] = pin.split(':') + store.doSetPinning({ cid: new CID(cid) }, [service], false) + }) + } + }, 1000) +} + +const intervalFetchPins = (store) => { + setInterval(() => { + const pins = [ + ...store.selectPendingPins(), + ...store.selectFailedPins() + ].map(serviceCid => ({ cid: serviceCid.split(':')[1] })) + store.doFetchRemotePins(pins, true) + }, PIN_CHECK_INTERVAL) +} + const pinningBundle = { name: 'pinning', - persistActions: ['UPDATE_REMOTE_PINS'], - reducer: (state = { - pinningServices: [], - remotePins: [], - notRemotePins: [], - localPinsSize: 0, - localNumberOfPins: 0, - arePinningServicesSupported: false - }, action) => { + persistActions: ['UPDATE_REMOTE_PINS', 'DISMISS_REMOTE_PINS', 'CANCEL_PENDING_PINS'], + init: store => { + resumePendingPins(store) + intervalFetchPins(store) + }, + reducer: (state, action) => { if (action.type === 'UPDATE_REMOTE_PINS') { - const { adds = [], removals = [] } = action.payload - const uniq = (arr) => [...new Set(arr)] - const remotePins = uniq([...state.remotePins, ...adds].filter(p => !removals.some(r => r === p))) - const notRemotePins = uniq([...state.notRemotePins, ...removals].filter(p => !adds.some(a => a === p))) - return { ...state, remotePins, notRemotePins } + const { adds = [], removals = [], pending = [], failed = [] } = action.payload + + const remotePins = uniq([...state.remotePins, ...adds].filter(notIn(removals, pending, failed))) + const notRemotePins = uniq([...state.notRemotePins, ...removals].filter(notIn(adds, pending, failed))) + const pendingPins = uniq([...state.pendingPins, ...pending].filter(notIn(adds, removals, failed))) + const failedPins = uniq([...state.failedPins, ...failed].filter(notIn(adds, removals, pending))) + const completedPins = uniq([...state.completedPins, ...adds].filter(p => state.pendingPins.some(a => a === p))) + + return { ...state, remotePins, notRemotePins, pendingPins, failedPins, completedPins } + } + if (action.type === 'DISMISS_REMOTE_PINS') { + const { failed = [], completed = [] } = action.payload + + const failedPins = state.failedPins.filter(notIn(failed)) + const completedPins = state.completedPins.filter(notIn(completed)) + + return { ...state, failedPins, completedPins } } if (action.type === 'SET_LOCAL_PINS_STATS') { const { localPinsSize, localNumberOfPins } = action.payload @@ -81,7 +146,7 @@ const pinningBundle = { const oldServices = state.pinningServices const newServices = action.payload // Skip update when list length did not change and new one has no stats - if (oldServices.length === newServices.length) { + if (oldServices?.length === newServices?.length) { const withPinStats = s => (s && typeof s.numberOfPins !== 'undefined') const oldStats = oldServices.some(withPinStats) const newStats = newServices.some(withPinStats) @@ -92,7 +157,24 @@ const pinningBundle = { if (action.type === 'SET_REMOTE_PINNING_SERVICES_AVAILABLE') { return { ...state, arePinningServicesSupported: action.payload } } - return state + + /** + * state defaults should be set here. + * + * @see https://redux.js.org/tutorials/fundamentals/part-3-state-actions-reducers#rules-of-reducers + */ + return { + ...state, + pinningServices: state?.pinningServices ?? [], + remotePins: state?.remotePins ?? [], + pendingPins: state?.pendingPins ?? [], + failedPins: state?.failedPins ?? [], + completedPins: state?.completedPins ?? [], + notRemotePins: state?.notRemotePins ?? [], + localPinsSize: state?.localPinsSize ?? 0, + localNumberOfPins: state?.localNumberOfPins ?? 0, + arePinningServicesSupported: state?.arePinningServicesSupported ?? false + } }, doFetchRemotePins: (files, skipCache = false) => async ({ dispatch, store, getIpfs }) => { @@ -112,6 +194,8 @@ const pinningBundle = { const adds = [] const removals = [] + const failed = [] + const pending = [] await Promise.allSettled(pinningServices.map(async service => { try { @@ -128,13 +212,18 @@ const pinningBundle = { if (!cidsToCheck.length) continue // skip if no new cids to check const notPins = new Set(cidsToCheck.map(cid => cid.toString())) try { - /* TODO: wrap pin.remote.*calls with progressive backoff when response Type == "error" and Message includes "429 Too Many Requests" - * and see if we could make kubo include Retry-After header in payload description for this type of error */ - const pins = ipfs.pin.remote.ls({ service: service.name, cid: cidsToCheck.map(cid => new CID(cid)) }) + const pins = remotePinLs(ipfs, { service: service.name, cid: cidsToCheck.map(cid => new CID(cid)), status: ['queued', 'pinning', 'pinned', 'failed'] }) for await (const pin of pins) { const pinCid = pin.cid.toString() notPins.delete(pinCid) - adds.push(`${service.name}:${pinCid}`) + + if (pin.status === 'queued' || pin.status === 'pinning') { + pending.push(`${service.name}:${pinCid}`) + } else if (pin.status === 'failed') { + failed.push(`${service.name}:${pinCid}`) + } else { + adds.push(`${service.name}:${pinCid}`) + } } // store 'not pinned remotely on this service' to avoid future checks } catch (e) { @@ -151,19 +240,23 @@ const pinningBundle = { console.error('unexpected error during doFetchRemotePins', e) } })) - dispatch({ type: 'UPDATE_REMOTE_PINS', payload: { adds, removals } }) + dispatch({ type: 'UPDATE_REMOTE_PINS', payload: { adds, removals, pending, failed } }) }, selectRemotePins: (state) => state.pinning.remotePins || [], selectNotRemotePins: (state) => state.pinning.notRemotePins || [], + selectPendingPins: (state) => state.pinning.pendingPins || [], + selectFailedPins: (state) => state.pinning.failedPins || [], + selectCompletedPins: (state) => state.pinning.completedPins || [], selectLocalPinsSize: (state) => state.pinning.localPinsSize, selectLocalNumberOfPins: (state) => state.pinning.localNumberOfPins, doSelectRemotePinsForFile: (file) => ({ store }) => { const pinningServicesNames = store.selectPinningServices().map(remote => remote.name) - const remotePinForFile = store.selectRemotePins().filter(pin => cacheId2Cid(pin) === file.cid.toString()) - const servicesBeingUsed = remotePinForFile.map(pin => cacheId2ServiceName(pin)).filter(name => pinningServicesNames.includes(name)) + const remoteAndPendingPins = uniq([...store.selectPendingPins(), ...store.selectRemotePins()]) + const remoteAndPendingPinsForFile = remoteAndPendingPins.filter(pin => cacheId2Cid(pin) === file.cid.toString()) + const servicesBeingUsed = remoteAndPendingPinsForFile.map(pin => cacheId2ServiceName(pin)).filter(name => pinningServicesNames.includes(name)) return servicesBeingUsed }, @@ -222,6 +315,25 @@ const pinningBundle = { } }), {}), + doDismissCompletedPin: (...pins) => async ({ dispatch }) => { + dispatch({ type: 'DISMISS_REMOTE_PINS', payload: { completed: pins } }) + }, + + doDismissFailedPin: (...pins) => async ({ dispatch }) => { + dispatch({ type: 'DISMISS_REMOTE_PINS', payload: { failed: pins } }) + }, + + doCancelPendingPin: (...pins) => async ({ getIpfs, dispatch }) => { + const ipfs = getIpfs() + + for (const pin of pins) { + const [service, cid] = pin.split(':') + await ipfs.pin.remote.rm({ cid: [new CID(cid)], service }) + } + + dispatch({ type: 'UPDATE_REMOTE_PINS', payload: { removals: pins } }) + }, + doSetPinning: (file, services = [], wasLocallyPinned, previousRemotePins = []) => async ({ getIpfs, store, dispatch }) => { const ipfs = getIpfs() const { cid, name } = file @@ -238,6 +350,8 @@ const pinningBundle = { } const adds = [] + const pending = [] + const failed = [] const removals = [] store.selectPinningServices().forEach(async service => { @@ -248,10 +362,7 @@ const pinningBundle = { const id = `${service.name}:${cid}` try { if (shouldPin) { - adds.push(id) - /* TODO: remove background:true below and add pin job to persisted queue. - * We want track ongoing pinning across restarts of webui/ipfs-desktop - * See: https://github.com/ipfs/ipfs-webui/issues/1752 */ + pending.push(id) await ipfs.pin.remote.add(cid, { service: service.name, name, background: true }) } else { removals.push(id) @@ -261,11 +372,12 @@ const pinningBundle = { // log error and continue with other services console.error(`ipfs.pin.remote error for ${cid}@${service.name}`, e) const msgArgs = { serviceName: service.name, errorMsg: e.toString() } + failed.push(id) dispatch({ type: 'IPFS_PIN_FAILED', msgArgs }) } }) - dispatch({ type: 'UPDATE_REMOTE_PINS', payload: { adds, removals } }) + dispatch({ type: 'UPDATE_REMOTE_PINS', payload: { adds, removals, pending, failed } }) await store.doPinsFetch() }, diff --git a/src/bundles/routes.js b/src/bundles/routes.js index ff694c003..897a66f54 100644 --- a/src/bundles/routes.js +++ b/src/bundles/routes.js @@ -1,6 +1,7 @@ import { createRouteBundle } from 'redux-bundler' import StatusPage from '../status/LoadableStatusPage' import FilesPage from '../files/LoadableFilesPage' +import PinsPage from '../pins/LoadablePinsPage' import StartExploringPage from '../explore/LoadableStartExploringPage' import ExplorePage from '../explore/LoadableExplorePage' import PeersPage from '../peers/LoadablePeersPage' @@ -15,7 +16,7 @@ export default createRouteBundle({ '/files*': FilesPage, '/ipfs*': FilesPage, '/ipns*': FilesPage, - '/pins*': FilesPage, + '/pins*': PinsPage, '/peers': PeersPage, '/settings/analytics': AnalyticsPage, '/settings*': SettingsPage, diff --git a/src/files/FilesPage.js b/src/files/FilesPage.js index aae8f8145..456ae861d 100644 --- a/src/files/FilesPage.js +++ b/src/files/FilesPage.js @@ -22,7 +22,7 @@ import FileImportStatus from './file-import-status/FileImportStatus' const FilesPage = ({ doFetchPinningServices, doFilesFetch, doPinsFetch, doFilesSizeGet, doFilesDownloadLink, doFilesDownloadCarLink, doFilesWrite, doFilesAddPath, doUpdateHash, - doFilesUpdateSorting, doFilesNavigateTo, doFilesMove, doSetCliOptions, doFetchRemotePins, remotePins, doExploreUserProvidedPath, + doFilesUpdateSorting, doFilesNavigateTo, doFilesMove, doSetCliOptions, doFetchRemotePins, remotePins, pendingPins, failedPins, doExploreUserProvidedPath, ipfsProvider, ipfsConnected, doFilesMakeDir, doFilesShareLink, doFilesDelete, doSetPinning, onRemotePinClick, doPublishIpnsKey, files, filesPathInfo, pinningServices, toursEnabled, handleJoyrideCallback, isCliTutorModeEnabled, cliOptions, t }) => { @@ -137,13 +137,11 @@ const FilesPage = ({ }) } - const MainView = ({ t, files, remotePins, doExploreUserProvidedPath }) => { + const MainView = ({ t, files, remotePins, pendingPins, failedPins, doExploreUserProvidedPath }) => { if (!files) return (
) if (files.type === 'unknown') { - const path = files.path.startsWith('/pins') - ? files.path.slice(6) - : files.path + const path = files.path return (
@@ -166,6 +164,8 @@ const FilesPage = ({ updateSorting={doFilesUpdateSorting} files={files.content} remotePins={remotePins} + pendingPins={pendingPins} + failedPins={failedPins} upperDir={files.upper} downloadProgress={downloadProgress} onShare={(files) => showModal(SHARE, files)} @@ -191,8 +191,6 @@ const FilesPage = ({ if (filesPathInfo.isMfs) { parts.push(t('app:terms.files')) - } else if (filesPathInfo.isPins) { - parts.push(t('app:terms.pins')) } parts.push('IPFS') @@ -239,7 +237,7 @@ const FilesPage = ({ onCliTutorMode={() => showModal(CLI_TUTOR_MODE)} handleContextMenu={(...args) => handleContextMenu(...args, true)} /> - + { const dotsWrapper = useRef() @@ -127,16 +126,8 @@ const File = ({
-
@@ -162,6 +153,7 @@ File.propTypes = { onNavigate: PropTypes.func.isRequired, onAddFiles: PropTypes.func.isRequired, onMove: PropTypes.func.isRequired, + onDismissFailedPin: PropTypes.func.isRequired, coloured: PropTypes.bool, translucent: PropTypes.bool, handleContextMenuClick: PropTypes.func, diff --git a/src/files/files-list/FilesList.js b/src/files/files-list/FilesList.js index edcc71450..8bdafe277 100644 --- a/src/files/files-list/FilesList.js +++ b/src/files/files-list/FilesList.js @@ -8,7 +8,7 @@ import { join } from 'path' import { sorts } from '../../bundles/files' import { normalizeFiles } from '../../lib/files' import { List, WindowScroller, AutoSizer } from 'react-virtualized' -// Reac DnD +// React DnD import { NativeTypes } from 'react-dnd-html5-backend' import { useDrop } from 'react-dnd' // Components @@ -22,25 +22,42 @@ const addFiles = async (filesPromise, onAddFiles) => { onAddFiles(normalizeFiles(files)) } -const mergeRemotePinsIntoFiles = (files, remotePins = []) => { +const mergeRemotePinsIntoFiles = (files, remotePins = [], pendingPins = [], failedPins = []) => { const remotePinsCids = remotePins.map(id => id.split(':').at(-1)) + const pendingPinsCids = pendingPins.map(id => id.split(':').at(-1)) + const failedPinsCids = failedPins.map(id => id.split(':').at(-1)) - return files.map(f => remotePinsCids.includes(f.cid?.toString()) - ? ({ - ...f, - isRemotePin: true - }) - : f) + return files.map(f => { + const fileFailedPins = failedPinsCids.reduce((acc, cid, i) => { + if (cid === f.cid?.toString()) { + acc.push(failedPins[i]) + } + + return acc + }, []) + + const isRemotePin = remotePinsCids.includes(f.cid?.toString()) + const isPendingPin = pendingPinsCids.includes(f.cid?.toString()) + const isFailedPin = fileFailedPins.length > 0 + + return { + ...f, + isRemotePin, + isPendingPin, + isFailedPin, + failedPins: fileFailedPins + } + }) } export const FilesList = ({ - className, files, pins, pinningServices, remotePins, filesSorting, updateSorting, downloadProgress, filesIsFetching, filesPathInfo, showLoadingAnimation, - onShare, onSetPinning, onInspect, onDownload, onRemove, onRename, onNavigate, onRemotePinClick, onAddFiles, onMove, doFetchRemotePins, handleContextMenuClick, t + className, files, pins, pinningServices, remotePins, pendingPins, failedPins, filesSorting, updateSorting, downloadProgress, filesIsFetching, filesPathInfo, showLoadingAnimation, + onShare, onSetPinning, onInspect, onDownload, onRemove, onRename, onNavigate, onRemotePinClick, onAddFiles, onMove, doFetchRemotePins, doDismissFailedPin, handleContextMenuClick, t }) => { const [selected, setSelected] = useState([]) const [focused, setFocused] = useState(null) const [firstVisibleRow, setFirstVisibleRow] = useState(null) - const [allFiles, setAllFiles] = useState(mergeRemotePinsIntoFiles(files, remotePins)) + const [allFiles, setAllFiles] = useState(mergeRemotePinsIntoFiles(files, remotePins, pendingPins, failedPins)) const listRef = useRef() const filesRefs = useRef([]) const refreshPinCache = true // manually clicking on Pin Status column skips cache and updates remote status @@ -143,8 +160,8 @@ export const FilesList = ({ []) useEffect(() => { - setAllFiles(mergeRemotePinsIntoFiles(files, remotePins)) - }, [files, remotePins, filesSorting]) + setAllFiles(mergeRemotePinsIntoFiles(files, remotePins, pendingPins, failedPins)) + }, [files, remotePins, filesSorting, pendingPins, failedPins]) useEffect(() => { const selectedFiles = selected.filter(name => files.find(el => el.name === name)) @@ -237,6 +254,9 @@ export const FilesList = ({ if (listItem.type === 'unknown') return onInspect(listItem.cid) return onNavigate({ path: listItem.path, cid: listItem.cid }) } + const onDismissFailedPinHandler = () => { + doDismissFailedPin(...listItem.failedPins) + } return (
{ filesRefs.current[allFiles[index].name] = r }}> @@ -249,6 +269,7 @@ export const FilesList = ({ onNavigate={onNavigateHandler} onAddFiles={onAddFiles} onSetPinning={onSetPinning} + onDismissFailedPin={onDismissFailedPinHandler} onMove={move} focused={focused === listItem.name} selected={selected.indexOf(listItem.name) !== -1} @@ -346,6 +367,8 @@ FilesList.propTypes = { className: PropTypes.string, files: PropTypes.array.isRequired, remotePins: PropTypes.array, + pendingPins: PropTypes.array, + failedPins: PropTypes.array, filesSorting: PropTypes.shape({ by: PropTypes.string.isRequired, asc: PropTypes.bool.isRequired @@ -372,7 +395,9 @@ FilesList.propTypes = { FileList.defaultProps = { className: '', - remotePins: [] + remotePins: [], + pendingPins: [], + failedPins: [] } export default connect( @@ -383,5 +408,6 @@ export default connect( 'selectFilesSorting', 'selectFilesPathInfo', 'selectShowLoadingAnimation', + 'doDismissFailedPin', withTranslation('files')(FilesList) ) diff --git a/src/files/header/Header.js b/src/files/header/Header.js index bfe2894a4..959883a1b 100644 --- a/src/files/header/Header.js +++ b/src/files/header/Header.js @@ -9,6 +9,8 @@ import FileInput from '../file-input/FileInput' import Button from '../../components/button/Button' // Icons import GlyphDots from '../../icons/GlyphDots' +import GlyphPinCloud from '../../icons/GlyphPinCloud' +import '../PendingAnimation.css' const BarOption = ({ children, text, isLink = false, className = '', ...etc }) => (
@@ -47,9 +49,14 @@ class Header extends React.Component { filesSize, onNavigate, repoSize, + pendingPins, + failedPins, + completedPins, t } = this.props + const pinsInQueue = pendingPins.length + failedPins.length + completedPins.length + return (
@@ -59,6 +66,12 @@ class Header extends React.Component {
+ { pinsInQueue > 0 && + + } + { hasUpperDirectory ? ( @@ -111,5 +124,8 @@ export default connect( 'selectRepoNumObjects', 'selectFilesPathInfo', 'selectCurrentDirectorySize', + 'selectPendingPins', + 'selectFailedPins', + 'selectCompletedPins', withTranslation('files')(Header) ) diff --git a/src/files/modals/pinning-modal/PinningModal.js b/src/files/modals/pinning-modal/PinningModal.js index 61d7ceaf1..fee09ef4d 100644 --- a/src/files/modals/pinning-modal/PinningModal.js +++ b/src/files/modals/pinning-modal/PinningModal.js @@ -23,8 +23,8 @@ const PinIcon = ({ icon, index }) => { return } -export const PinningModal = ({ t, tReady, onCancel, onPinningSet, file, pinningServices, remotePins, notRemotePins, doGetFileSizeThroughCid, doSelectRemotePinsForFile, doFetchPinningServices, doFetchRemotePins, className, ...props }) => { - const selectedRemoteServices = useMemo(() => doSelectRemotePinsForFile(file, remotePins, notRemotePins), [doSelectRemotePinsForFile, file, remotePins, notRemotePins]) +export const PinningModal = ({ t, tReady, onCancel, onPinningSet, file, pinningServices, remotePins, notRemotePins, pendingPins, doGetFileSizeThroughCid, doSelectRemotePinsForFile, doFetchPinningServices, doFetchRemotePins, className, ...props }) => { + const selectedRemoteServices = useMemo(() => doSelectRemotePinsForFile(file, remotePins, notRemotePins, pendingPins), [doSelectRemotePinsForFile, file, remotePins, notRemotePins, pendingPins]) const [selectedServices, setSelectedServices] = useState([...selectedRemoteServices, ...[file.pinned && 'local']]) const [size, setSize] = useState(null) @@ -97,6 +97,7 @@ PinningModal.defaultProps = { export default connect( 'selectPinningServices', 'selectRemotePins', + 'selectPendingPins', 'selectNotRemotePins', 'doSelectRemotePinsForFile', 'doGetFileSizeThroughCid', diff --git a/src/files/pin-icon/PinIcon.js b/src/files/pin-icon/PinIcon.js new file mode 100644 index 000000000..5449d27a0 --- /dev/null +++ b/src/files/pin-icon/PinIcon.js @@ -0,0 +1,41 @@ +import React from 'react' +import { withTranslation } from 'react-i18next' +import GlyphPin from '../../icons/GlyphPin' +import GlyphPinCloud from '../../icons/GlyphPinCloud' +import '../PendingAnimation.css' + +const PinningIcon = ({ t, isFailedPin, isPendingPin, isRemotePin, pinned }) => { + if (isFailedPin) { + return ( +
+ +
+ ) + } else if (isPendingPin) { + return ( +
+ +
+ ) + } else if (isRemotePin) { + return ( +
+ +
+ ) + } else if (pinned) { + return ( +
+ +
+ ) + } else { + return ( +
+ +
+ ) + } +} + +export default withTranslation('files')(PinningIcon) diff --git a/src/icons/GlyphAdd.js b/src/icons/GlyphAdd.js index d9a568aef..8eb9d3495 100644 --- a/src/icons/GlyphAdd.js +++ b/src/icons/GlyphAdd.js @@ -1,9 +1,11 @@ -import React from 'react' +import * as React from 'react' -const GlyphAdd = props => ( - - - -) +function SvgGlyphAdd (props) { + return ( + + + + ) +} -export default GlyphAdd +export default SvgGlyphAdd diff --git a/src/icons/GlyphAttention.js b/src/icons/GlyphAttention.js index 17af13222..86cd33092 100644 --- a/src/icons/GlyphAttention.js +++ b/src/icons/GlyphAttention.js @@ -1,9 +1,11 @@ -import React from 'react' +import * as React from 'react' -const GlyphAttention = props => ( - - - -) +function SvgGlyphAttention (props) { + return ( + + + + ) +} -export default GlyphAttention +export default SvgGlyphAttention diff --git a/src/icons/GlyphBasket.js b/src/icons/GlyphBasket.js index 93478110c..acf0d0a2a 100644 --- a/src/icons/GlyphBasket.js +++ b/src/icons/GlyphBasket.js @@ -1,10 +1,12 @@ -import React from 'react' +import * as React from 'react' -const GlyphBasket = props => ( - - - - -) +function SvgGlyphBasket (props) { + return ( + + + + + ) +} -export default GlyphBasket +export default SvgGlyphBasket diff --git a/src/icons/GlyphBook.js b/src/icons/GlyphBook.js index a5ac7a6de..226f6ec66 100644 --- a/src/icons/GlyphBook.js +++ b/src/icons/GlyphBook.js @@ -1,9 +1,11 @@ -import React from 'react' +import * as React from 'react' -const GlyphBook = props => ( - - - -) +function SvgGlyphBook (props) { + return ( + + + + ) +} -export default GlyphBook +export default SvgGlyphBook diff --git a/src/icons/GlyphCalendar.js b/src/icons/GlyphCalendar.js index 410f35206..3ba79ad09 100644 --- a/src/icons/GlyphCalendar.js +++ b/src/icons/GlyphCalendar.js @@ -1,9 +1,11 @@ -import React from 'react' +import * as React from 'react' -const GlyphCalendar = props => ( - - - -) +function SvgGlyphCalendar (props) { + return ( + + + + ) +} -export default GlyphCalendar +export default SvgGlyphCalendar diff --git a/src/icons/GlyphCamera.js b/src/icons/GlyphCamera.js index 2e217c1f9..857c87b86 100644 --- a/src/icons/GlyphCamera.js +++ b/src/icons/GlyphCamera.js @@ -1,10 +1,12 @@ -import React from 'react' +import * as React from 'react' -const GlyphCamera = props => ( - - - - -) +function SvgGlyphCamera (props) { + return ( + + + + + ) +} -export default GlyphCamera +export default SvgGlyphCamera diff --git a/src/icons/GlyphCancel.js b/src/icons/GlyphCancel.js index 462a4135c..8a76f1fb4 100644 --- a/src/icons/GlyphCancel.js +++ b/src/icons/GlyphCancel.js @@ -1,9 +1,11 @@ -import React from 'react' +import * as React from 'react' -const GlyphCancel = props => ( - - - -) +function SvgGlyphCancel (props) { + return ( + + + + ) +} -export default GlyphCancel +export default SvgGlyphCancel diff --git a/src/icons/GlyphCase.js b/src/icons/GlyphCase.js index b71bc6087..1c3f02798 100644 --- a/src/icons/GlyphCase.js +++ b/src/icons/GlyphCase.js @@ -1,9 +1,11 @@ -import React from 'react' +import * as React from 'react' -const GlyphCase = props => ( - - - -) +function SvgGlyphCase (props) { + return ( + + + + ) +} -export default GlyphCase +export default SvgGlyphCase diff --git a/src/icons/GlyphCentralization.js b/src/icons/GlyphCentralization.js new file mode 100644 index 000000000..ca79f4099 --- /dev/null +++ b/src/icons/GlyphCentralization.js @@ -0,0 +1,11 @@ +import * as React from 'react' + +function SvgGlyphCentralization (props) { + return ( + + + + ) +} + +export default SvgGlyphCentralization diff --git a/src/icons/GlyphChart.js b/src/icons/GlyphChart.js index 04eeb6fc6..a4dd15cbf 100644 --- a/src/icons/GlyphChart.js +++ b/src/icons/GlyphChart.js @@ -1,12 +1,14 @@ -import React from 'react' +import * as React from 'react' -const GlyphChart = props => ( - - - -) +function SvgGlyphChart (props) { + return ( + + + + ) +} -export default GlyphChart +export default SvgGlyphChart diff --git a/src/icons/GlyphChat.js b/src/icons/GlyphChat.js index 8d03b2cd4..ac1e7cb7b 100644 --- a/src/icons/GlyphChat.js +++ b/src/icons/GlyphChat.js @@ -1,9 +1,11 @@ -import React from 'react' +import * as React from 'react' -const GlyphChat = props => ( - - - -) +function SvgGlyphChat (props) { + return ( + + + + ) +} -export default GlyphChat +export default SvgGlyphChat diff --git a/src/icons/GlyphClock.js b/src/icons/GlyphClock.js index 1f1dbab73..6a3ca7343 100644 --- a/src/icons/GlyphClock.js +++ b/src/icons/GlyphClock.js @@ -1,9 +1,11 @@ -import React from 'react' +import * as React from 'react' -const GlyphClock = props => ( - - - -) +function SvgGlyphClock (props) { + return ( + + + + ) +} -export default GlyphClock +export default SvgGlyphClock diff --git a/src/icons/GlyphCloud.js b/src/icons/GlyphCloud.js index 2e61a088d..9906dc11f 100644 --- a/src/icons/GlyphCloud.js +++ b/src/icons/GlyphCloud.js @@ -1,9 +1,15 @@ -import React from 'react' +import * as React from 'react' -const GlyphCloud = props => ( - - - -) +function SvgGlyphCloud (props) { + return ( + + + + + ) +} -export default GlyphCloud +export default SvgGlyphCloud diff --git a/src/icons/GlyphCode.js b/src/icons/GlyphCode.js new file mode 100644 index 000000000..ceef80fb4 --- /dev/null +++ b/src/icons/GlyphCode.js @@ -0,0 +1,17 @@ +import * as React from 'react' + +function SvgGlyphCode (props) { + return ( + + + + + + + ) +} + +export default SvgGlyphCode diff --git a/src/icons/GlyphCopy.js b/src/icons/GlyphCopy.js index 2eb39a9dc..173898b36 100644 --- a/src/icons/GlyphCopy.js +++ b/src/icons/GlyphCopy.js @@ -1,10 +1,19 @@ -import React from 'react' +import * as React from 'react' -const GlyphCopy = props => ( - - - - -) +function SvgGlyphCopy (props) { + return ( + + + + + ) +} -export default GlyphCopy +export default SvgGlyphCopy diff --git a/src/icons/GlyphCube.js b/src/icons/GlyphCube.js new file mode 100644 index 000000000..8027d036c --- /dev/null +++ b/src/icons/GlyphCube.js @@ -0,0 +1,12 @@ +import * as React from 'react' + +function SvgGlyphCube (props) { + return ( + + + + + ) +} + +export default SvgGlyphCube diff --git a/src/icons/GlyphData.js b/src/icons/GlyphData.js index 9b535a258..dd5989a7d 100644 --- a/src/icons/GlyphData.js +++ b/src/icons/GlyphData.js @@ -1,15 +1,17 @@ -import React from 'react' +import * as React from 'react' -const GlyphData = props => ( - - - - - - - - - -) +function SvgGlyphData (props) { + return ( + + + + + + + + + + ) +} -export default GlyphData +export default SvgGlyphData diff --git a/src/icons/GlyphDecentralization.js b/src/icons/GlyphDecentralization.js new file mode 100644 index 000000000..0b6abfcc7 --- /dev/null +++ b/src/icons/GlyphDecentralization.js @@ -0,0 +1,11 @@ +import * as React from 'react' + +function SvgGlyphDecentralization (props) { + return ( + + + + ) +} + +export default SvgGlyphDecentralization diff --git a/src/icons/GlyphDevices.js b/src/icons/GlyphDevices.js new file mode 100644 index 000000000..a23833fcd --- /dev/null +++ b/src/icons/GlyphDevices.js @@ -0,0 +1,13 @@ +import * as React from 'react' + +function SvgGlyphDevices (props) { + return ( + + + + + + ) +} + +export default SvgGlyphDevices diff --git a/src/icons/GlyphDistributed.js b/src/icons/GlyphDistributed.js new file mode 100644 index 000000000..f1479e723 --- /dev/null +++ b/src/icons/GlyphDistributed.js @@ -0,0 +1,11 @@ +import * as React from 'react' + +function SvgGlyphDistributed (props) { + return ( + + + + ) +} + +export default SvgGlyphDistributed diff --git a/src/icons/GlyphDocCalc.js b/src/icons/GlyphDocCalc.js index 4783855ab..5ccd533a5 100644 --- a/src/icons/GlyphDocCalc.js +++ b/src/icons/GlyphDocCalc.js @@ -1,16 +1,23 @@ -import React from 'react' +import * as React from 'react' -const GlyphDocCalc = props => ( - - - - - - - -) +function SvgGlyphDocCalc (props) { + return ( + + + + + + + + ) +} -export default GlyphDocCalc +export default SvgGlyphDocCalc diff --git a/src/icons/GlyphDocGeneric.js b/src/icons/GlyphDocGeneric.js index 7780f3697..985921ce0 100644 --- a/src/icons/GlyphDocGeneric.js +++ b/src/icons/GlyphDocGeneric.js @@ -1,15 +1,17 @@ -import React from 'react' +import * as React from 'react' -const GlyphDocGeneric = props => ( - - - - - - -) +function SvgGlyphDocGeneric (props) { + return ( + + + + + + + ) +} -export default GlyphDocGeneric +export default SvgGlyphDocGeneric diff --git a/src/icons/GlyphDocMovie.js b/src/icons/GlyphDocMovie.js index 04f3c4dea..9ec2c286c 100644 --- a/src/icons/GlyphDocMovie.js +++ b/src/icons/GlyphDocMovie.js @@ -1,16 +1,18 @@ -import React from 'react' +import * as React from 'react' -const GlyphDocMovie = props => ( - - - - - - - -) +function SvgGlyphDocMovie (props) { + return ( + + + + + + + + ) +} -export default GlyphDocMovie +export default SvgGlyphDocMovie diff --git a/src/icons/GlyphDocMusic.js b/src/icons/GlyphDocMusic.js index 08eea6b51..b7ef457f3 100644 --- a/src/icons/GlyphDocMusic.js +++ b/src/icons/GlyphDocMusic.js @@ -1,16 +1,18 @@ -import React from 'react' +import * as React from 'react' -const GlyphDocMusic = props => ( - - - - - - - -) +function SvgGlyphDocMusic (props) { + return ( + + + + + + + + ) +} -export default GlyphDocMusic +export default SvgGlyphDocMusic diff --git a/src/icons/GlyphDocPicture.js b/src/icons/GlyphDocPicture.js index 74330e609..8d9824548 100644 --- a/src/icons/GlyphDocPicture.js +++ b/src/icons/GlyphDocPicture.js @@ -1,17 +1,19 @@ -import React from 'react' +import * as React from 'react' -const GlyphDocPicture = props => ( - - - - - - - - -) +function SvgGlyphDocPicture (props) { + return ( + + + + + + + + + ) +} -export default GlyphDocPicture +export default SvgGlyphDocPicture diff --git a/src/icons/GlyphDocText.js b/src/icons/GlyphDocText.js index 7ebb5caaa..e9f8cf037 100644 --- a/src/icons/GlyphDocText.js +++ b/src/icons/GlyphDocText.js @@ -1,16 +1,18 @@ -import React from 'react' +import * as React from 'react' -const GlyphDocText = props => ( - - - - - - - -) +function SvgGlyphDocText (props) { + return ( + + + + + + + + ) +} -export default GlyphDocText +export default SvgGlyphDocText diff --git a/src/icons/GlyphDocument.js b/src/icons/GlyphDocument.js index 29d9a1a06..89918d6ff 100644 --- a/src/icons/GlyphDocument.js +++ b/src/icons/GlyphDocument.js @@ -1,9 +1,11 @@ -import React from 'react' +import * as React from 'react' -const GlyphDocument = props => ( - - - -) +function SvgGlyphDocument (props) { + return ( + + + + ) +} -export default GlyphDocument +export default SvgGlyphDocument diff --git a/src/icons/GlyphDots.js b/src/icons/GlyphDots.js index 4aa977733..4b5e3de2e 100644 --- a/src/icons/GlyphDots.js +++ b/src/icons/GlyphDots.js @@ -1,9 +1,11 @@ -import React from 'react' +import * as React from 'react' -const GlyphDots = props => ( - - - -) +function SvgGlyphDots (props) { + return ( + + + + ) +} -export default GlyphDots +export default SvgGlyphDots diff --git a/src/icons/GlyphDownload.js b/src/icons/GlyphDownload.js new file mode 100644 index 000000000..90f215e60 --- /dev/null +++ b/src/icons/GlyphDownload.js @@ -0,0 +1,11 @@ +import * as React from 'react' + +function SvgGlyphDownload (props) { + return ( + + + + ) +} + +export default SvgGlyphDownload diff --git a/src/icons/GlyphFilter.js b/src/icons/GlyphFilter.js index ef9a3eaeb..80f6ea287 100644 --- a/src/icons/GlyphFilter.js +++ b/src/icons/GlyphFilter.js @@ -1,9 +1,11 @@ -import React from 'react' +import * as React from 'react' -const GlyphFilter = props => ( - - - -) +function SvgGlyphFilter (props) { + return ( + + + + ) +} -export default GlyphFilter +export default SvgGlyphFilter diff --git a/src/icons/GlyphFolder.js b/src/icons/GlyphFolder.js index 6c1d5beae..6b0b2a905 100644 --- a/src/icons/GlyphFolder.js +++ b/src/icons/GlyphFolder.js @@ -1,18 +1,20 @@ -import React from 'react' +import * as React from 'react' -const GlyphFolder = props => ( - - - - - - -) +function SvgGlyphFolder (props) { + return ( + + + + + + + ) +} -export default GlyphFolder +export default SvgGlyphFolder diff --git a/src/icons/GlyphHome.js b/src/icons/GlyphHome.js index b55a0709a..ed664e419 100644 --- a/src/icons/GlyphHome.js +++ b/src/icons/GlyphHome.js @@ -1,9 +1,11 @@ -import React from 'react' +import * as React from 'react' -const GlyphHome = props => ( - - - -) +function SvgGlyphHome (props) { + return ( + + + + ) +} -export default GlyphHome +export default SvgGlyphHome diff --git a/src/icons/GlyphIdea.js b/src/icons/GlyphIdea.js index 81a06242f..6f212bb5c 100644 --- a/src/icons/GlyphIdea.js +++ b/src/icons/GlyphIdea.js @@ -1,9 +1,11 @@ -import React from 'react' +import * as React from 'react' -const GlyphIdea = props => ( - - - -) +function SvgGlyphIdea (props) { + return ( + + + + ) +} -export default GlyphIdea +export default SvgGlyphIdea diff --git a/src/icons/GlyphInfo.js b/src/icons/GlyphInfo.js index 0906577b3..dbaa63c68 100644 --- a/src/icons/GlyphInfo.js +++ b/src/icons/GlyphInfo.js @@ -1,9 +1,11 @@ -import React from 'react' +import * as React from 'react' -const GlyphInfo = props => ( - - - -) +function SvgGlyphInfo (props) { + return ( + + + + ) +} -export default GlyphInfo +export default SvgGlyphInfo diff --git a/src/icons/GlyphIpld.js b/src/icons/GlyphIpld.js new file mode 100644 index 000000000..87bebe650 --- /dev/null +++ b/src/icons/GlyphIpld.js @@ -0,0 +1,11 @@ +import * as React from 'react' + +function SvgGlyphIpld (props) { + return ( + + + + ) +} + +export default SvgGlyphIpld diff --git a/src/icons/GlyphLab.js b/src/icons/GlyphLab.js index 94dc5c4aa..977ecc8a2 100644 --- a/src/icons/GlyphLab.js +++ b/src/icons/GlyphLab.js @@ -1,9 +1,11 @@ -import React from 'react' +import * as React from 'react' -const GlyphLab = props => ( - - - -) +function SvgGlyphLab (props) { + return ( + + + + ) +} -export default GlyphLab +export default SvgGlyphLab diff --git a/src/icons/GlyphLink.js b/src/icons/GlyphLink.js index 83b1ba456..db8cc2a99 100644 --- a/src/icons/GlyphLink.js +++ b/src/icons/GlyphLink.js @@ -1,9 +1,11 @@ -import React from 'react' +import * as React from 'react' -const GlyphLink = props => ( - - - -) +function SvgGlyphLink (props) { + return ( + + + + ) +} -export default GlyphLink +export default SvgGlyphLink diff --git a/src/icons/GlyphLinkExternal.js b/src/icons/GlyphLinkExternal.js new file mode 100644 index 000000000..6f2f274df --- /dev/null +++ b/src/icons/GlyphLinkExternal.js @@ -0,0 +1,12 @@ +import * as React from 'react' + +function SvgGlyphLinkExternal (props) { + return ( + + + + + ) +} + +export default SvgGlyphLinkExternal diff --git a/src/icons/GlyphLock.js b/src/icons/GlyphLock.js index 7e2154b6e..b417334c5 100644 --- a/src/icons/GlyphLock.js +++ b/src/icons/GlyphLock.js @@ -1,9 +1,11 @@ -import React from 'react' +import * as React from 'react' -const GlyphLock = props => ( - - - -) +function SvgGlyphLock (props) { + return ( + + + + ) +} -export default GlyphLock +export default SvgGlyphLock diff --git a/src/icons/GlyphMail.js b/src/icons/GlyphMail.js index 9972247bf..c4c0dbfa3 100644 --- a/src/icons/GlyphMail.js +++ b/src/icons/GlyphMail.js @@ -1,10 +1,12 @@ -import React from 'react' +import * as React from 'react' -const GlyphMail = props => ( - - - - -) +function SvgGlyphMail (props) { + return ( + + + + + ) +} -export default GlyphMail +export default SvgGlyphMail diff --git a/src/icons/GlyphMap.js b/src/icons/GlyphMap.js index 472ff33d5..9b737ce3d 100644 --- a/src/icons/GlyphMap.js +++ b/src/icons/GlyphMap.js @@ -1,9 +1,11 @@ -import React from 'react' +import * as React from 'react' -const GlyphMap = props => ( - - - -) +function SvgGlyphMap (props) { + return ( + + + + ) +} -export default GlyphMap +export default SvgGlyphMap diff --git a/src/icons/GlyphMarker.js b/src/icons/GlyphMarker.js index 416e3ba5a..133c99c54 100644 --- a/src/icons/GlyphMarker.js +++ b/src/icons/GlyphMarker.js @@ -1,9 +1,11 @@ -import React from 'react' +import * as React from 'react' -const GlyphMarker = props => ( - - - -) +function SvgGlyphMarker (props) { + return ( + + + + ) +} -export default GlyphMarker +export default SvgGlyphMarker diff --git a/src/icons/GlyphMarketing.js b/src/icons/GlyphMarketing.js new file mode 100644 index 000000000..48ba23942 --- /dev/null +++ b/src/icons/GlyphMarketing.js @@ -0,0 +1,13 @@ +import * as React from 'react' + +function SvgGlyphMarketing (props) { + return ( + + + + + + ) +} + +export default SvgGlyphMarketing diff --git a/src/icons/GlyphMobile.js b/src/icons/GlyphMobile.js index 0a6fbd1c3..ee283063e 100644 --- a/src/icons/GlyphMobile.js +++ b/src/icons/GlyphMobile.js @@ -1,9 +1,11 @@ -import React from 'react' +import * as React from 'react' -const GlyphMobile = props => ( - - - -) +function SvgGlyphMobile (props) { + return ( + + + + ) +} -export default GlyphMobile +export default SvgGlyphMobile diff --git a/src/icons/GlyphMonitor.js b/src/icons/GlyphMonitor.js index a5e3488d5..ce772144a 100644 --- a/src/icons/GlyphMonitor.js +++ b/src/icons/GlyphMonitor.js @@ -1,10 +1,12 @@ -import React from 'react' +import * as React from 'react' -const GlyphMonitor = props => ( - - - - -) +function SvgGlyphMonitor (props) { + return ( + + + + + ) +} -export default GlyphMonitor +export default SvgGlyphMonitor diff --git a/src/icons/GlyphNewFolder.js b/src/icons/GlyphNewFolder.js index 9d28d385f..535c9b1df 100644 --- a/src/icons/GlyphNewFolder.js +++ b/src/icons/GlyphNewFolder.js @@ -1,46 +1,20 @@ -import React from 'react' +import * as React from 'react' -const GlyphNewFolder = props => ( - - - - - - +function SvgGlyphNewFolder (props) { + return ( + - - - - - - - - - - - - - - -) + + + + + ) +} -export default GlyphNewFolder +export default SvgGlyphNewFolder diff --git a/src/icons/GlyphPeersLarge.js b/src/icons/GlyphPeersLarge.js index 8ab63f91f..4c52cdf0f 100644 --- a/src/icons/GlyphPeersLarge.js +++ b/src/icons/GlyphPeersLarge.js @@ -1,9 +1,15 @@ -import React from 'react' +import * as React from 'react' -const GlyphPeersLarge = props => ( - - - -) +function SvgGlyphPeersLarge (props) { + return ( + + + + ) +} -export default GlyphPeersLarge +export default SvgGlyphPeersLarge diff --git a/src/icons/GlyphPeersMedium.js b/src/icons/GlyphPeersMedium.js index ab959e40a..ec43c063f 100644 --- a/src/icons/GlyphPeersMedium.js +++ b/src/icons/GlyphPeersMedium.js @@ -1,9 +1,15 @@ -import React from 'react' +import * as React from 'react' -const GlyphPeersMedium = props => ( - - - -) +function SvgGlyphPeersMedium (props) { + return ( + + + + ) +} -export default GlyphPeersMedium +export default SvgGlyphPeersMedium diff --git a/src/icons/GlyphPeersSmall.js b/src/icons/GlyphPeersSmall.js index f8886be27..ef945a95b 100644 --- a/src/icons/GlyphPeersSmall.js +++ b/src/icons/GlyphPeersSmall.js @@ -1,9 +1,15 @@ -import React from 'react' +import * as React from 'react' -const GlyphPeersSmall = props => ( - - - -) +function SvgGlyphPeersSmall (props) { + return ( + + + + ) +} -export default GlyphPeersSmall +export default SvgGlyphPeersSmall diff --git a/src/icons/GlyphPen.js b/src/icons/GlyphPen.js new file mode 100644 index 000000000..a36df59de --- /dev/null +++ b/src/icons/GlyphPen.js @@ -0,0 +1,11 @@ +import * as React from 'react' + +function SvgGlyphPen (props) { + return ( + + + + ) +} + +export default SvgGlyphPen diff --git a/src/icons/GlyphPencil.js b/src/icons/GlyphPencil.js index cff97f4eb..2c2ec438f 100644 --- a/src/icons/GlyphPencil.js +++ b/src/icons/GlyphPencil.js @@ -1,11 +1,13 @@ -import React from 'react' +import * as React from 'react' -const GlyphPencil = props => ( - - - - - -) +function SvgGlyphPencil (props) { + return ( + + + + + + ) +} -export default GlyphPencil +export default SvgGlyphPencil diff --git a/src/icons/GlyphPin.js b/src/icons/GlyphPin.js index e8ec2f25d..ec0c80601 100644 --- a/src/icons/GlyphPin.js +++ b/src/icons/GlyphPin.js @@ -1,10 +1,12 @@ -import React from 'react' +import * as React from 'react' -const GlyphPin = props => ( - - - - -) +function SvgGlyphPin (props) { + return ( + + + + + ) +} -export default GlyphPin +export default SvgGlyphPin diff --git a/src/icons/GlyphPinCloud.js b/src/icons/GlyphPinCloud.js index 4ab2aa130..5f1899882 100644 --- a/src/icons/GlyphPinCloud.js +++ b/src/icons/GlyphPinCloud.js @@ -1,9 +1,16 @@ -import React from 'react' +import * as React from 'react' -const GlyphPinCloud = props => ( - - - -) +function SvgGlyphPinCloud (props) { + return ( + + + + + + ) +} -export default GlyphPinCloud +export default SvgGlyphPinCloud diff --git a/src/icons/GlyphPinCloudFailed.js b/src/icons/GlyphPinCloudFailed.js new file mode 100644 index 000000000..c10f94580 --- /dev/null +++ b/src/icons/GlyphPinCloudFailed.js @@ -0,0 +1,18 @@ +import * as React from 'react' + +function SvgGlyphPinCloudFailed (props) { + return ( + + + + + ) +} + +export default SvgGlyphPinCloudFailed diff --git a/src/icons/GlyphPower.js b/src/icons/GlyphPower.js index 97f606f06..8f3641490 100644 --- a/src/icons/GlyphPower.js +++ b/src/icons/GlyphPower.js @@ -1,9 +1,11 @@ -import React from 'react' +import * as React from 'react' -const GlyphPower = props => ( - - - -) +function SvgGlyphPower (props) { + return ( + + + + ) +} -export default GlyphPower +export default SvgGlyphPower diff --git a/src/icons/GlyphPresentation.js b/src/icons/GlyphPresentation.js new file mode 100644 index 000000000..aba1c8137 --- /dev/null +++ b/src/icons/GlyphPresentation.js @@ -0,0 +1,13 @@ +import * as React from 'react' + +function SvgGlyphPresentation (props) { + return ( + + + + + + ) +} + +export default SvgGlyphPresentation diff --git a/src/icons/GlyphSearch.js b/src/icons/GlyphSearch.js index 22229ee00..f53ec0141 100644 --- a/src/icons/GlyphSearch.js +++ b/src/icons/GlyphSearch.js @@ -1,9 +1,11 @@ -import React from 'react' +import * as React from 'react' -const GlyphSearch = props => ( - - - -) +function SvgGlyphSearch (props) { + return ( + + + + ) +} -export default GlyphSearch +export default SvgGlyphSearch diff --git a/src/icons/GlyphServer.js b/src/icons/GlyphServer.js index e3309e1db..f69bc1888 100644 --- a/src/icons/GlyphServer.js +++ b/src/icons/GlyphServer.js @@ -1,28 +1,37 @@ -import React from 'react' +import * as React from 'react' -const GlyphServer = props => ( - - - - - - - - -) +function SvgGlyphServer (props) { + return ( + + + + + + + + + ) +} -export default GlyphServer +export default SvgGlyphServer diff --git a/src/icons/GlyphSettings.js b/src/icons/GlyphSettings.js index effa2abff..5d2067356 100644 --- a/src/icons/GlyphSettings.js +++ b/src/icons/GlyphSettings.js @@ -1,9 +1,11 @@ -import React from 'react' +import * as React from 'react' -const GlyphSettings = props => ( - - - -) +function SvgGlyphSettings (props) { + return ( + + + + ) +} -export default GlyphSettings +export default SvgGlyphSettings diff --git a/src/icons/GlyphShare.js b/src/icons/GlyphShare.js index 38df0a610..367324b5c 100644 --- a/src/icons/GlyphShare.js +++ b/src/icons/GlyphShare.js @@ -1,13 +1,15 @@ -import React from 'react' +import * as React from 'react' -const GlyphShare = props => ( - - - - - - - -) +function SvgGlyphShare (props) { + return ( + + + + + + + + ) +} -export default GlyphShare +export default SvgGlyphShare diff --git a/src/icons/GlyphSmallArrow.js b/src/icons/GlyphSmallArrow.js index cd1ba23d3..c9498fd4c 100644 --- a/src/icons/GlyphSmallArrow.js +++ b/src/icons/GlyphSmallArrow.js @@ -1,10 +1,11 @@ -import React from 'react' +import * as React from 'react' -const GlyphSmallArrows = props => ( - - - +function SvgGlyphSmallArrow (props) { + return ( + + + + ) +} -) - -export default GlyphSmallArrows +export default SvgGlyphSmallArrow diff --git a/src/icons/GlyphSmallCancel.js b/src/icons/GlyphSmallCancel.js index 436cebd3c..f745ab6ef 100644 --- a/src/icons/GlyphSmallCancel.js +++ b/src/icons/GlyphSmallCancel.js @@ -1,9 +1,11 @@ -import React from 'react' +import * as React from 'react' -const GlyphSmallCancel = props => ( - - - -) +function SvgGlyphSmallCancel (props) { + return ( + + + + ) +} -export default GlyphSmallCancel +export default SvgGlyphSmallCancel diff --git a/src/icons/GlyphSmallInfo.js b/src/icons/GlyphSmallInfo.js index 763b01d1d..37af91ceb 100644 --- a/src/icons/GlyphSmallInfo.js +++ b/src/icons/GlyphSmallInfo.js @@ -1,9 +1,11 @@ -import React from 'react' +import * as React from 'react' -const GlyphSmallInfo = props => ( - - - -) +function SvgGlyphSmallInfo (props) { + return ( + + + + ) +} -export default GlyphSmallInfo +export default SvgGlyphSmallInfo diff --git a/src/icons/GlyphSmallTick.js b/src/icons/GlyphSmallTick.js index eeb1427e7..008d569b6 100644 --- a/src/icons/GlyphSmallTick.js +++ b/src/icons/GlyphSmallTick.js @@ -1,9 +1,11 @@ -import React from 'react' +import * as React from 'react' -const GlyphSmallTick = props => ( - - - -) +function SvgGlyphSmallTick (props) { + return ( + + + + ) +} -export default GlyphSmallTick +export default SvgGlyphSmallTick diff --git a/src/icons/GlyphSpeaker.js b/src/icons/GlyphSpeaker.js index 6c74442de..fa27f22d8 100644 --- a/src/icons/GlyphSpeaker.js +++ b/src/icons/GlyphSpeaker.js @@ -1,12 +1,14 @@ -import React from 'react' +import * as React from 'react' -const GlyphSpeaker = props => ( - - - - - - -) +function SvgGlyphSpeaker (props) { + return ( + + + + + + + ) +} -export default GlyphSpeaker +export default SvgGlyphSpeaker diff --git a/src/icons/GlyphTag.js b/src/icons/GlyphTag.js index c72314f0d..abef0fd21 100644 --- a/src/icons/GlyphTag.js +++ b/src/icons/GlyphTag.js @@ -1,9 +1,11 @@ -import React from 'react' +import * as React from 'react' -const GlyphTag = props => ( - - - -) +function SvgGlyphTag (props) { + return ( + + + + ) +} -export default GlyphTag +export default SvgGlyphTag diff --git a/src/icons/GlyphTick.js b/src/icons/GlyphTick.js index 62268adcf..961e2899e 100644 --- a/src/icons/GlyphTick.js +++ b/src/icons/GlyphTick.js @@ -1,9 +1,11 @@ -import React from 'react' +import * as React from 'react' -const GlyphTick = props => ( - - - -) +function SvgGlyphTick (props) { + return ( + + + + ) +} -export default GlyphTick +export default SvgGlyphTick diff --git a/src/icons/GlyphTrash.js b/src/icons/GlyphTrash.js index 8514538f0..f4d3067e5 100644 --- a/src/icons/GlyphTrash.js +++ b/src/icons/GlyphTrash.js @@ -1,9 +1,11 @@ -import React from 'react' +import * as React from 'react' -const GlyphTrash = props => ( - - - -) +function SvgGlyphTrash (props) { + return ( + + + + ) +} -export default GlyphTrash +export default SvgGlyphTrash diff --git a/src/icons/GlyphUser.js b/src/icons/GlyphUser.js index 40d8947a0..30c9692b2 100644 --- a/src/icons/GlyphUser.js +++ b/src/icons/GlyphUser.js @@ -1,9 +1,11 @@ -import React from 'react' +import * as React from 'react' -const GlyphUser = props => ( - - - -) +function SvgGlyphUser (props) { + return ( + + + + ) +} -export default GlyphUser +export default SvgGlyphUser diff --git a/src/icons/GlyphVoice.js b/src/icons/GlyphVoice.js index e60737cc7..4865cf178 100644 --- a/src/icons/GlyphVoice.js +++ b/src/icons/GlyphVoice.js @@ -1,10 +1,12 @@ -import React from 'react' +import * as React from 'react' -const GlyphVoice = props => ( - - - - -) +function SvgGlyphVoice (props) { + return ( + + + + + ) +} -export default GlyphVoice +export default SvgGlyphVoice diff --git a/src/icons/GlyphWallet.js b/src/icons/GlyphWallet.js index 2af699177..2f5f0da71 100644 --- a/src/icons/GlyphWallet.js +++ b/src/icons/GlyphWallet.js @@ -1,10 +1,12 @@ -import React from 'react' +import * as React from 'react' -const GlyphWallet = props => ( - - - - -) +function SvgGlyphWallet (props) { + return ( + + + + + ) +} -export default GlyphWallet +export default SvgGlyphWallet diff --git a/src/icons/GlyphWeb.js b/src/icons/GlyphWeb.js new file mode 100644 index 000000000..d1e065669 --- /dev/null +++ b/src/icons/GlyphWeb.js @@ -0,0 +1,18 @@ +import * as React from 'react' + +function SvgGlyphWeb (props) { + return ( + + + + + + + + ) +} + +export default SvgGlyphWeb diff --git a/src/icons/GlyphWindow.js b/src/icons/GlyphWindow.js index 176fed7e6..e95dfc47e 100644 --- a/src/icons/GlyphWindow.js +++ b/src/icons/GlyphWindow.js @@ -1,11 +1,13 @@ -import React from 'react' +import * as React from 'react' -const GlyphWindow = props => ( - - - - - -) +function SvgGlyphWindow (props) { + return ( + + + + + + ) +} -export default GlyphWindow +export default SvgGlyphWindow diff --git a/src/icons/Icons.stories.js b/src/icons/Icons.stories.js index d6f996389..006aeb6de 100644 --- a/src/icons/Icons.stories.js +++ b/src/icons/Icons.stories.js @@ -2,7 +2,7 @@ import React from '@storybook/react' import { withKnobs, text, number, color } from '@storybook/addon-knobs' const requireContext = require.context('.', true, /\.js?$/) -const modules = requireContext.keys().filter((c) => !c.includes('.stories')) +const modules = requireContext.keys().filter((c) => !c.includes('.stories') && !c.includes('index.js')) const icons = modules.map((m) => ({ name: m.replace('./', '').replace('.js', ''), Icon: requireContext(m).default diff --git a/src/icons/StrokeAdd.js b/src/icons/StrokeAdd.js new file mode 100644 index 000000000..8e5e94079 --- /dev/null +++ b/src/icons/StrokeAdd.js @@ -0,0 +1,12 @@ +import * as React from 'react' + +function SvgStrokeAdd (props) { + return ( + + + + + ) +} + +export default SvgStrokeAdd diff --git a/src/icons/StrokeAttention.js b/src/icons/StrokeAttention.js index c46e476cf..bc15634cd 100644 --- a/src/icons/StrokeAttention.js +++ b/src/icons/StrokeAttention.js @@ -1,10 +1,12 @@ -import React from 'react' +import * as React from 'react' -const StrokeAttention = props => ( - - - - -) +function SvgStrokeAttention (props) { + return ( + + + + + ) +} -export default StrokeAttention +export default SvgStrokeAttention diff --git a/src/icons/StrokeBasket.js b/src/icons/StrokeBasket.js index 4f7e311ee..64b4afda0 100644 --- a/src/icons/StrokeBasket.js +++ b/src/icons/StrokeBasket.js @@ -1,10 +1,12 @@ -import React from 'react' +import * as React from 'react' -const StrokeBasket = props => ( - - - - -) +function SvgStrokeBasket (props) { + return ( + + + + + ) +} -export default StrokeBasket +export default SvgStrokeBasket diff --git a/src/icons/StrokeBook.js b/src/icons/StrokeBook.js index 6b72d1eee..e918f75bb 100644 --- a/src/icons/StrokeBook.js +++ b/src/icons/StrokeBook.js @@ -1,9 +1,11 @@ -import React from 'react' +import * as React from 'react' -const StrokeBook = props => ( - - - -) +function SvgStrokeBook (props) { + return ( + + + + ) +} -export default StrokeBook +export default SvgStrokeBook diff --git a/src/icons/StrokeCalendar.js b/src/icons/StrokeCalendar.js index 9ddb187b6..7cd2776a4 100644 --- a/src/icons/StrokeCalendar.js +++ b/src/icons/StrokeCalendar.js @@ -1,10 +1,12 @@ -import React from 'react' +import * as React from 'react' -const StrokeCalendar = props => ( - - - - -) +function SvgStrokeCalendar (props) { + return ( + + + + + ) +} -export default StrokeCalendar +export default SvgStrokeCalendar diff --git a/src/icons/StrokeCamera.js b/src/icons/StrokeCamera.js index 8e0306a46..34bc1726f 100644 --- a/src/icons/StrokeCamera.js +++ b/src/icons/StrokeCamera.js @@ -1,11 +1,13 @@ -import React from 'react' +import * as React from 'react' -const StrokeCamera = props => ( - - - - - -) +function SvgStrokeCamera (props) { + return ( + + + + + + ) +} -export default StrokeCamera +export default SvgStrokeCamera diff --git a/src/icons/StrokeCancel.js b/src/icons/StrokeCancel.js index d9288896d..5e5e4ea94 100644 --- a/src/icons/StrokeCancel.js +++ b/src/icons/StrokeCancel.js @@ -1,10 +1,12 @@ -import React from 'react' +import * as React from 'react' -const StrokeCancel = props => ( - - - - -) +function SvgStrokeCancel (props) { + return ( + + + + + ) +} -export default StrokeCancel +export default SvgStrokeCancel diff --git a/src/icons/StrokeCase.js b/src/icons/StrokeCase.js index 078be6553..63ad38d0b 100644 --- a/src/icons/StrokeCase.js +++ b/src/icons/StrokeCase.js @@ -1,9 +1,11 @@ -import React from 'react' +import * as React from 'react' -const StrokeCase = props => ( - - - -) +function SvgStrokeCase (props) { + return ( + + + + ) +} -export default StrokeCase +export default SvgStrokeCase diff --git a/src/icons/StrokeCentralization.js b/src/icons/StrokeCentralization.js index 074b7da0e..8afa68b35 100644 --- a/src/icons/StrokeCentralization.js +++ b/src/icons/StrokeCentralization.js @@ -1,9 +1,11 @@ -import React from 'react' +import * as React from 'react' -const StrokeCentralization = props => ( - - - -) +function SvgStrokeCentralization (props) { + return ( + + + + ) +} -export default StrokeCentralization +export default SvgStrokeCentralization diff --git a/src/icons/StrokeChart.js b/src/icons/StrokeChart.js index 826144fc8..80cb404fe 100644 --- a/src/icons/StrokeChart.js +++ b/src/icons/StrokeChart.js @@ -1,9 +1,11 @@ -import React from 'react' +import * as React from 'react' -const StrokeChart = props => ( - - - -) +function SvgStrokeChart (props) { + return ( + + + + ) +} -export default StrokeChart +export default SvgStrokeChart diff --git a/src/icons/StrokeChat.js b/src/icons/StrokeChat.js index 78a67ffc5..3e9bd8b40 100644 --- a/src/icons/StrokeChat.js +++ b/src/icons/StrokeChat.js @@ -1,10 +1,12 @@ -import React from 'react' +import * as React from 'react' -const StrokeChat = props => ( - - - - -) +function SvgStrokeChat (props) { + return ( + + + + + ) +} -export default StrokeChat +export default SvgStrokeChat diff --git a/src/icons/StrokeClock.js b/src/icons/StrokeClock.js index cc0d69fd6..e85e928b9 100644 --- a/src/icons/StrokeClock.js +++ b/src/icons/StrokeClock.js @@ -1,10 +1,12 @@ -import React from 'react' +import * as React from 'react' -const StrokeClock = props => ( - - - - -) +function SvgStrokeClock (props) { + return ( + + + + + ) +} -export default StrokeClock +export default SvgStrokeClock diff --git a/src/icons/StrokeCloud.js b/src/icons/StrokeCloud.js index 26cf6b839..966d006f7 100644 --- a/src/icons/StrokeCloud.js +++ b/src/icons/StrokeCloud.js @@ -1,9 +1,11 @@ -import React from 'react' +import * as React from 'react' -const StrokeCloud = props => ( - - - -) +function SvgStrokeCloud (props) { + return ( + + + + ) +} -export default StrokeCloud +export default SvgStrokeCloud diff --git a/src/icons/StrokeCode.js b/src/icons/StrokeCode.js index 901d0fdc2..83fd5accd 100644 --- a/src/icons/StrokeCode.js +++ b/src/icons/StrokeCode.js @@ -1,11 +1,13 @@ -import React from 'react' +import * as React from 'react' -const StrokeCode = props => ( - - - - - -) +function SvgStrokeCode (props) { + return ( + + + + + + ) +} -export default StrokeCode +export default SvgStrokeCode diff --git a/src/icons/StrokeCopy.js b/src/icons/StrokeCopy.js index e784b5743..de6d39f95 100644 --- a/src/icons/StrokeCopy.js +++ b/src/icons/StrokeCopy.js @@ -1,10 +1,12 @@ -import React from 'react' +import * as React from 'react' -const StrokeCopy = props => ( - - - - -) +function SvgStrokeCopy (props) { + return ( + + + + + ) +} -export default StrokeCopy +export default SvgStrokeCopy diff --git a/src/icons/StrokeCube.js b/src/icons/StrokeCube.js index 93b553275..9dc15e971 100644 --- a/src/icons/StrokeCube.js +++ b/src/icons/StrokeCube.js @@ -1,9 +1,11 @@ -import React from 'react' +import * as React from 'react' -const StrokeCube = props => ( - - - -) +function SvgStrokeCube (props) { + return ( + + + + ) +} -export default StrokeCube +export default SvgStrokeCube diff --git a/src/icons/StrokeData.js b/src/icons/StrokeData.js index 3fdc61a13..1854e480e 100644 --- a/src/icons/StrokeData.js +++ b/src/icons/StrokeData.js @@ -1,10 +1,12 @@ -import React from 'react' +import * as React from 'react' -const StrokeData = props => ( - - - - -) +function SvgStrokeData (props) { + return ( + + + + + ) +} -export default StrokeData +export default SvgStrokeData diff --git a/src/icons/StrokeDecentralization.js b/src/icons/StrokeDecentralization.js index cfd3fbd34..ff4a1df87 100644 --- a/src/icons/StrokeDecentralization.js +++ b/src/icons/StrokeDecentralization.js @@ -1,9 +1,11 @@ -import React from 'react' +import * as React from 'react' -const StrokeDecentralization = props => ( - - - -) +function SvgStrokeDecentralization (props) { + return ( + + + + ) +} -export default StrokeDecentralization +export default SvgStrokeDecentralization diff --git a/src/icons/StrokeDevices.js b/src/icons/StrokeDevices.js index e1681b15d..7dc7926d3 100644 --- a/src/icons/StrokeDevices.js +++ b/src/icons/StrokeDevices.js @@ -1,10 +1,12 @@ -import React from 'react' +import * as React from 'react' -const StrokeDevices = props => ( - - - - -) +function SvgStrokeDevices (props) { + return ( + + + + + ) +} -export default StrokeDevices +export default SvgStrokeDevices diff --git a/src/icons/StrokeDistributed.js b/src/icons/StrokeDistributed.js index db240207f..0acf81e14 100644 --- a/src/icons/StrokeDistributed.js +++ b/src/icons/StrokeDistributed.js @@ -1,9 +1,11 @@ -import React from 'react' +import * as React from 'react' -const StrokeDistributed = props => ( - - - -) +function SvgStrokeDistributed (props) { + return ( + + + + ) +} -export default StrokeDistributed +export default SvgStrokeDistributed diff --git a/src/icons/StrokeDocCalc.js b/src/icons/StrokeDocCalc.js new file mode 100644 index 000000000..b1301d6fc --- /dev/null +++ b/src/icons/StrokeDocCalc.js @@ -0,0 +1,12 @@ +import * as React from 'react' + +function SvgStrokeDocCalc (props) { + return ( + + + + + ) +} + +export default SvgStrokeDocCalc diff --git a/src/icons/StrokeDocGeneric.js b/src/icons/StrokeDocGeneric.js new file mode 100644 index 000000000..4eb4179a2 --- /dev/null +++ b/src/icons/StrokeDocGeneric.js @@ -0,0 +1,11 @@ +import * as React from 'react' + +function SvgStrokeDocGeneric (props) { + return ( + + + + ) +} + +export default SvgStrokeDocGeneric diff --git a/src/icons/StrokeDocMovie.js b/src/icons/StrokeDocMovie.js new file mode 100644 index 000000000..6bf8c59e7 --- /dev/null +++ b/src/icons/StrokeDocMovie.js @@ -0,0 +1,12 @@ +import * as React from 'react' + +function SvgStrokeDocMovie (props) { + return ( + + + + + ) +} + +export default SvgStrokeDocMovie diff --git a/src/icons/StrokeDocMusic.js b/src/icons/StrokeDocMusic.js new file mode 100644 index 000000000..3d4bbef52 --- /dev/null +++ b/src/icons/StrokeDocMusic.js @@ -0,0 +1,12 @@ +import * as React from 'react' + +function SvgStrokeDocMusic (props) { + return ( + + + + + ) +} + +export default SvgStrokeDocMusic diff --git a/src/icons/StrokeDocPicture.js b/src/icons/StrokeDocPicture.js new file mode 100644 index 000000000..06274f676 --- /dev/null +++ b/src/icons/StrokeDocPicture.js @@ -0,0 +1,13 @@ +import * as React from 'react' + +function SvgStrokeDocPicture (props) { + return ( + + + + + + ) +} + +export default SvgStrokeDocPicture diff --git a/src/icons/StrokeDocText.js b/src/icons/StrokeDocText.js new file mode 100644 index 000000000..b4af0de79 --- /dev/null +++ b/src/icons/StrokeDocText.js @@ -0,0 +1,13 @@ +import * as React from 'react' + +function SvgStrokeDocText (props) { + return ( + + + + + + ) +} + +export default SvgStrokeDocText diff --git a/src/icons/StrokeDocument.js b/src/icons/StrokeDocument.js index 07a276791..07e839873 100644 --- a/src/icons/StrokeDocument.js +++ b/src/icons/StrokeDocument.js @@ -1,10 +1,12 @@ -import React from 'react' +import * as React from 'react' -const StrokeDocument = props => ( - - - - -) +function SvgStrokeDocument (props) { + return ( + + + + + ) +} -export default StrokeDocument +export default SvgStrokeDocument diff --git a/src/icons/StrokeDots.js b/src/icons/StrokeDots.js new file mode 100644 index 000000000..5612232a8 --- /dev/null +++ b/src/icons/StrokeDots.js @@ -0,0 +1,11 @@ +import * as React from 'react' + +function SvgStrokeDots (props) { + return ( + + + + ) +} + +export default SvgStrokeDots diff --git a/src/icons/StrokeDownload.js b/src/icons/StrokeDownload.js index 357e9f401..d424d5424 100644 --- a/src/icons/StrokeDownload.js +++ b/src/icons/StrokeDownload.js @@ -1,10 +1,12 @@ -import React from 'react' +import * as React from 'react' -const StrokeDownload = props => ( - - - - -) +function SvgStrokeDownload (props) { + return ( + + + + + ) +} -export default StrokeDownload +export default SvgStrokeDownload diff --git a/src/icons/StrokeFilter.js b/src/icons/StrokeFilter.js index 8287612bb..16b0d5aad 100644 --- a/src/icons/StrokeFilter.js +++ b/src/icons/StrokeFilter.js @@ -1,10 +1,12 @@ -import React from 'react' +import * as React from 'react' -const StrokeFilter = props => ( - - - - -) +function SvgStrokeFilter (props) { + return ( + + + + + ) +} -export default StrokeFilter +export default SvgStrokeFilter diff --git a/src/icons/StrokeFolder.js b/src/icons/StrokeFolder.js index bb972c394..fff3063c5 100644 --- a/src/icons/StrokeFolder.js +++ b/src/icons/StrokeFolder.js @@ -1,9 +1,11 @@ -import React from 'react' +import * as React from 'react' -const StrokeFolder = props => ( - - - -) +function SvgStrokeFolder (props) { + return ( + + + + ) +} -export default StrokeFolder +export default SvgStrokeFolder diff --git a/src/icons/StrokeHome.js b/src/icons/StrokeHome.js new file mode 100644 index 000000000..c345dec00 --- /dev/null +++ b/src/icons/StrokeHome.js @@ -0,0 +1,13 @@ +import * as React from 'react' + +function SvgStrokeHome (props) { + return ( + + + + + + ) +} + +export default SvgStrokeHome diff --git a/src/icons/StrokeIdea.js b/src/icons/StrokeIdea.js index 14625d891..34b0944cf 100644 --- a/src/icons/StrokeIdea.js +++ b/src/icons/StrokeIdea.js @@ -1,9 +1,11 @@ -import React from 'react' +import * as React from 'react' -const StrokeIdea = props => ( - - - -) +function SvgStrokeIdea (props) { + return ( + + + + ) +} -export default StrokeIdea +export default SvgStrokeIdea diff --git a/src/icons/StrokeInfo.js b/src/icons/StrokeInfo.js index c3c4bfe47..896f7880e 100644 --- a/src/icons/StrokeInfo.js +++ b/src/icons/StrokeInfo.js @@ -1,10 +1,12 @@ -import React from 'react' +import * as React from 'react' -const StrokeInfo = props => ( - - - - -) +function SvgStrokeInfo (props) { + return ( + + + + + ) +} -export default StrokeInfo +export default SvgStrokeInfo diff --git a/src/icons/StrokeIpld.js b/src/icons/StrokeIpld.js index c76ad9f74..6aeacac52 100644 --- a/src/icons/StrokeIpld.js +++ b/src/icons/StrokeIpld.js @@ -1,9 +1,11 @@ -import React from 'react' +import * as React from 'react' -const StrokeIpld = props => ( - - - -) +function SvgStrokeIpld (props) { + return ( + + + + ) +} -export default StrokeIpld +export default SvgStrokeIpld diff --git a/src/icons/StrokeLab.js b/src/icons/StrokeLab.js index 234936232..5f2542866 100644 --- a/src/icons/StrokeLab.js +++ b/src/icons/StrokeLab.js @@ -1,9 +1,11 @@ -import React from 'react' +import * as React from 'react' -const StrokeLab = props => ( - - - -) +function SvgStrokeLab (props) { + return ( + + + + ) +} -export default StrokeLab +export default SvgStrokeLab diff --git a/src/icons/StrokeLink.js b/src/icons/StrokeLink.js new file mode 100644 index 000000000..0cfc795d1 --- /dev/null +++ b/src/icons/StrokeLink.js @@ -0,0 +1,11 @@ +import * as React from 'react' + +function SvgStrokeLink (props) { + return ( + + + + ) +} + +export default SvgStrokeLink diff --git a/src/icons/StrokeLinkExternal.js b/src/icons/StrokeLinkExternal.js new file mode 100644 index 000000000..3dde35edb --- /dev/null +++ b/src/icons/StrokeLinkExternal.js @@ -0,0 +1,12 @@ +import * as React from 'react' + +function SvgStrokeLinkExternal (props) { + return ( + + + + + ) +} + +export default SvgStrokeLinkExternal diff --git a/src/icons/StrokeLock.js b/src/icons/StrokeLock.js index 925786b40..006a2c8e4 100644 --- a/src/icons/StrokeLock.js +++ b/src/icons/StrokeLock.js @@ -1,10 +1,12 @@ -import React from 'react' +import * as React from 'react' -const StrokeLock = props => ( - - - - -) +function SvgStrokeLock (props) { + return ( + + + + + ) +} -export default StrokeLock +export default SvgStrokeLock diff --git a/src/icons/StrokeMail.js b/src/icons/StrokeMail.js index 00d2484ba..b3b5ddaf2 100644 --- a/src/icons/StrokeMail.js +++ b/src/icons/StrokeMail.js @@ -1,9 +1,11 @@ -import React from 'react' +import * as React from 'react' -const StrokeMail = props => ( - - - -) +function SvgStrokeMail (props) { + return ( + + + + ) +} -export default StrokeMail +export default SvgStrokeMail diff --git a/src/icons/StrokeMap.js b/src/icons/StrokeMap.js index 5eee3a1f5..5fd40020f 100644 --- a/src/icons/StrokeMap.js +++ b/src/icons/StrokeMap.js @@ -1,9 +1,11 @@ -import React from 'react' +import * as React from 'react' -const StrokeMap = props => ( - - - -) +function SvgStrokeMap (props) { + return ( + + + + ) +} -export default StrokeMap +export default SvgStrokeMap diff --git a/src/icons/StrokeMarker.js b/src/icons/StrokeMarker.js index c82f8f0be..cdad5ed04 100644 --- a/src/icons/StrokeMarker.js +++ b/src/icons/StrokeMarker.js @@ -1,10 +1,12 @@ -import React from 'react' +import * as React from 'react' -const StrokeMarker = props => ( - - - - -) +function SvgStrokeMarker (props) { + return ( + + + + + ) +} -export default StrokeMarker +export default SvgStrokeMarker diff --git a/src/icons/StrokeMarketing.js b/src/icons/StrokeMarketing.js index 1b2001a9b..96f98f516 100644 --- a/src/icons/StrokeMarketing.js +++ b/src/icons/StrokeMarketing.js @@ -1,10 +1,12 @@ -import React from 'react' +import * as React from 'react' -const StrokeMarketing = props => ( - - - - -) +function SvgStrokeMarketing (props) { + return ( + + + + + ) +} -export default StrokeMarketing +export default SvgStrokeMarketing diff --git a/src/icons/StrokeMobile.js b/src/icons/StrokeMobile.js index c30866797..15dc55c1e 100644 --- a/src/icons/StrokeMobile.js +++ b/src/icons/StrokeMobile.js @@ -1,10 +1,12 @@ -import React from 'react' +import * as React from 'react' -const StrokeMobile = props => ( - - - - -) +function SvgStrokeMobile (props) { + return ( + + + + + ) +} -export default StrokeMobile +export default SvgStrokeMobile diff --git a/src/icons/StrokeMonitor.js b/src/icons/StrokeMonitor.js index c77802262..a232a7b5e 100644 --- a/src/icons/StrokeMonitor.js +++ b/src/icons/StrokeMonitor.js @@ -1,10 +1,12 @@ -import React from 'react' +import * as React from 'react' -const StrokeMonitor = props => ( - - - - -) +function SvgStrokeMonitor (props) { + return ( + + + + + ) +} -export default StrokeMonitor +export default SvgStrokeMonitor diff --git a/src/icons/StrokeNewFolder.js b/src/icons/StrokeNewFolder.js index be6da7b2f..d69c2e333 100644 --- a/src/icons/StrokeNewFolder.js +++ b/src/icons/StrokeNewFolder.js @@ -1,9 +1,11 @@ -import React from 'react' +import * as React from 'react' -const StrokeNewFolder = props => ( - - - -) +function SvgStrokeNewFolder (props) { + return ( + + + + ) +} -export default StrokeNewFolder +export default SvgStrokeNewFolder diff --git a/src/icons/StrokePeersLarge.js b/src/icons/StrokePeersLarge.js new file mode 100644 index 000000000..b0aa328f4 --- /dev/null +++ b/src/icons/StrokePeersLarge.js @@ -0,0 +1,11 @@ +import * as React from 'react' + +function SvgStrokePeersLarge (props) { + return ( + + + + ) +} + +export default SvgStrokePeersLarge diff --git a/src/icons/StrokePeersMedium.js b/src/icons/StrokePeersMedium.js new file mode 100644 index 000000000..235f7e746 --- /dev/null +++ b/src/icons/StrokePeersMedium.js @@ -0,0 +1,11 @@ +import * as React from 'react' + +function SvgStrokePeersMedium (props) { + return ( + + + + ) +} + +export default SvgStrokePeersMedium diff --git a/src/icons/StrokePeersSmall.js b/src/icons/StrokePeersSmall.js new file mode 100644 index 000000000..637ceea38 --- /dev/null +++ b/src/icons/StrokePeersSmall.js @@ -0,0 +1,11 @@ +import * as React from 'react' + +function SvgStrokePeersSmall (props) { + return ( + + + + ) +} + +export default SvgStrokePeersSmall diff --git a/src/icons/StrokePen.js b/src/icons/StrokePen.js index 3cc3074c4..88619ce20 100644 --- a/src/icons/StrokePen.js +++ b/src/icons/StrokePen.js @@ -1,9 +1,11 @@ -import React from 'react' +import * as React from 'react' -const StrokePen = props => ( - - - -) +function SvgStrokePen (props) { + return ( + + + + ) +} -export default StrokePen +export default SvgStrokePen diff --git a/src/icons/StrokePencil.js b/src/icons/StrokePencil.js index 696f7e3db..4b2bb5a8d 100644 --- a/src/icons/StrokePencil.js +++ b/src/icons/StrokePencil.js @@ -1,9 +1,11 @@ -import React from 'react' +import * as React from 'react' -const StrokePencil = props => ( - - - -) +function SvgStrokePencil (props) { + return ( + + + + ) +} -export default StrokePencil +export default SvgStrokePencil diff --git a/src/icons/StrokePin.js b/src/icons/StrokePin.js index 07e8a0fa2..7840fb7cb 100644 --- a/src/icons/StrokePin.js +++ b/src/icons/StrokePin.js @@ -1,9 +1,11 @@ -import React from 'react' +import * as React from 'react' -const StrokePin = props => ( - - - -) +function SvgStrokePin (props) { + return ( + + + + ) +} -export default StrokePin +export default SvgStrokePin diff --git a/src/icons/StrokePinCloud.js b/src/icons/StrokePinCloud.js index 60c97d578..d6811f02a 100644 --- a/src/icons/StrokePinCloud.js +++ b/src/icons/StrokePinCloud.js @@ -1,9 +1,12 @@ -import React from 'react' +import * as React from 'react' -const StrokePinCloud = props => ( - - - -) +function SvgStrokePinCloud (props) { + return ( + + + + + ) +} -export default StrokePinCloud +export default SvgStrokePinCloud diff --git a/src/icons/StrokePower.js b/src/icons/StrokePower.js new file mode 100644 index 000000000..574321065 --- /dev/null +++ b/src/icons/StrokePower.js @@ -0,0 +1,13 @@ +import * as React from 'react' + +function SvgStrokePower (props) { + return ( + + + + + + ) +} + +export default SvgStrokePower diff --git a/src/icons/StrokePresentation.js b/src/icons/StrokePresentation.js index 32d0f7591..5753371d0 100644 --- a/src/icons/StrokePresentation.js +++ b/src/icons/StrokePresentation.js @@ -1,10 +1,12 @@ -import React from 'react' +import * as React from 'react' -const StrokePresentation = props => ( - - - - -) +function SvgStrokePresentation (props) { + return ( + + + + + ) +} -export default StrokePresentation +export default SvgStrokePresentation diff --git a/src/icons/StrokeSearch.js b/src/icons/StrokeSearch.js index 8f5a391b9..772d5b693 100644 --- a/src/icons/StrokeSearch.js +++ b/src/icons/StrokeSearch.js @@ -1,10 +1,12 @@ -import React from 'react' +import * as React from 'react' -const StrokeSearch = props => ( - - - - -) +function SvgStrokeSearch (props) { + return ( + + + + + ) +} -export default StrokeSearch +export default SvgStrokeSearch diff --git a/src/icons/StrokeServer.js b/src/icons/StrokeServer.js index 448e6a8b5..668df0a2b 100644 --- a/src/icons/StrokeServer.js +++ b/src/icons/StrokeServer.js @@ -1,10 +1,12 @@ -import React from 'react' +import * as React from 'react' -const StrokeServer = props => ( - - - - -) +function SvgStrokeServer (props) { + return ( + + + + + ) +} -export default StrokeServer +export default SvgStrokeServer diff --git a/src/icons/StrokeSettings.js b/src/icons/StrokeSettings.js index a782f3904..e9ec5405b 100644 --- a/src/icons/StrokeSettings.js +++ b/src/icons/StrokeSettings.js @@ -1,11 +1,13 @@ -import React from 'react' +import * as React from 'react' -const StrokeSettings = props => ( - - - - - -) +function SvgStrokeSettings (props) { + return ( + + + + + + ) +} -export default StrokeSettings +export default SvgStrokeSettings diff --git a/src/icons/StrokeShare.js b/src/icons/StrokeShare.js index 6a0fb92f0..9f76cb30d 100644 --- a/src/icons/StrokeShare.js +++ b/src/icons/StrokeShare.js @@ -1,9 +1,11 @@ -import React from 'react' +import * as React from 'react' -const StrokeShare = props => ( - - - -) +function SvgStrokeShare (props) { + return ( + + + + ) +} -export default StrokeShare +export default SvgStrokeShare diff --git a/src/icons/StrokeSmallArrow.js b/src/icons/StrokeSmallArrow.js new file mode 100644 index 000000000..90cb598bf --- /dev/null +++ b/src/icons/StrokeSmallArrow.js @@ -0,0 +1,11 @@ +import * as React from 'react' + +function SvgStrokeSmallArrow (props) { + return ( + + + + ) +} + +export default SvgStrokeSmallArrow diff --git a/src/icons/StrokeSmallCancel.js b/src/icons/StrokeSmallCancel.js new file mode 100644 index 000000000..767bea05e --- /dev/null +++ b/src/icons/StrokeSmallCancel.js @@ -0,0 +1,11 @@ +import * as React from 'react' + +function SvgStrokeSmallCancel (props) { + return ( + + + + ) +} + +export default SvgStrokeSmallCancel diff --git a/src/icons/StrokeSmallInfo.js b/src/icons/StrokeSmallInfo.js new file mode 100644 index 000000000..3b7c8cdd5 --- /dev/null +++ b/src/icons/StrokeSmallInfo.js @@ -0,0 +1,11 @@ +import * as React from 'react' + +function SvgStrokeSmallInfo (props) { + return ( + + + + ) +} + +export default SvgStrokeSmallInfo diff --git a/src/icons/StrokeSmallTick.js b/src/icons/StrokeSmallTick.js new file mode 100644 index 000000000..4de07b5ab --- /dev/null +++ b/src/icons/StrokeSmallTick.js @@ -0,0 +1,11 @@ +import * as React from 'react' + +function SvgStrokeSmallTick (props) { + return ( + + + + ) +} + +export default SvgStrokeSmallTick diff --git a/src/icons/StrokeSpeaker.js b/src/icons/StrokeSpeaker.js index 54e02c896..254d9e65a 100644 --- a/src/icons/StrokeSpeaker.js +++ b/src/icons/StrokeSpeaker.js @@ -1,9 +1,11 @@ -import React from 'react' +import * as React from 'react' -const StrokeSpeaker = props => ( - - - -) +function SvgStrokeSpeaker (props) { + return ( + + + + ) +} -export default StrokeSpeaker +export default SvgStrokeSpeaker diff --git a/src/icons/StrokeTag.js b/src/icons/StrokeTag.js index 5ed7df149..ca38bb666 100644 --- a/src/icons/StrokeTag.js +++ b/src/icons/StrokeTag.js @@ -1,10 +1,12 @@ -import React from 'react' +import * as React from 'react' -const StrokeTag = props => ( - - - - -) +function SvgStrokeTag (props) { + return ( + + + + + ) +} -export default StrokeTag +export default SvgStrokeTag diff --git a/src/icons/StrokeTick.js b/src/icons/StrokeTick.js index 76cf9a302..3179c443e 100644 --- a/src/icons/StrokeTick.js +++ b/src/icons/StrokeTick.js @@ -1,10 +1,12 @@ -import React from 'react' +import * as React from 'react' -const StrokeTick = props => ( - - - - -) +function SvgStrokeTick (props) { + return ( + + + + + ) +} -export default StrokeTick +export default SvgStrokeTick diff --git a/src/icons/StrokeTrash.js b/src/icons/StrokeTrash.js index 8f64b34e9..f6e626c0f 100644 --- a/src/icons/StrokeTrash.js +++ b/src/icons/StrokeTrash.js @@ -1,10 +1,12 @@ -import React from 'react' +import * as React from 'react' -const StrokeTrash = props => ( - - - - -) +function SvgStrokeTrash (props) { + return ( + + + + + ) +} -export default StrokeTrash +export default SvgStrokeTrash diff --git a/src/icons/StrokeUser.js b/src/icons/StrokeUser.js index 463af9800..fe4d8468a 100644 --- a/src/icons/StrokeUser.js +++ b/src/icons/StrokeUser.js @@ -1,9 +1,11 @@ -import React from 'react' +import * as React from 'react' -const StrokeUser = props => ( - - - -) +function SvgStrokeUser (props) { + return ( + + + + ) +} -export default StrokeUser +export default SvgStrokeUser diff --git a/src/icons/StrokeVoice.js b/src/icons/StrokeVoice.js index 43e52f111..d40057837 100644 --- a/src/icons/StrokeVoice.js +++ b/src/icons/StrokeVoice.js @@ -1,11 +1,13 @@ -import React from 'react' +import * as React from 'react' -const StrokeVoice = props => ( - - - - - -) +function SvgStrokeVoice (props) { + return ( + + + + + + ) +} -export default StrokeVoice +export default SvgStrokeVoice diff --git a/src/icons/StrokeWallet.js b/src/icons/StrokeWallet.js index 15092ecf4..edc6ba9c7 100644 --- a/src/icons/StrokeWallet.js +++ b/src/icons/StrokeWallet.js @@ -1,10 +1,12 @@ -import React from 'react' +import * as React from 'react' -const StrokeWallet = props => ( - - - - -) +function SvgStrokeWallet (props) { + return ( + + + + + ) +} -export default StrokeWallet +export default SvgStrokeWallet diff --git a/src/icons/StrokeWeb.js b/src/icons/StrokeWeb.js index 7d7097f7a..5cf17ef2b 100644 --- a/src/icons/StrokeWeb.js +++ b/src/icons/StrokeWeb.js @@ -1,10 +1,12 @@ -import React from 'react' +import * as React from 'react' -const StrokeWeb = props => ( - - - - -) +function SvgStrokeWeb (props) { + return ( + + + + + ) +} -export default StrokeWeb +export default SvgStrokeWeb diff --git a/src/icons/StrokeWindow.js b/src/icons/StrokeWindow.js index 49f8827ec..6f0ad76ca 100644 --- a/src/icons/StrokeWindow.js +++ b/src/icons/StrokeWindow.js @@ -1,11 +1,13 @@ -import React from 'react' +import * as React from 'react' -const StrokeWindow = props => ( - - - - - -) +function SvgStrokeWindow (props) { + return ( + + + + + + ) +} -export default StrokeWindow +export default SvgStrokeWindow diff --git a/src/icons/hocs/GlyphPinCloud.js b/src/icons/hocs/GlyphPinCloud.js new file mode 100644 index 000000000..499f15968 --- /dev/null +++ b/src/icons/hocs/GlyphPinCloud.js @@ -0,0 +1,8 @@ +import GlyphPinCloudRegular from '../GlyphPinCloud' +import GlyphPinCloudFailed from '../GlyphPinCloudFailed' + +const GlyphPinCloud = ({ failed = false, ...props }) => failed + ? + : + +export default GlyphPinCloud diff --git a/src/icons/index.js b/src/icons/index.js new file mode 100644 index 000000000..0c54dbc78 --- /dev/null +++ b/src/icons/index.js @@ -0,0 +1,145 @@ +export { default as GlyphAdd } from './GlyphAdd' +export { default as GlyphAttention } from './GlyphAttention' +export { default as GlyphBasket } from './GlyphBasket' +export { default as GlyphBook } from './GlyphBook' +export { default as GlyphCalendar } from './GlyphCalendar' +export { default as GlyphCamera } from './GlyphCamera' +export { default as GlyphCancel } from './GlyphCancel' +export { default as GlyphCase } from './GlyphCase' +export { default as GlyphCentralization } from './GlyphCentralization' +export { default as GlyphChart } from './GlyphChart' +export { default as GlyphChat } from './GlyphChat' +export { default as GlyphClock } from './GlyphClock' +export { default as GlyphCloud } from './GlyphCloud' +export { default as GlyphCode } from './GlyphCode' +export { default as GlyphCopy } from './GlyphCopy' +export { default as GlyphCube } from './GlyphCube' +export { default as GlyphData } from './GlyphData' +export { default as GlyphDecentralization } from './GlyphDecentralization' +export { default as GlyphDevices } from './GlyphDevices' +export { default as GlyphDistributed } from './GlyphDistributed' +export { default as GlyphDocCalc } from './GlyphDocCalc' +export { default as GlyphDocGeneric } from './GlyphDocGeneric' +export { default as GlyphDocMovie } from './GlyphDocMovie' +export { default as GlyphDocMusic } from './GlyphDocMusic' +export { default as GlyphDocPicture } from './GlyphDocPicture' +export { default as GlyphDocText } from './GlyphDocText' +export { default as GlyphDocument } from './GlyphDocument' +export { default as GlyphDots } from './GlyphDots' +export { default as GlyphDownload } from './GlyphDownload' +export { default as GlyphFilter } from './GlyphFilter' +export { default as GlyphFolder } from './GlyphFolder' +export { default as GlyphHome } from './GlyphHome' +export { default as GlyphIdea } from './GlyphIdea' +export { default as GlyphInfo } from './GlyphInfo' +export { default as GlyphIpld } from './GlyphIpld' +export { default as GlyphLab } from './GlyphLab' +export { default as GlyphLink } from './GlyphLink' +export { default as GlyphLinkExternal } from './GlyphLinkExternal' +export { default as GlyphLock } from './GlyphLock' +export { default as GlyphMail } from './GlyphMail' +export { default as GlyphMap } from './GlyphMap' +export { default as GlyphMarker } from './GlyphMarker' +export { default as GlyphMarketing } from './GlyphMarketing' +export { default as GlyphMobile } from './GlyphMobile' +export { default as GlyphMonitor } from './GlyphMonitor' +export { default as GlyphNewFolder } from './GlyphNewFolder' +export { default as GlyphPeersLarge } from './GlyphPeersLarge' +export { default as GlyphPeersMedium } from './GlyphPeersMedium' +export { default as GlyphPeersSmall } from './GlyphPeersSmall' +export { default as GlyphPen } from './GlyphPen' +export { default as GlyphPencil } from './GlyphPencil' +export { default as GlyphPin } from './GlyphPin' +export { default as GlyphPinCloud } from './GlyphPinCloud' +export { default as GlyphPinCloudFailed } from './GlyphPinCloudFailed' +export { default as GlyphPower } from './GlyphPower' +export { default as GlyphPresentation } from './GlyphPresentation' +export { default as GlyphSearch } from './GlyphSearch' +export { default as GlyphServer } from './GlyphServer' +export { default as GlyphSettings } from './GlyphSettings' +export { default as GlyphShare } from './GlyphShare' +export { default as GlyphSmallArrow } from './GlyphSmallArrow' +export { default as GlyphSmallCancel } from './GlyphSmallCancel' +export { default as GlyphSmallInfo } from './GlyphSmallInfo' +export { default as GlyphSmallTick } from './GlyphSmallTick' +export { default as GlyphSpeaker } from './GlyphSpeaker' +export { default as GlyphTag } from './GlyphTag' +export { default as GlyphTick } from './GlyphTick' +export { default as GlyphTrash } from './GlyphTrash' +export { default as GlyphUser } from './GlyphUser' +export { default as GlyphVoice } from './GlyphVoice' +export { default as GlyphWallet } from './GlyphWallet' +export { default as GlyphWeb } from './GlyphWeb' +export { default as GlyphWindow } from './GlyphWindow' +export { default as StrokeAdd } from './StrokeAdd' +export { default as StrokeAttention } from './StrokeAttention' +export { default as StrokeBasket } from './StrokeBasket' +export { default as StrokeBook } from './StrokeBook' +export { default as StrokeCalendar } from './StrokeCalendar' +export { default as StrokeCamera } from './StrokeCamera' +export { default as StrokeCancel } from './StrokeCancel' +export { default as StrokeCase } from './StrokeCase' +export { default as StrokeCentralization } from './StrokeCentralization' +export { default as StrokeChart } from './StrokeChart' +export { default as StrokeChat } from './StrokeChat' +export { default as StrokeClock } from './StrokeClock' +export { default as StrokeCloud } from './StrokeCloud' +export { default as StrokeCode } from './StrokeCode' +export { default as StrokeCopy } from './StrokeCopy' +export { default as StrokeCube } from './StrokeCube' +export { default as StrokeData } from './StrokeData' +export { default as StrokeDecentralization } from './StrokeDecentralization' +export { default as StrokeDevices } from './StrokeDevices' +export { default as StrokeDistributed } from './StrokeDistributed' +export { default as StrokeDocCalc } from './StrokeDocCalc' +export { default as StrokeDocGeneric } from './StrokeDocGeneric' +export { default as StrokeDocMovie } from './StrokeDocMovie' +export { default as StrokeDocMusic } from './StrokeDocMusic' +export { default as StrokeDocPicture } from './StrokeDocPicture' +export { default as StrokeDocText } from './StrokeDocText' +export { default as StrokeDocument } from './StrokeDocument' +export { default as StrokeDots } from './StrokeDots' +export { default as StrokeDownload } from './StrokeDownload' +export { default as StrokeFilter } from './StrokeFilter' +export { default as StrokeFolder } from './StrokeFolder' +export { default as StrokeHome } from './StrokeHome' +export { default as StrokeIdea } from './StrokeIdea' +export { default as StrokeInfo } from './StrokeInfo' +export { default as StrokeIpld } from './StrokeIpld' +export { default as StrokeLab } from './StrokeLab' +export { default as StrokeLink } from './StrokeLink' +export { default as StrokeLinkExternal } from './StrokeLinkExternal' +export { default as StrokeLock } from './StrokeLock' +export { default as StrokeMail } from './StrokeMail' +export { default as StrokeMap } from './StrokeMap' +export { default as StrokeMarker } from './StrokeMarker' +export { default as StrokeMarketing } from './StrokeMarketing' +export { default as StrokeMobile } from './StrokeMobile' +export { default as StrokeMonitor } from './StrokeMonitor' +export { default as StrokeNewFolder } from './StrokeNewFolder' +export { default as StrokePeersLarge } from './StrokePeersLarge' +export { default as StrokePeersMedium } from './StrokePeersMedium' +export { default as StrokePeersSmall } from './StrokePeersSmall' +export { default as StrokePen } from './StrokePen' +export { default as StrokePencil } from './StrokePencil' +export { default as StrokePin } from './StrokePin' +export { default as StrokePinCloud } from './StrokePinCloud' +export { default as StrokePower } from './StrokePower' +export { default as StrokePresentation } from './StrokePresentation' +export { default as StrokeSearch } from './StrokeSearch' +export { default as StrokeServer } from './StrokeServer' +export { default as StrokeSettings } from './StrokeSettings' +export { default as StrokeShare } from './StrokeShare' +export { default as StrokeSmallArrow } from './StrokeSmallArrow' +export { default as StrokeSmallCancel } from './StrokeSmallCancel' +export { default as StrokeSmallInfo } from './StrokeSmallInfo' +export { default as StrokeSmallTick } from './StrokeSmallTick' +export { default as StrokeSpeaker } from './StrokeSpeaker' +export { default as StrokeTag } from './StrokeTag' +export { default as StrokeTick } from './StrokeTick' +export { default as StrokeTrash } from './StrokeTrash' +export { default as StrokeUser } from './StrokeUser' +export { default as StrokeVoice } from './StrokeVoice' +export { default as StrokeWallet } from './StrokeWallet' +export { default as StrokeWeb } from './StrokeWeb' +export { default as StrokeWindow } from './StrokeWindow' diff --git a/src/pins/LoadablePinsPage.js b/src/pins/LoadablePinsPage.js new file mode 100644 index 000000000..e09c8e831 --- /dev/null +++ b/src/pins/LoadablePinsPage.js @@ -0,0 +1,9 @@ +import React from 'react' +import Loadable from '@loadable/component' +import ComponentLoader from '../loader/ComponentLoader.js' + +const LoadablePinsPage = Loadable(() => import('./PinsPage'), + { fallback: } +) + +export default LoadablePinsPage diff --git a/src/pins/PinsPage.js b/src/pins/PinsPage.js new file mode 100644 index 000000000..e886ec8c8 --- /dev/null +++ b/src/pins/PinsPage.js @@ -0,0 +1,33 @@ +import React from 'react' +import { Helmet } from 'react-helmet' +import { connect } from 'redux-bundler-react' +import { withTranslation } from 'react-i18next' +import PinsStatuses from './PinsStatuses' + +const PinsPage = ({ pendingPins, failedPins, completedPins, doDismissCompletedPin, doDismissFailedPin, doCancelPendingPin }) => { + return ( +
+ + Pins Status + + + +
+ ) +} + +export default connect( + 'selectPendingPins', + 'selectFailedPins', + 'selectCompletedPins', + 'doDismissCompletedPin', + 'doDismissFailedPin', + 'doCancelPendingPin', + withTranslation('files')(PinsPage) +) diff --git a/src/pins/PinsStatuses.js b/src/pins/PinsStatuses.js new file mode 100644 index 000000000..8b27058c0 --- /dev/null +++ b/src/pins/PinsStatuses.js @@ -0,0 +1,57 @@ +import React from 'react' +import { withTranslation } from 'react-i18next' +import GlyphCancel from '../icons/GlyphCancel' +import GlyphPinCloud from '../icons/hocs/GlyphPinCloud' +import '../files/PendingAnimation.css' + +const Status = { + Pending: 0, + Completed: 1, + Failed: 2 +} + +const Pin = (t, pin, status = Status.Pending, onDismiss) => { + const [service, cid] = pin.split(':') + + let cloudClass = 'pa1' + let alt = '' + let dismissAlt = t('clickToDismiss') + if (status === Status.Pending) { + cloudClass += ' fill-aqua PendingAnimation' + alt = t('pinningRemotely') + dismissAlt = t('clickToCancel') + } else if (status === Status.Completed) { + cloudClass += ' fill-aqua' + alt = t('pinningCompleted') + } else if (status === Status.Failed) { + cloudClass += ' fill-red' + alt = t('pinningFailed') + } + + return (
  • + + {cid} + | {service} + + + +
    • ) +} + +const PinsStatuses = ({ pendingPins, failedPins, completedPins, onDismissFailedPin, onDismissCompletedPin, doCancelPendingPin, t }) => { + return ( +
    +

    {(pendingPins.length + failedPins.length + completedPins.length) > 0 ? t('remotePinningInProgress') : t('noPinsInProgress')}

    + +
      + {completedPins.map(pin => Pin(t, pin, Status.Completed, onDismissCompletedPin))} + {failedPins.map(pin => Pin(t, pin, Status.Failed, onDismissFailedPin))} + {pendingPins.map(pin => Pin(t, pin, Status.Pending, doCancelPendingPin))} +
    +
    + ) +} + +export default withTranslation('files')(PinsStatuses) diff --git a/src/pins/PinsStatuses.stories.js b/src/pins/PinsStatuses.stories.js new file mode 100644 index 000000000..a941730e6 --- /dev/null +++ b/src/pins/PinsStatuses.stories.js @@ -0,0 +1,40 @@ +import React from '@storybook/react' +import { action } from '@storybook/addon-actions' +import i18nDecorator from '../i18n-decorator' +import PinsStatuses from './PinsStatuses' + +/** + * @type {import('@storybook/react').Meta} + */ +export default { + title: 'Pins/PinsStatuses', + decorators: [i18nDecorator] +} + +/** + * @type {import('@storybook/react').StoryObj} + */ +export const Default = () => ( +
    + +
    +)