\n \n \n
\n : \n)\n\nexport const DropdownMenu = forwardRef((props, ref) => {\n const { children, arrowMarginRight, width = 200, translateX = 0, translateY = 0, ...rest } = props\n\n return (\n \n {children}\n
\n \n )\n})\n\nexport const Dropdown = Drop\n","import React from 'react'\n\nconst StrokeCopy = props => (\n \n)\n\nexport default StrokeCopy\n","import React from 'react'\n\nconst StrokeShare = props => (\n \n)\n\nexport default StrokeShare\n","import React from 'react'\n\nconst StrokePencil = props => (\n \n)\n\nexport default StrokePencil\n","import React from 'react'\n\nconst StrokeTrash = props => (\n \n)\n\nexport default StrokeTrash\n","import React from 'react'\n\nconst StrokePin = props => (\n \n)\n\nexport default StrokePin\n","import React from 'react'\nimport PropTypes from 'prop-types'\nimport { withTranslation } from 'react-i18next'\nimport { CopyToClipboard } from 'react-copy-to-clipboard'\nimport { Dropdown, DropdownMenu, Option } from '../dropdown/Dropdown'\nimport StrokeCopy from '../../icons/StrokeCopy'\nimport StrokeShare from '../../icons/StrokeShare'\nimport StrokePencil from '../../icons/StrokePencil'\nimport StrokeIpld from '../../icons/StrokeIpld'\nimport StrokeTrash from '../../icons/StrokeTrash'\nimport StrokeDownload from '../../icons/StrokeDownload'\nimport StrokePin from '../../icons/StrokePin'\nimport { cliCmdKeys } from '../../bundles/files/consts'\n\nclass ContextMenu extends React.Component {\n constructor (props) {\n super(props)\n this.dropdownMenuRef = React.createRef()\n }\n\n state = {\n dropdown: false\n }\n\n wrap = (name, cliOptions) => () => {\n if (name === 'onCliTutorMode' && cliOptions) {\n this.props.doSetCliOptions(cliOptions)\n }\n this.props.handleClick()\n this.props[name]()\n }\n\n componentDidUpdate () {\n if (this.props.autofocus && this.props.isOpen) {\n if (!this.dropdownMenuRef.current) return\n\n const firstButton = this.dropdownMenuRef.current.querySelector('button')\n if (!firstButton) return\n\n firstButton.focus()\n }\n }\n\n render () {\n const {\n t, onRename, onRemove, onDownload, onInspect, onShare,\n translateX, translateY, className, isMfs, isUnknown, isCliTutorModeEnabled\n } = this.props\n return (\n \n \n \n \n \n
\n)\n\nexport default withTranslation('files')(CompanionInfo)\n","import React from 'react'\nimport { withTranslation, Trans } from 'react-i18next'\nimport Box from '../../../components/box/Box'\n\nconst AddFilesInfo = ({ t }) => (\n As you are using IPFS Companion, the files view is limited to files added while using the extension.
\n\n \n \n \n \n
\n)\n\nexport default withTranslation('files')(AddFilesInfo)\n","import React from 'react'\nimport PropTypes from 'prop-types'\nimport CompanionInfo from './companion-info/CompanionInfo'\nimport AddFilesInfo from './add-files-info/AddFilesInfo'\n\nconst InfoBoxes = ({ isRoot, isCompanion, filesExist }) => (\n No files here yet! Add files to your local IPFS node by clicking the Import button above.
\n\n { isRoot && isCompanion &&
\n)\n\nInfoBoxes.propTypes = {\n isRoot: PropTypes.bool.isRequired,\n isCompanion: PropTypes.bool.isRequired,\n filesExist: PropTypes.bool.isRequired\n}\n\nexport default InfoBoxes\n","const extToType = {\n wav: 'audio',\n bwf: 'audio',\n aiff: 'audio',\n flac: 'audio',\n m4a: 'audio',\n pac: 'audio',\n tta: 'audio',\n wv: 'audio',\n aac: 'audio',\n mp2: 'audio',\n mp3: 'audio',\n amr: 'audio',\n s3m: 'audio',\n '3gp': 'audio',\n au: 'audio',\n dct: 'audio',\n dss: 'audio',\n gsm: 'audio',\n m4p: 'audio',\n mmf: 'audio',\n mpc: 'audio',\n ogg: 'audio',\n oga: 'audio',\n opus: 'audio',\n ra: 'audio',\n sln: 'audio',\n vox: 'audio',\n '3g2': 'video',\n aaf: 'video',\n asf: 'video',\n avchd: 'video',\n avi: 'video',\n drc: 'video',\n flv: 'video',\n m2v: 'video',\n m4v: 'video',\n mkv: 'video',\n mng: 'video',\n mov: 'video',\n mp4: 'video',\n mpe: 'video',\n mpeg: 'video',\n mpg: 'video',\n mpv: 'video',\n mxf: 'video',\n nsv: 'video',\n ogv: 'video',\n qt: 'video',\n rm: 'video',\n rmvb: 'video',\n roq: 'video',\n svi: 'video',\n vob: 'video',\n webm: 'video',\n wmv: 'video',\n yuv: 'video',\n art: 'image',\n bmp: 'image',\n blp: 'image',\n cd5: 'image',\n cit: 'image',\n cpt: 'image',\n cr2: 'image',\n cut: 'image',\n dds: 'image',\n dib: 'image',\n djvu: 'image',\n egt: 'image',\n exif: 'image',\n gif: 'image',\n gpl: 'image',\n grf: 'image',\n icns: 'image',\n ico: 'image',\n iff: 'image',\n jng: 'image',\n jpeg: 'image',\n jpg: 'image',\n jfif: 'image',\n jp2: 'image',\n jps: 'image',\n lbm: 'image',\n max: 'image',\n miff: 'image',\n msp: 'image',\n nitf: 'image',\n ota: 'image',\n pbm: 'image',\n pc1: 'image',\n pc2: 'image',\n pc3: 'image',\n pcf: 'image',\n pcx: 'image',\n pdn: 'image',\n pgm: 'image',\n PI1: 'image',\n PI2: 'image',\n PI3: 'image',\n pict: 'image',\n pct: 'image',\n pnm: 'image',\n pns: 'image',\n ppm: 'image',\n psb: 'image',\n psd: 'image',\n pdd: 'image',\n psp: 'image',\n px: 'image',\n pxm: 'image',\n pxr: 'image',\n qfx: 'image',\n rle: 'image',\n sct: 'image',\n sgi: 'image',\n rgb: 'image',\n int: 'image',\n bw: 'image',\n tga: 'image',\n tiff: 'image',\n tif: 'image',\n vtf: 'image',\n xbm: 'image',\n xcf: 'image',\n xpm: 'image',\n '3dv': 'image',\n amf: 'image',\n ai: 'image',\n awg: 'image',\n cgm: 'image',\n cdr: 'image',\n cmx: 'image',\n dxf: 'image',\n e2d: 'image',\n eps: 'image',\n fs: 'image',\n gbr: 'image',\n odg: 'image',\n svg: 'image',\n stl: 'image',\n vrml: 'image',\n x3d: 'image',\n sxd: 'image',\n v2d: 'image',\n vnd: 'image',\n wmf: 'image',\n emf: 'image',\n png: 'image',\n webp: 'image',\n jxr: 'image',\n hdp: 'image',\n wdp: 'image',\n cur: 'image',\n ecw: 'image',\n liff: 'image',\n nrrd: 'image',\n pam: 'image',\n pgf: 'image',\n rgba: 'image',\n inta: 'image',\n sid: 'image',\n ras: 'image',\n sun: 'image',\n 123: 'calc',\n '12m': 'calc',\n _xls: 'calc',\n _xlsx: 'calc',\n aws: 'calc',\n bks: 'calc',\n cell: 'calc',\n def: 'calc',\n dex: 'calc',\n dfg: 'calc',\n dis: 'calc',\n edx: 'calc',\n edxz: 'calc',\n ess: 'calc',\n fcs: 'calc',\n fm: 'calc',\n fods: 'calc',\n fp: 'calc',\n gnm: 'calc',\n gnumeric: 'calc',\n gsheet: 'calc',\n hcdt: 'calc',\n imp: 'calc',\n mar: 'calc',\n nb: 'calc',\n ncss: 'calc',\n nmbtemplate: 'calc',\n numbers: 'calc',\n 'numbers-tef': 'calc',\n ods: 'calc',\n ogw: 'calc',\n ogwu: 'calc',\n ots: 'calc',\n pmd: 'calc',\n pmdx: 'calc',\n pmv: 'calc',\n pmvx: 'calc',\n qpw: 'calc',\n rdf: 'calc',\n sdc: 'calc',\n stc: 'calc',\n sxc: 'calc',\n tmv: 'calc',\n tmvt: 'calc',\n uos: 'calc',\n wki: 'calc',\n wkq: 'calc',\n wks: 'calc',\n wku: 'calc',\n wq1: 'calc',\n wq2: 'calc',\n xl: 'calc',\n xlr: 'calc',\n xls: 'calc',\n xlsb: 'calc',\n xlshtml: 'calc',\n xlsm: 'calc',\n xlsmhtml: 'calc',\n xlsx: 'calc',\n xlthtml: 'calc',\n xltm: 'calc',\n xltx: 'calc',\n '1st': 'text',\n _doc: 'text',\n _docx: 'text',\n abw: 'text',\n adoc: 'text',\n aim: 'text',\n ans: 'text',\n apkg: 'text',\n apt: 'text',\n asc: 'text',\n ascii: 'text',\n aty: 'text',\n awp: 'text',\n awt: 'text',\n aww: 'text',\n bad: 'text',\n bbs: 'text',\n bdp: 'text',\n bdr: 'text',\n bean: 'text',\n bib: 'text',\n bibtex: 'text',\n bml: 'text',\n bna: 'text',\n boc: 'text',\n brx: 'text',\n btd: 'text',\n bzabw: 'text',\n calca: 'text',\n charset: 'text',\n chart: 'text',\n chord: 'text',\n cnm: 'text',\n cod: 'text',\n crwl: 'text',\n cws: 'text',\n cyi: 'text',\n dca: 'text',\n dfti: 'text',\n dgs: 'text',\n diz: 'text',\n dne: 'text',\n doc: 'text',\n docm: 'text',\n docx: 'text',\n docxml: 'text',\n docz: 'text',\n dox: 'text',\n dropbox: 'text',\n dsc: 'text',\n dvi: 'text',\n dwd: 'text',\n dx: 'text',\n dxb: 'text',\n dxp: 'text',\n eio: 'text',\n eit: 'text',\n eml: 'text',\n emlx: 'text',\n emulecollection: 'text',\n epp: 'text',\n err: 'text',\n etf: 'text',\n etx: 'text',\n euc: 'text',\n 'fadein.template': 'text',\n faq: 'text',\n fbl: 'text',\n fcf: 'text',\n fdf: 'text',\n fdr: 'text',\n fds: 'text',\n fdt: 'text',\n fdx: 'text',\n fdxt: 'text',\n fft: 'text',\n fgs: 'text',\n flr: 'text',\n fodt: 'text',\n fountain: 'text',\n fpt: 'text',\n frt: 'text',\n fwd: 'text',\n fwdn: 'text',\n gmd: 'text',\n gpd: 'text',\n gpn: 'text',\n gsd: 'text',\n gthr: 'text',\n gv: 'text',\n hbk: 'text',\n hht: 'text',\n hs: 'text',\n hwp: 'text',\n hz: 'text',\n idx: 'text',\n iil: 'text',\n ipf: 'text',\n ipspot: 'text',\n jarvis: 'text',\n jis: 'text',\n jnp: 'text',\n joe: 'text',\n jp1: 'text',\n jrtf: 'text',\n jtd: 'text',\n kes: 'text',\n klg: 'text',\n knt: 'text',\n kon: 'text',\n kwd: 'text',\n latex: 'text',\n lbt: 'text',\n lis: 'text',\n lnt: 'text',\n log: 'text',\n lp2: 'text',\n lst: 'text',\n ltr: 'text',\n ltx: 'text',\n lue: 'text',\n luf: 'text',\n lwp: 'text',\n lxfml: 'text',\n lyt: 'text',\n lyx: 'text',\n man: 'text',\n mbox: 'text',\n mcw: 'text',\n 'md5.txt': 'text',\n me: 'text',\n mell: 'text',\n mellel: 'text',\n min: 'text',\n mnt: 'text',\n msg: 'text',\n mw: 'text',\n mwd: 'text',\n mwp: 'text',\n ndoc: 'text',\n nfo: 'text',\n ngloss: 'text',\n njx: 'text',\n note: 'text',\n notes: 'text',\n now: 'text',\n nwctxt: 'text',\n nwm: 'text',\n nwp: 'text',\n ocr: 'text',\n odif: 'text',\n odm: 'text',\n odo: 'text',\n odt: 'text',\n ofl: 'text',\n opeico: 'text',\n openbsd: 'text',\n ort: 'text',\n ott: 'text',\n p7s: 'text',\n pages: 'text',\n 'pages-tef': 'text',\n pdpcmd: 'text',\n pfx: 'text',\n pjt: 'text',\n plain: 'text',\n plantuml: 'text',\n pmo: 'text',\n prt: 'text',\n psw: 'text',\n pu: 'text',\n pvj: 'text',\n pvm: 'text',\n pwd: 'text',\n pwdp: 'text',\n pwdpl: 'text',\n pwi: 'text',\n pwr: 'text',\n qdl: 'text',\n qpf: 'text',\n rad: 'text',\n readme: 'text',\n rft: 'text',\n ris: 'text',\n rpt: 'text',\n rst: 'text',\n rtd: 'text',\n rtf: 'text',\n rtfd: 'text',\n rtx: 'text',\n run: 'text',\n rvf: 'text',\n rzk: 'text',\n rzn: 'text',\n saf: 'text',\n safetext: 'text',\n sam: 'text',\n save: 'text',\n scc: 'text',\n scm: 'text',\n scriv: 'text',\n scrivx: 'text',\n scw: 'text',\n sdm: 'text',\n sdoc: 'text',\n sdw: 'text',\n se: 'text',\n session: 'text',\n sgm: 'text',\n sig: 'text',\n skcard: 'text',\n sla: 'text',\n 'sla.gz': 'text',\n smf: 'text',\n sms: 'text',\n ssa: 'text',\n story: 'text',\n strings: 'text',\n stw: 'text',\n sty: 'text',\n 'sublime-project': 'text',\n 'sublime-workspace': 'text',\n sxg: 'text',\n sxw: 'text',\n tab: 'text',\n tdf: 'text',\n template: 'text',\n tex: 'text',\n text: 'text',\n textclipping: 'text',\n thp: 'text',\n tlb: 'text',\n tm: 'text',\n tmd: 'text',\n tmdx: 'text',\n tmvx: 'text',\n tpc: 'text',\n trelby: 'text',\n tvj: 'text',\n txt: 'text',\n u3i: 'text',\n unauth: 'text',\n unx: 'text',\n uof: 'text',\n uot: 'text',\n upd: 'text',\n utf8: 'text',\n utxt: 'text',\n vct: 'text',\n vnt: 'text',\n vw: 'text',\n wbk: 'text',\n webdoc: 'text',\n wn: 'text',\n wp: 'text',\n wp4: 'text',\n wp5: 'text',\n wp6: 'text',\n wp7: 'text',\n wpa: 'text',\n wpd: 'text',\n wpl: 'text',\n wps: 'text',\n wpt: 'text',\n wpw: 'text',\n wri: 'text',\n wsd: 'text',\n wtt: 'text',\n wtx: 'text',\n xbdoc: 'text',\n xbplate: 'text',\n xdl: 'text',\n xwp: 'text',\n xy: 'text',\n xy3: 'text',\n xyp: 'text',\n xyw: 'text',\n zabw: 'text',\n zrtf: 'text',\n zw: 'text'\n}\nexport default extToType\n","import fileExtension from 'file-extension'\nimport extToType from './extToType'\n\nfunction fileType (filename) {\n const ext = fileExtension(filename)\n return extToType[ext] || ext\n}\nexport default fileType\n","import React, { useCallback, useEffect, useState } from 'react'\nimport PropTypes from 'prop-types'\nimport { connect } from 'redux-bundler-react'\nimport { isBinary } from 'istextorbinary'\nimport { Trans, withTranslation } from 'react-i18next'\nimport typeFromExt from '../type-from-ext'\nimport ComponentLoader from '../../loader/ComponentLoader.js'\nimport './FilePreview.css'\nimport CID from 'cids'\nimport { useDrag } from 'react-dnd'\nimport fromUint8ArrayToString from 'uint8arrays/to-string'\nimport Button from '../../components/button/Button'\n\nconst Drag = ({ name, size, cid, path, children }) => {\n const [, drag] = useDrag({\n item: { name, size, cid, path, type: 'FILE' }\n })\n\n return \n { children }\n
\n}\n\nconst Preview = (props) => {\n const { t, name, cid, size, availableGatewayUrl, publicGateway, read, onDownload } = props\n const [content, setContent] = useState(null)\n const [hasMoreContent, setHasMoreContent] = useState(false)\n const [buffer, setBuffer] = useState(null)\n const type = typeFromExt(name)\n\n const loadContent = useCallback(async () => {\n const readBuffer = buffer || await read()\n if (!buffer) {\n setBuffer(readBuffer)\n }\n\n const { value, done } = await readBuffer.next()\n const previousContent = content || ''\n\n const currentContent = previousContent + fromUint8ArrayToString(value)\n\n setContent(currentContent)\n\n const hasMore = !done && new TextEncoder().encode(currentContent).length < size\n\n setHasMoreContent(hasMore)\n }, [buffer, content, read, size])\n\n useEffect(() => {\n loadContent()\n }, // eslint-disable-next-line react-hooks/exhaustive-deps\n [])\n\n const src = `${availableGatewayUrl}/ipfs/${cid}?filename=${encodeURIComponent(name)}`\n const className = 'mw-100 mt3 bg-snow-muted pa2 br2 border-box'\n\n switch (type) {\n case 'audio':\n return (\n \n
\n )\n\n if (size > 1024 * 1024 * 4) {\n return cantPreview\n }\n\n if (!content) {\n return {t('cantBePreviewed')} 😢
\n\n { availableGatewayUrl === publicGateway\n ?
\n {content}\n \n { hasMoreContent && \n \n \n
}\n \n }\n }\n}\n\nPreview.propTypes = {\n name: PropTypes.string.isRequired,\n hash: PropTypes.instanceOf(CID),\n size: PropTypes.number.isRequired,\n availableGatewayUrl: PropTypes.string.isRequired,\n read: PropTypes.func.isRequired,\n content: PropTypes.object,\n t: PropTypes.func.isRequired,\n tReady: PropTypes.bool.isRequired\n}\n\nexport default connect(\n 'selectAvailableGatewayUrl',\n 'selectPublicGateway',\n withTranslation('files')(Preview)\n)\n","import React from 'react'\nimport classNames from 'classnames'\nimport PropTypes from 'prop-types'\nimport { humanSize } from '../../lib/files'\nimport { withTranslation } from 'react-i18next'\nimport StrokePin from '../../icons/StrokePin'\nimport GlyphSmallCancel from '../../icons/GlyphSmallCancel'\nimport StrokeShare from '../../icons/StrokeShare'\nimport StrokePencil from '../../icons/StrokePencil'\nimport StrokeIpld from '../../icons/StrokeIpld'\nimport StrokeTrash from '../../icons/StrokeTrash'\nimport StrokeDownload from '../../icons/StrokeDownload'\nimport './SelectedActions.css'\n\nconst styles = {\n bar: {\n background: '#F0F6FA',\n borderColor: '#CFE0E2',\n color: '#59595A'\n },\n count: {\n backgroundColor: '#69C4CD',\n color: '#F9FAFB',\n width: '38px',\n height: '38px'\n },\n countNumber: {\n top: '50%',\n left: '50%',\n transform: 'translate(-50%, -50%)'\n },\n size: {\n color: '#A4BFCC'\n }\n}\n\nconst classes = {\n svg: (v) => v ? 'w3 pointer hover-fill-navy-muted' : 'w3',\n action: (v) => v ? 'pointer' : 'disabled o-50'\n}\n\nclass SelectedActions extends React.Component {\n constructor (props) {\n super(props)\n this.containerRef = React.createRef()\n }\n\n static propTypes = {\n count: PropTypes.number.isRequired,\n size: PropTypes.number.isRequired,\n unselect: PropTypes.func.isRequired,\n remove: PropTypes.func.isRequired,\n setPinning: PropTypes.func.isRequired,\n share: PropTypes.func.isRequired,\n download: PropTypes.func.isRequired,\n rename: PropTypes.func.isRequired,\n inspect: PropTypes.func.isRequired,\n downloadProgress: PropTypes.number,\n t: PropTypes.func.isRequired,\n tReady: PropTypes.bool.isRequired,\n isMfs: PropTypes.bool.isRequired,\n animateOnStart: PropTypes.bool\n }\n\n static defaultProps = {\n className: ''\n }\n\n state = {\n force100: false\n }\n\n componentDidUpdate (prev) {\n if (this.props.downloadProgress === 100 && prev.downloadProgress !== 100) {\n this.setState({ force100: true })\n setTimeout(() => {\n this.setState({ force100: false })\n }, 2000)\n }\n }\n\n componentDidMount () {\n this.containerRef.current && this.containerRef.current.focus()\n }\n\n get downloadText () {\n if (this.state.force100) {\n return this.props.t('finished')\n }\n\n if (!this.props.downloadProgress) {\n return this.props.t('app:actions.download')\n }\n\n if (this.props.downloadProgress === 100) {\n return this.props.t('finished')\n }\n\n return this.props.downloadProgress.toFixed(0) + '%'\n }\n\n render () {\n const { t, tReady, animateOnStart, count, size, unselect, remove, share, setPinning, download, downloadProgress, rename, inspect, className, style, isMfs, ...props } = this.props\n\n const isSingle = count === 1\n\n let singleFileTooltip = { title: t('individualFilesOnly') }\n\n if (count === 1) {\n singleFileTooltip = {}\n }\n\n return (\n \n
\n )\n }\n}\n\nexport default withTranslation('files')(SelectedActions)\n","import React from 'react'\n\nconst GlyphPinCloud = props => (\n \n)\n\nexport default GlyphPinCloud\n","import React from 'react'\nimport PropTypes from 'prop-types'\n\nexport default class Tool extends React.Component {\n static propTypes = {\n children: PropTypes.element.isRequired,\n text: PropTypes.string.isRequired\n }\n\n state = {\n show: false,\n overflow: true\n }\n\n onResize = () => {\n if (this.state.overflow !== (this.el.offsetWidth < this.el.scrollWidth)) {\n this.setState((s) => ({ overflow: !s.overflow }))\n }\n }\n\n componentDidMount () {\n window.addEventListener('resize', this.onResize)\n this.onResize()\n }\n\n componentWillUnmount () {\n window.removeEventListener('resize', this.onResize)\n }\n\n onMouseOver = () => {\n this.setState({ show: true })\n }\n\n onMouseLeave = () => {\n this.setState({ show: false })\n }\n\n render () {\n const { children, text, ...props } = this.props\n const { show, overflow } = this.state\n\n return (\n \n
\n \n
\n \n
\n \n {count}\n
\n \n
\n {t('filesSelected', { count })}
\n{t('totalSize', { size: humanSize(size) })}
\n\n \n \n \n \n \n \n
\n \n \n
\n \n
\n )\n }\n}\n","import React from 'react'\n\nconst GlyphFolder = props => (\n \n)\n\nexport default GlyphFolder\n","import React from 'react'\n\nconst GlyphDocGeneric = props => (\n \n)\n\nexport default GlyphDocGeneric\n","import React from 'react'\n\nconst GlyphDocMovie = props => (\n \n)\n\nexport default GlyphDocMovie\n","import React from 'react'\n\nconst GlyphDocCalc = props => (\n \n)\n\nexport default GlyphDocCalc\n","import React from 'react'\n\nconst GlyphDocMusic = props => (\n \n)\n\nexport default GlyphDocMusic\n","import React from 'react'\n\nconst GlyphDocPicture = props => (\n \n)\n\nexport default GlyphDocPicture\n","import React from 'react'\n\nconst GlyphDocText = props => (\n \n)\n\nexport default GlyphDocText\n","import React from 'react'\nimport typeFromExt from '../type-from-ext'\n\nimport Folder from '../../icons/GlyphFolder'\nimport Doc from '../../icons/GlyphDocGeneric'\nimport DocMovie from '../../icons/GlyphDocMovie'\nimport DocCalc from '../../icons/GlyphDocCalc'\nimport DocMusic from '../../icons/GlyphDocMusic'\nimport DocPicture from '../../icons/GlyphDocPicture'\nimport DocText from '../../icons/GlyphDocText'\nimport Cube from '../../icons/StrokeCube'\n\nconst style = { width: 36 }\n\nexport default function FileIcon ({ name, type, cls = '' }) {\n if (type === 'directory') {\n return \n {React.Children.map(children, c => React.cloneElement(c, { ref: (n) => { this.el = n } }))}\n
\n\n \n \n {text}\n
\n \n
\n )\n}\n\nFile.propTypes = {\n name: PropTypes.string.isRequired,\n type: PropTypes.string.isRequired,\n path: PropTypes.string.isRequired,\n size: PropTypes.number,\n cid: PropTypes.instanceOf(CID),\n selected: PropTypes.bool,\n focused: PropTypes.bool,\n onSelect: PropTypes.func,\n onNavigate: PropTypes.func.isRequired,\n onAddFiles: PropTypes.func.isRequired,\n onMove: PropTypes.func.isRequired,\n coloured: PropTypes.bool,\n translucent: PropTypes.bool,\n handleContextMenuClick: PropTypes.func,\n pinned: PropTypes.bool,\n isMfs: PropTypes.bool\n}\n\nFile.defaultProps = {\n coloured: false,\n translucent: false\n}\n\nexport default withTranslation('files')(File)\n","import React from 'react'\nimport { withTranslation } from 'react-i18next'\n// Components\nimport GlyphDots from '../../icons/GlyphDots'\nimport Checkbox from '../../components/checkbox/Checkbox'\nimport FileIcon from '../../files/file-icon/FileIcon'\n// Styles\nimport './LoadingAnimation.css'\n\nconst FakeHeader = ({ t }) => (\n \n
\n \n
\n\n \n\n \n { pinned && !isRemotePin &&
\n \n
}\n { isRemotePin && \n
}\n \n {size}\n
\n \n {t('app:terms.name')}
\n {t('app:terms.size')}
\n \n \n \n
\n)\n\nconst LoadingAnimation = ({ t }) => (\n \n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n)\n\nexport default withTranslation('files')(LoadingAnimation)\n","import React, { useRef, Fragment, useState, useEffect, useMemo, useCallback } from 'react'\nimport { findDOMNode } from 'react-dom'\nimport PropTypes from 'prop-types'\nimport { connect } from 'redux-bundler-react'\nimport { Trans, withTranslation } from 'react-i18next'\nimport classnames from 'classnames'\nimport { join } from 'path'\nimport { sorts } from '../../bundles/files'\nimport { normalizeFiles } from '../../lib/files'\nimport { List, WindowScroller, AutoSizer } from 'react-virtualized'\n// Reac DnD\nimport { NativeTypes } from 'react-dnd-html5-backend'\nimport { useDrop } from 'react-dnd'\n// Components\nimport Checkbox from '../../components/checkbox/Checkbox'\nimport SelectedActions from '../selected-actions/SelectedActions'\nimport File from '../file/File'\nimport LoadingAnimation from '../../components/loading-animation/LoadingAnimation'\n\nconst addFiles = async (filesPromise, onAddFiles) => {\n const files = await filesPromise\n onAddFiles(normalizeFiles(files))\n}\n\nconst mergeRemotePinsIntoFiles = (files, remotePins) => {\n const remotePinsCids = remotePins.map(c => c.cid.string)\n\n return files.map(f => remotePinsCids.includes(f.cid?.string) ? ({\n ...f,\n isRemotePin: true\n }) : f)\n}\n\nexport const FilesList = ({\n className, files, pins, remotePins, filesSorting, updateSorting, downloadProgress, filesIsFetching, filesPathInfo, showLoadingAnimation,\n onShare, onSetPinning, onInspect, onDownload, onRemove, onRename, onNavigate, onRemotePinClick, onAddFiles, onMove, handleContextMenuClick, t\n}) => {\n const [selected, setSelected] = useState([])\n const [focused, setFocused] = useState(null)\n const [firstVisibleRow, setFirstVisibleRow] = useState(null)\n const [allFiles, setAllFiles] = useState(mergeRemotePinsIntoFiles(files, remotePins))\n const listRef = useRef()\n const filesRefs = useRef([])\n\n const [{ canDrop, isOver, isDragging }, drop] = useDrop({\n accept: NativeTypes.FILE,\n drop: (_, monitor) => {\n if (monitor.didDrop()) {\n return\n }\n const { filesPromise } = monitor.getItem()\n\n addFiles(filesPromise, onAddFiles)\n },\n collect: (monitor) => ({\n isOver: monitor.isOver({ shallow: true }),\n isDragging: monitor.isDragging\n }),\n canDrop: _ => filesPathInfo.isMfs\n })\n\n const selectedFiles = useMemo(() =>\n selected\n .map(name => allFiles.find(el => el.name === name))\n .filter(n => n)\n .map(file => ({\n ...file,\n pinned: pins.map(p => p.toString()).includes(file.cid.toString())\n }))\n , [allFiles, pins, selected])\n\n const keyHandler = (e) => {\n const focusedFile = files.find(el => el.name === focused)\n\n // Disable keyboard controls if fetching files\n if (filesIsFetching) {\n return\n }\n\n if (e.key === 'Escape') {\n setSelected([])\n setFocused(null)\n return listRef.current.forceUpdateGrid()\n }\n\n if (e.key === 'F2' && focused !== null) {\n return onRename([focusedFile])\n }\n\n if (e.key === 'Delete' && selected.length > 0) {\n return onRemove(selectedFiles)\n }\n\n if (e.key === ' ' && focused !== null) {\n e.preventDefault()\n return toggleOne(focused, true)\n }\n\n if ((e.key === 'Enter' || (e.key === 'ArrowRight' && e.metaKey)) && focused !== null) {\n return onNavigate({ path: focusedFile.path, cid: focusedFile.cid })\n }\n\n if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {\n e.preventDefault()\n let index = 0\n\n if (focused !== null) {\n const prev = files.findIndex(el => el.name === focused)\n index = (e.key === 'ArrowDown') ? prev + 1 : prev - 1\n }\n\n if (index === -1) {\n return\n }\n\n if (index < files.length) {\n let name = files[index].name\n\n // If the file we are going to focus is out of view (removed\n // from the DOM by react-virtualized), focus the first visible file\n if (!filesRefs.current[name]) {\n name = files[firstVisibleRow].name\n }\n\n setFocused(name)\n const domNode = findDOMNode(filesRefs.current[name])\n domNode.scrollIntoView({ behaviour: 'smooth', block: 'center' })\n domNode.querySelector('input[type=\"checkbox\"]').focus()\n }\n\n listRef.current.forceUpdateGrid()\n }\n }\n\n useEffect(() => {\n document.addEventListener('keyup', keyHandler)\n return () => document.removeEventListener('keyup', keyHandler)\n }, /* eslint-disable-next-line react-hooks/exhaustive-deps */\n [])\n\n useEffect(() => {\n setAllFiles(mergeRemotePinsIntoFiles(files, remotePins))\n }, [files, remotePins, filesSorting])\n\n useEffect(() => {\n const selectedFiles = selected.filter(name => files.find(el => el.name === name))\n\n if (selectedFiles.length !== selected.length) {\n setSelected(selected)\n }\n }, [files, selected])\n\n const toggleAll = (checked) => {\n let selected = []\n\n if (checked) {\n selected = files.map(file => file.name)\n }\n\n setSelected(selected)\n listRef.current.forceUpdateGrid()\n }\n\n const toggleOne = useCallback((name, check) => {\n const index = selected.indexOf(name)\n\n if (check && index < 0) {\n setSelected([...selected, name].sort())\n } else if (index >= 0) {\n setSelected(selected.filter(selected => selected !== name).sort())\n }\n\n listRef.current.forceUpdateGrid()\n }, [selected])\n\n const move = (src, dst) => {\n if (selectedFiles.length > 0) {\n const parts = dst.split('/')\n parts.pop()\n let basepath = parts.join('/')\n\n if (basepath === '') {\n basepath = '/'\n }\n\n const toMove = selectedFiles.map(({ name, path }) => ([\n path,\n join(basepath, name)\n ]))\n\n const res = toMove.find(a => a[0] === src)\n if (!res) {\n toMove.push([src, dst])\n }\n\n toggleAll(false)\n toMove.forEach(op => onMove(...op))\n } else {\n onMove(src, dst)\n }\n }\n\n const sortByIcon = (order) => {\n if (filesSorting.by === order) {\n return filesSorting.asc ? '↑' : '↓'\n }\n\n return null\n }\n\n const changeSort = (order) => () => {\n if (order === filesSorting.by) {\n updateSorting(order, !filesSorting.asc)\n } else {\n updateSorting(order, true)\n }\n\n listRef.current.forceUpdateGrid()\n }\n\n const emptyRowsRenderer = () => (\n \n
\n \n There are no available files. Add some!\n
\n { filesRefs.current[allFiles[index].name] = r }}>\n
\n )\n }\n\n const onRowsRendered = ({ startIndex }) => setFirstVisibleRow(startIndex)\n\n const allSelected = selected.length !== 0 && selected.length === allFiles.length\n const rowCount = allFiles.length\n const checkBoxCls = classnames({\n 'o-1': allSelected,\n 'o-70': !allSelected\n }, ['pl2 w2 glow'])\n\n return (\n \n \n
\n \n \n
\n \n \n {t('app:terms.pinStatus')}\n \n
\n \n \n
\n \n \n \n {({ width }) => (\n \n )}\n \n
\n )}\n {t('shareModal.description')}
\n\n\n
\n \n \n { pinningServices.map(({ icon, name, online }, index) => (\n \n ))}\n
\n {/* \n
{t('pinningModal.totalSize', { size: humanSize(size) })}
\n\n
\n {modalDescription}
\n { isLocallyPinned && (\n \n
\n )}\n { isRemotelyPinned && (\n \n
\n )}\n \n
\n )\n }\n\n return (\n {t('addByPathModal.description') + ' ' + t('addByPathModal.examples')}
\n/ipfs/QmZTR5bcpQD7cFgTorqxZDYaew1Wqgfbd2ud9QqGPAkK2V\n QmPZ9gcCEpqKTo6aq61g2nXGUhM4iCL3ewB6LDXZCtioEB\n \n \n \n\n \n \n\n \n \n\n \n \n\n \n \n\n \n \n \n\n \n \n
\n )\n }\n}\n\nModals.propTypes = {\n t: PropTypes.func.isRequired,\n show: PropTypes.string,\n files: PropTypes.array,\n onAddByPath: PropTypes.func.isRequired,\n onMove: PropTypes.func.isRequired,\n onMakeDir: PropTypes.func.isRequired,\n onShareLink: PropTypes.func.isRequired,\n onRemove: PropTypes.func.isRequired\n}\n\nexport default withTranslation('files')(Modals)\n","import React, { useEffect, useState, useRef, useMemo } from 'react'\nimport classNames from 'classnames'\nimport PropTypes from 'prop-types'\nimport { basename, join } from 'path'\nimport { connect } from 'redux-bundler-react'\nimport { withTranslation } from 'react-i18next'\nimport { useDrop } from 'react-dnd'\nimport { NativeTypes } from 'react-dnd-html5-backend'\n\nimport { normalizeFiles } from '../../lib/files'\n\nimport './Breadcrumbs.css'\n\nconst DropableBreadcrumb = ({ index, link, immutable, onAddFiles, onMove, onClick, onContextMenuHandle, getPathInfo, checkIfPinned }) => {\n const [{ isOver }, drop] = useDrop({\n accept: [NativeTypes.FILE, 'FILE'],\n drop: async ({ files, filesPromise, path: filePath }) => {\n if (files) {\n (async () => {\n const files = await filesPromise\n onAddFiles(await normalizeFiles(files), link.path)\n })()\n } else {\n const src = filePath\n const dst = join(link.path, basename(filePath))\n\n try { await onMove(src, dst) } catch (e) { console.error(e) }\n }\n },\n collect: (monitor) => ({\n isOver: monitor.isOver()\n })\n })\n\n const buttonRef = useRef()\n\n const handleOnContextMenuHandle = async (ev) => {\n ev.preventDefault()\n\n const { path } = link\n const sanitizedPath = path.substring(path.indexOf('/', 1), path.length)\n const { cid, type } = await getPathInfo(sanitizedPath)\n const pinned = await checkIfPinned(cid)\n\n onContextMenuHandle(undefined, buttonRef.current, {\n ...link,\n type,\n cid,\n pinned\n })\n }\n\n return (\n \n \n \n )\n}\n\nconst Breadcrumbs = ({ t, tReady, path, onClick, className, onContextMenuHandle, onAddFiles, onMove, doGetPathInfo, doCheckIfPinned, ...props }) => {\n const [overflows, setOverflows] = useState(false)\n const [isImmutable, setImmutable] = useState(false)\n const anchors = useRef()\n\n useEffect(() => {\n const a = anchors.current\n\n const newOverflows = a ? (a.offsetHeight < a.scrollHeight || a.offsetWidth < a.scrollWidth) : false\n if (newOverflows !== overflows) {\n setOverflows(newOverflows)\n }\n }, [overflows])\n\n const bread = useMemo(() =>\n makeBread(path, t, isImmutable, setImmutable)\n , [isImmutable, path, t])\n\n return (\n \n )\n}\n\nBreadcrumbs.propTypes = {\n path: PropTypes.string.isRequired,\n onClick: PropTypes.func.isRequired,\n t: PropTypes.func.isRequired,\n onContextMenuHandle: PropTypes.func\n}\n\nfunction makeBread (root, t, isImmutable, setImmutable) {\n if (root.endsWith('/')) {\n root = root.substring(0, root.length - 1)\n }\n\n const parts = root.split('/').map(part => ({\n name: part,\n path: part\n }))\n\n for (let i = 1; i < parts.length; i++) {\n const name = parts[i].name\n\n parts[i] = {\n name: name,\n path: parts[i - 1].path + '/' + parts[i].path\n }\n\n if (name.length >= 30) {\n parts[i].realName = name\n parts[i].name = `${name.substring(0, 4)}...${name.substring(name.length - 4, name.length)}`\n }\n }\n\n parts.shift()\n\n if (parts[0].name === 'ipfs' || parts[0].name === 'ipns') {\n !isImmutable && setImmutable(true)\n }\n\n parts[0].name = t(parts[0].name)\n\n parts[parts.length - 1].last = true\n return parts\n}\n\nexport default connect(\n 'doGetPathInfo',\n 'doCheckIfPinned',\n withTranslation('files')(Breadcrumbs)\n)\n","import React from 'react'\n\nconst StrokeDocument = props => (\n \n)\n\nexport default StrokeDocument\n","import React from 'react'\n\nconst StrokeNewFolder = props => (\n \n)\n\nexport default StrokeNewFolder\n","import React from 'react'\nimport { connect } from 'redux-bundler-react'\nimport PropTypes from 'prop-types'\nimport { withTranslation } from 'react-i18next'\nimport { normalizeFiles } from '../../lib/files'\n// Icons\nimport DocumentIcon from '../../icons/StrokeDocument'\nimport FolderIcon from '../../icons/StrokeFolder'\nimport NewFolderIcon from '../../icons/StrokeNewFolder'\nimport DecentralizationIcon from '../../icons/StrokeDecentralization'\n// Components\nimport { Dropdown, DropdownMenu, Option } from '../dropdown/Dropdown'\nimport Button from '../../components/button/Button'\nimport { cliCmdKeys } from '../../bundles/files/consts'\n\nconst AddButton = withTranslation('app')(\n ({ t, onClick }) => (\n \n )\n)\n\nclass FileInput extends React.Component {\n state = {\n dropdown: false\n }\n\n toggleDropdown = () => {\n this.setState(s => ({ dropdown: !s.dropdown }))\n }\n\n onAddFolder = () => {\n this.toggleDropdown()\n return this.folderInput.click()\n }\n\n onAddFile = async () => {\n this.toggleDropdown()\n return this.filesInput.click()\n }\n\n onInputChange = (input) => async () => {\n this.props.onAddFiles(normalizeFiles(input.files))\n input.value = null\n }\n\n onAddByPath = () => {\n this.props.onAddByPath()\n this.toggleDropdown()\n }\n\n onNewFolder = () => {\n this.props.onNewFolder()\n this.toggleDropdown()\n }\n\n onCliTutorMode = async (cliOptions) => {\n await this.props.doSetCliOptions(cliOptions)\n this.props.onCliTutorMode()\n this.toggleDropdown()\n }\n\n render () {\n const { t, isCliTutorModeEnabled } = this.props\n\n return (\n \n \n \n \n \n \n \n \n \n\n { this.filesInput = el }}\n onChange={this.onInputChange(this.filesInput)} />\n\n { this.folderInput = el }}\n onChange={this.onInputChange(this.folderInput)} />\n
\n )\n }\n}\n\nFileInput.propTypes = {\n t: PropTypes.func.isRequired,\n onAddFiles: PropTypes.func.isRequired,\n onAddByPath: PropTypes.func.isRequired,\n onNewFolder: PropTypes.func.isRequired\n}\n\nexport default connect(\n 'selectIsCliTutorModeEnabled',\n 'doOpenCliTutorModal',\n 'doSetCliOptions',\n withTranslation('files')(FileInput)\n)\n","import React from 'react'\nimport classNames from 'classnames'\nimport { connect } from 'redux-bundler-react'\nimport { withTranslation } from 'react-i18next'\nimport { humanSize } from '../../lib/files'\n// Components\nimport Breadcrumbs from '../breadcrumbs/Breadcrumbs'\nimport FileInput from '../file-input/FileInput'\nimport Button from '../../components/button/Button'\n// Icons\nimport GlyphDots from '../../icons/GlyphDots'\n\nconst BarOption = ({ children, text, isLink = false, className = '', ...etc }) => (\n \n {children}\n {text}\n
\n)\n\n// Tweak human-readable size format to be more compact\nconst size = (s) => humanSize(s, {\n round: s >= 1073741824 ? 1 : 0, // show decimal > 1GiB\n spacer: ''\n})\n\nclass Header extends React.Component {\n handleContextMenu = (ev) => {\n const pos = this.dotsWrapper.getBoundingClientRect()\n this.props.handleContextMenu(ev, 'TOP', {\n ...this.props.files,\n // TODO: change to \"pinning\" and not \"pinned\"\n pinned: this.props.pins.includes(this.props.files.cid.toString())\n }, pos)\n }\n\n handleBreadCrumbsContextMenu = (ev, breadcrumbsRef, file) => {\n const pos = breadcrumbsRef.getBoundingClientRect()\n this.props.handleContextMenu(ev, 'TOP', file, pos)\n }\n\n render () {\n const {\n currentDirectorySize,\n hasUpperDirectory,\n files,\n filesPathInfo,\n filesSize,\n onNavigate,\n repoSize,\n t\n } = this.props\n\n return (\n \n
\n )\n }\n}\n\nexport default connect(\n 'selectPins',\n 'selectHasUpperDirectory',\n 'selectFilesSize',\n 'selectRepoSize',\n 'selectRepoNumObjects',\n 'selectFilesPathInfo',\n 'selectCurrentDirectorySize',\n withTranslation('files')(Header)\n)\n","import React from 'react'\n\nconst GlyphSmallArrows = props => (\n \n\n)\n\nexport default GlyphSmallArrows\n","import React from 'react'\n\nconst GlyphCancel = props => (\n \n)\n\nexport default GlyphCancel\n","import React from 'react'\nimport PropTypes from 'prop-types'\n\nconst ProgressBar = ({ bg, br, className, style, width, height, progress, ...props }) => {\n return (\n \n this.handleBreadCrumbsContextMenu(...args)}\n onAddFiles={this.props.onAddFiles} onMove={this.props.onMove}/>\n
\n\n \n \n { hasUpperDirectory\n ? (\n \n { size(currentDirectorySize) }/{ size(filesSize) }\n \n )\n : size(filesSize) }\n \n\n \n { size(repoSize) }\n \n\n
\n \n
\n \n { (files && files.type === 'directory' && filesPathInfo.isMfs)\n ?
\n { this.dotsWrapper = el }}>\n \n
\n }\n \n \n
\n )\n}\n\nProgressBar.propTypes = {\n className: PropTypes.string,\n bg: PropTypes.string,\n width: PropTypes.string,\n height: PropTypes.string,\n br: PropTypes.string,\n progress: PropTypes.number.isRequired\n}\n\nProgressBar.defaultProps = {\n className: '',\n width: 'w-100',\n height: 'h1',\n bg: 'bg-aqua',\n br: 'br-pill'\n}\n\nexport default ProgressBar\n","import React, { useMemo, useState, useCallback } from 'react'\nimport { humanSize } from '../../lib/files'\nimport PropTypes from 'prop-types'\nimport { connect } from 'redux-bundler-react'\nimport { withTranslation } from 'react-i18next'\n// Icons\nimport DocumentIcon from '../../icons/GlyphDocGeneric'\nimport FolderIcon from '../../icons/GlyphFolder'\nimport './FileImportStatus.css'\nimport GlyphSmallArrows from '../../icons/GlyphSmallArrow'\nimport GlyphTick from '../../icons/GlyphTick'\nimport GlyphCancel from '../../icons/GlyphCancel'\nimport GlyphSmallCancel from '../../icons/GlyphSmallCancel'\nimport ProgressBar from '../../components/progress-bar/ProgressBar'\n\nconst Import = (job, t) =>\n [...groupByPath(job?.message?.entries || new Map()).values()].map(item => (\n \n
\n )\n}\n\nFileImportStatus.propTypes = {\n filesFinished: PropTypes.array,\n filesPending: PropTypes.array,\n filesErrors: PropTypes.array,\n doFilesClear: PropTypes.func,\n initialExpanded: PropTypes.bool\n}\n\nFileImportStatus.defaultProps = {\n filesFinished: [],\n filesPending: [],\n filesErrors: [],\n initialExpanded: true\n}\n\nexport default connect(\n 'selectFilesFinished',\n 'selectFilesPending',\n 'selectFilesErrors',\n 'doFilesClear',\n withTranslation('files')(FileImportStatus)\n)\n","import React, { useEffect, useRef, useState } from 'react'\nimport { findDOMNode } from 'react-dom'\nimport { Helmet } from 'react-helmet'\nimport { connect } from 'redux-bundler-react'\nimport { withTranslation, Trans } from 'react-i18next'\nimport ReactJoyride from 'react-joyride'\n// Lib\nimport { filesTour } from '../lib/tours'\nimport downloadFile from './download-file'\n// Components\nimport ContextMenu from './context-menu/ContextMenu'\nimport withTour from '../components/tour/withTour'\nimport InfoBoxes from './info-boxes/InfoBoxes'\nimport FilePreview from './file-preview/FilePreview'\nimport FilesList from './files-list/FilesList'\nimport { getJoyrideLocales } from '../helpers/i8n'\n\n// Icons\nimport Modals, { DELETE, NEW_FOLDER, SHARE, RENAME, ADD_BY_PATH, CLI_TUTOR_MODE, PINNING } from './modals/Modals'\nimport Header from './header/Header'\nimport FileImportStatus from './file-import-status/FileImportStatus'\n\nconst FilesPage = ({\n doFetchPinningServices, doFilesFetch, doPinsFetch, doFilesSizeGet, doFilesDownloadLink, doFilesWrite, doFilesAddPath, doUpdateHash,\n doFilesUpdateSorting, doFilesNavigateTo, doFilesMove, doSetCliOptions, doFetchRemotePins, remotePins, doExploreUserProvidedPath,\n ipfsProvider, ipfsConnected, doFilesMakeDir, doFilesShareLink, doFilesDelete, doSetPinning, onRemotePinClick,\n files, filesPathInfo, pinningServices, toursEnabled, handleJoyrideCallback, isCliTutorModeEnabled, cliOptions, t\n}) => {\n const contextMenuRef = useRef()\n const [downloadAbort, setDownloadAbort] = useState(null)\n const [downloadProgress, setDownloadProgress] = useState(null)\n const [modals, setModals] = useState({ show: null, files: null })\n const [contextMenu, setContextMenu] = useState({\n isOpen: false,\n translateX: 0,\n translateY: 0,\n file: null\n })\n\n useEffect(() => {\n doFetchPinningServices()\n doFilesFetch()\n doPinsFetch()\n doFilesSizeGet()\n }, [doFetchPinningServices, doFilesFetch, doPinsFetch, doFilesSizeGet])\n\n useEffect(() => {\n if (ipfsConnected || filesPathInfo.path) {\n doFilesFetch()\n }\n }, [ipfsConnected, filesPathInfo, doFilesFetch])\n\n useEffect(() => {\n if (pinningServices.some(service => service.online)) {\n files && files.content && doFetchRemotePins(files.content)\n }\n }, [files, pinningServices, doFetchRemotePins])\n\n const onDownload = async (files) => {\n if (downloadProgress !== null) {\n return downloadAbort()\n }\n\n const updater = (v) => setDownloadProgress(v)\n const { url, filename, method } = await doFilesDownloadLink(files)\n const { abort } = await downloadFile(url, filename, updater, method)\n setDownloadAbort(() => abort)\n }\n const onAddFiles = (raw, root = '') => {\n if (root === '') root = files.path\n\n doFilesWrite(raw, root)\n }\n\n const onAddByPath = (path) => doFilesAddPath(files.path, path)\n const onInspect = (cid) => doUpdateHash(`/explore/ipfs/${cid}`)\n const showModal = (modal, files = null) => setModals({ show: modal, files: files })\n const hideModal = () => setModals({})\n const handleContextMenu = (ev, clickType, file, pos) => {\n // This is needed to disable the native OS right-click menu\n // and deal with the clicking on the ContextMenu options\n if (ev !== undefined && typeof ev !== 'string') {\n ev.preventDefault()\n ev.persist()\n }\n\n const ctxMenu = findDOMNode(contextMenuRef.current)\n const ctxMenuPosition = ctxMenu.getBoundingClientRect()\n\n let translateX = 0\n let translateY = 0\n\n switch (clickType) {\n case 'RIGHT': {\n const rightPadding = window.innerWidth - ctxMenu.parentNode.getBoundingClientRect().right\n translateX = (window.innerWidth - ev.clientX) - rightPadding - 20\n translateY = (ctxMenuPosition.y + ctxMenuPosition.height / 2) - ev.clientY - 10\n break\n }\n case 'TOP': {\n const pagePositions = ctxMenu.parentNode.getBoundingClientRect()\n translateX = pagePositions.right - pos.right\n translateY = -(pos.bottom - pagePositions.top + 11)\n break\n }\n default: {\n translateX = 1\n translateY = (ctxMenuPosition.y + ctxMenuPosition.height / 2) - (pos && pos.y) - 30\n }\n }\n\n setContextMenu({\n isOpen: !contextMenu.isOpen,\n translateX,\n translateY,\n file\n })\n }\n\n const MainView = ({ t, files, remotePins, doExploreUserProvidedPath }) => {\n if (!files) return ()\n\n if (files.type === 'unknown') {\n const path = files.path.startsWith('/pins')\n ? files.path.slice(6)\n : files.path\n\n return (\n \n
\n \n \n { filesPending.length\n ? `${t('filesImportStatus.importing', { count: numberOfPendingItems })} (${progress}%)`\n : t('filesImportStatus.imported', { count: numberOfImportedItems })\n }\n \n
\n \n \n \n
\n - \n { filesPending.map(file => Import(file, t)) }\n { sortedFilesFinished.map(file => Import(file, t)) }\n { filesErrors.map(file => Import(file, t)) }\n
\n \n The current link isn't a file, nor a directory. Try to it instead.\n \n
\n )\n }\n\n if (files.type === 'file') {\n return (\n \n \n {getTitle(filesPathInfo, t)} \n \n\n showModal(SHARE, [contextMenu.file])}\n onRemove={() => showModal(DELETE, [contextMenu.file])}\n onRename={() => showModal(RENAME, [contextMenu.file])}\n onInspect={() => onInspect(contextMenu.file.cid)}\n onDownload={() => onDownload([contextMenu.file])}\n onPinning={() => showModal(PINNING, [contextMenu.file])}\n isCliTutorModeEnabled={isCliTutorModeEnabled}\n onCliTutorMode={() => showModal(CLI_TUTOR_MODE, [contextMenu.file])}\n doSetCliOptions={doSetCliOptions}\n />\n\n showModal(ADD_BY_PATH, files)}\n onNewFolder={(files) => showModal(NEW_FOLDER, files)}\n onCliTutorMode={() => showModal(CLI_TUTOR_MODE)}\n handleContextMenu={(...args) => handleContextMenu(...args, true)} />\n\n \n\n
\n )\n}\n\nexport default connect(\n 'selectIpfsProvider',\n 'selectIpfsConnected',\n 'selectFiles',\n 'selectRemotePins',\n 'selectFilesPathInfo',\n 'doUpdateHash',\n 'doPinsFetch',\n 'doFetchPinningServices',\n 'selectPinningServices',\n 'doFetchRemotePins',\n 'doFilesFetch',\n 'doFilesMove',\n 'doFilesMakeDir',\n 'doFilesShareLink',\n 'doFilesDelete',\n 'doFilesAddPath',\n 'doFilesNavigateTo',\n 'doFilesUpdateSorting',\n 'selectFilesSorting',\n 'selectToursEnabled',\n 'doFilesWrite',\n 'doFilesDownloadLink',\n 'doExploreUserProvidedPath',\n 'doFilesSizeGet',\n 'selectIsCliTutorModeEnabled',\n 'selectIsCliTutorModalOpen',\n 'doOpenCliTutorModal',\n 'doSetCliOptions',\n 'selectCliOptions',\n 'doSetPinning',\n withTour(withTranslation('files')(FilesPage))\n)\n","import React from 'react'\nimport PropTypes from 'prop-types'\nimport CancelIcon from '../../icons/GlyphSmallCancel'\n\nexport const ModalActions = ({ justify, className, children, ...props }) => (\n \n { children }\n
\n)\n\nModalActions.propTypes = {\n justify: PropTypes.string,\n className: PropTypes.string\n}\n\nModalActions.defaultProps = {\n justify: 'between',\n className: ''\n}\n\nexport const ModalBody = ({ className, Icon, title, children, ...props }) => (\n \n { Icon && (\n
\n)\n\nModalBody.propTypes = {\n Icon: PropTypes.func,\n title: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.node\n ])\n}\n\nModalBody.defaultProps = {\n className: ''\n}\n\nexport const Modal = ({ onCancel, children, className, ...props }) => {\n return (\n \n {
\n )}\n\n {title}
\n\n {children}\n\n { onCancel &&\n
\n )\n}\n\nModal.propTypes = {\n onCancel: PropTypes.func\n}\n\nModal.defaultProps = {\n onCancel: null,\n className: ''\n}\n\nexport default Modal\n","import React from 'react'\nimport { connect } from 'redux-bundler-react'\nimport { STATUS } from 'react-joyride'\n\nconst withTour = WrappedComponent => {\n class WithTour extends React.Component {\n handleJoyrideCallback = (data) => {\n const { doDisableTours } = this.props\n const { action, status } = data\n\n if (action === 'close' || [STATUS.FINISHED].includes(status)) {\n doDisableTours()\n }\n }\n\n render () {\n return \n
\n )\n}\n\nexport default Shell\n","import React from 'react'\nimport PropTypes from 'prop-types'\nimport { Modal } from 'react-overlays'\n\nfunction Overlay ({ children, show, onLeave, className, hidden, ...props }) {\n const handleKeyDown = (e) => {\n if (e.key !== 'Escape') return\n\n e.stopPropagation()\n e.nativeEvent.stopImmediatePropagation()\n\n onLeave()\n }\n\n const renderBackdrop = (props) => (\n \n )\n\n return (\n { title }
\n \n {children}\n
\n