filip mertens
2 years ago
parent
1509c87519
commit
a863e37dd6
@ -0,0 +1,57 @@ |
||||
'use strict' |
||||
|
||||
import { default as deepequal } from 'deep-equal' // eslint-disable-line
|
||||
|
||||
import { Plugin } from '@remixproject/engine' |
||||
import { fileState } from '@remix-ui/file-states' |
||||
|
||||
const profile = { |
||||
name: 'fileStates', |
||||
desciption: 'Keeps state of the files', |
||||
methods: ['setFileState'], |
||||
events: ['fileStateChanged'], |
||||
version: '0.0.1' |
||||
} |
||||
|
||||
export class FileStates extends Plugin { |
||||
private _fileStates: fileState[] = [] |
||||
constructor() { |
||||
super(profile) |
||||
} |
||||
/** |
||||
*
|
||||
* @param fileStates Array of file states |
||||
*/ |
||||
async setFileState(fileStates: fileState[] | fileState) { |
||||
const workspace = await this.call('filePanel', 'getCurrentWorkspace') |
||||
function sortByPath( a, b ) { |
||||
if ( a.path < b.path ){ |
||||
return -1; |
||||
} |
||||
if ( a.path > b.path ){ |
||||
return 1; |
||||
} |
||||
return 0; |
||||
} |
||||
|
||||
const fileStatesPayload = Array.isArray(fileStates) ? fileStates : [fileStates] |
||||
// clear all file states in the previous state of this owner on the files called
|
||||
fileStatesPayload.forEach((state) => { |
||||
state.workspace = workspace |
||||
}) |
||||
const filteredState = this._fileStates.filter((state) => { |
||||
const index = fileStatesPayload.findIndex((payloadFileState: fileState) => { |
||||
return payloadFileState.owner == state.owner && payloadFileState.path == state.path |
||||
}) |
||||
return index == -1 |
||||
}) |
||||
const newState = [...filteredState, ...fileStatesPayload].sort(sortByPath) |
||||
|
||||
if (!deepequal(newState, this._fileStates)) { |
||||
this._fileStates = newState |
||||
|
||||
console.log('fileStates', this._fileStates) |
||||
this.emit('fileStateChanged', this._fileStates) |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,4 @@ |
||||
{ |
||||
"presets": ["@nrwl/react/babel"], |
||||
"plugins": [] |
||||
} |
||||
@ -0,0 +1,19 @@ |
||||
{ |
||||
"env": { |
||||
"browser": true, |
||||
"es6": true |
||||
}, |
||||
"extends": "../../../.eslintrc.json", |
||||
"globals": { |
||||
"Atomics": "readonly", |
||||
"SharedArrayBuffer": "readonly" |
||||
}, |
||||
"parserOptions": { |
||||
"ecmaVersion": 11, |
||||
"sourceType": "module" |
||||
}, |
||||
"rules": { |
||||
"no-unused-vars": "off", |
||||
"@typescript-eslint/no-unused-vars": "error" |
||||
} |
||||
} |
||||
@ -0,0 +1,3 @@ |
||||
export { fileState, fileStateType } from './lib/types/index' |
||||
export { FileStateIcons } from './lib/components/file-state-icon' |
||||
|
||||
@ -0,0 +1,48 @@ |
||||
// eslint-disable-next-line no-use-before-define
|
||||
import React, { useEffect, useState } from 'react' |
||||
|
||||
import { fileState, fileStateType, FileType } from '../types' |
||||
import FileStateCustomIcon from './filestates/file-state-custom-icon' |
||||
import FileStateErrorIcon from './filestates/file-state-error-icon' |
||||
import FileStateWarningIcon from './filestates/file-state-warning-icon' |
||||
|
||||
export type fileStateProps = { |
||||
file: FileType, |
||||
fileState: fileState[] |
||||
} |
||||
|
||||
export const FileStateIcons = (props: fileStateProps) => { |
||||
const [states, setStates] = useState<fileState[]>([]) |
||||
useEffect(() => { |
||||
//console.log(props.file)
|
||||
//console.log(props.fileState)
|
||||
setStates(props.fileState.filter((st) => st.path === props.file.path)) |
||||
}, [props.fileState]) |
||||
|
||||
const getTags = function () { |
||||
if (states && states.length) { |
||||
const elements: JSX.Element[] = [] |
||||
|
||||
for (const [index, state] of states.entries()) { |
||||
switch (state.fileStateType) { |
||||
case fileStateType.Error: |
||||
elements.push(<FileStateErrorIcon fileState={state} key={index} />) |
||||
break |
||||
case fileStateType.Warning: |
||||
elements.push(<FileStateWarningIcon fileState={state} key={index}/>) |
||||
break |
||||
case fileStateType.Custom: |
||||
elements.push(<FileStateCustomIcon fileState={state} key={index} />) |
||||
break |
||||
} |
||||
} |
||||
return elements |
||||
} |
||||
} |
||||
|
||||
return <> |
||||
{getTags()} |
||||
</> |
||||
} |
||||
|
||||
export default FileStateIcons |
||||
@ -0,0 +1,37 @@ |
||||
export enum fileStateType { |
||||
Error = 'ERROR', |
||||
Warning = 'WARNING', |
||||
Success = 'SUCCESS', |
||||
Loading = 'LOADING', |
||||
Unsaved = 'UNSAVED', |
||||
Untracked = 'UNTRACKED', |
||||
Modified = 'MODIFIED', |
||||
Staged = 'STAGED', |
||||
Committed = 'COMMITTED', |
||||
Deleted = 'DELETED', |
||||
Added = 'ADDED', |
||||
New = 'NEW', |
||||
Compiled = 'COMPILED', |
||||
Custom = 'CUSTOM', |
||||
} |
||||
|
||||
export type fileState = { |
||||
path: string, |
||||
isDirectory: boolean, |
||||
fileStateType: fileStateType, |
||||
fileStateLabelClass: string, |
||||
fileStateIconClass: string, |
||||
fileStateIcon: string | HTMLDivElement | JSX.Element, |
||||
bubble: boolean, |
||||
comment: string, |
||||
owner: string, |
||||
workspace?: string |
||||
} |
||||
|
||||
export interface FileType { |
||||
path: string, |
||||
name: string, |
||||
isDirectory: boolean, |
||||
type: 'folder' | 'file' | 'gist', |
||||
child?: File[] |
||||
} |
||||
@ -0,0 +1,16 @@ |
||||
{ |
||||
"extends": "../../../tsconfig.base.json", |
||||
"compilerOptions": { |
||||
"jsx": "react", |
||||
"allowJs": true, |
||||
"esModuleInterop": true, |
||||
"allowSyntheticDefaultImports": true |
||||
}, |
||||
"files": [], |
||||
"include": [], |
||||
"references": [ |
||||
{ |
||||
"path": "./tsconfig.lib.json" |
||||
} |
||||
] |
||||
} |
||||
@ -0,0 +1,13 @@ |
||||
{ |
||||
"extends": "./tsconfig.json", |
||||
"compilerOptions": { |
||||
"outDir": "../../../dist/out-tsc", |
||||
"types": ["node"] |
||||
}, |
||||
"files": [ |
||||
"../../../node_modules/@nrwl/react/typings/cssmodule.d.ts", |
||||
"../../../node_modules/@nrwl/react/typings/image.d.ts" |
||||
], |
||||
"exclude": ["**/*.spec.ts", "**/*.spec.tsx"], |
||||
"include": ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"] |
||||
} |
||||
@ -1,3 +1,3 @@ |
||||
export * from './lib/providers/FileSystemProvider' |
||||
export * from './lib/contexts' |
||||
export { fileState, fileStateType } from './lib/types/index' |
||||
export { FileType } from './lib/types/index' |
||||
@ -1,56 +0,0 @@ |
||||
// eslint-disable-next-line no-use-before-define
|
||||
import React, { useEffect, useState } from 'react' |
||||
import { FileType, fileState, fileStateType } from '../types' |
||||
import FileStateCustom from './filestates/file-state-custom' |
||||
import FileStateError from './filestates/file-state-error' |
||||
import FileStateWarning from './filestates/file-state-warning' |
||||
// import FileStateModified from './filestates/file-state-modified'
|
||||
// import FileStateUntracked from './filestates/file-state-untracked'
|
||||
|
||||
export type fileStateProps = { |
||||
file: FileType, |
||||
fileState: fileState[] |
||||
} |
||||
|
||||
export const FileState = (props: fileStateProps) => { |
||||
const [state, setState] = useState<fileState>(undefined) |
||||
useEffect(() => { |
||||
console.log(props.file) |
||||
console.log(props.fileState) |
||||
setState(props.fileState.find((st) => st.path === props.file.path)) |
||||
}, [props.fileState]) |
||||
|
||||
const getTags = function () { |
||||
if (state) { |
||||
const types = state.fileStateType |
||||
const elements: any[] = [] |
||||
|
||||
for (const type of types) { |
||||
switch (type) { |
||||
case fileStateType.Modified: |
||||
//elements.push(<FileStateModified key={type}/>)
|
||||
break |
||||
case fileStateType.Untracked: |
||||
//elements.push(<FileStateUntracked key={type}/>)
|
||||
break |
||||
case fileStateType.Error: |
||||
elements.push(<FileStateError fileState={state} key={type} />) |
||||
break |
||||
case fileStateType.Warning: |
||||
elements.push(<FileStateWarning fileState={state} key={type} />) |
||||
break |
||||
case fileStateType.Custom: |
||||
elements.push(<FileStateCustom fileState={state} key={type} />) |
||||
break |
||||
} |
||||
} |
||||
return elements |
||||
} |
||||
} |
||||
|
||||
return <> |
||||
{getTags()} |
||||
</> |
||||
} |
||||
|
||||
export default FileState |
||||
Loading…
Reference in new issue