filip mertens
3 years ago
parent
b0abe0b71a
commit
3ca7c38f67
@ -0,0 +1,34 @@ |
||||
import { ViewPlugin } from '@remixproject/engine-web' |
||||
import * as packageJson from '../../../../../package.json' |
||||
import React from 'react' // eslint-disable-line
|
||||
import { PluginViewWrapper } from '@remix-ui/helper' |
||||
import { SearchTab } from '@remix-ui/search' |
||||
const profile = { |
||||
name: 'search', |
||||
displayName: 'Search', |
||||
methods: [''], |
||||
events: [], |
||||
icon: 'assets/img/Search_Icon.svg', |
||||
description: '', |
||||
kind: '', |
||||
location: 'sidePanel', |
||||
documentation: '', |
||||
version: packageJson.version |
||||
} |
||||
|
||||
export class SearchPlugin extends ViewPlugin { |
||||
dispatch: React.Dispatch<any> = () => {} |
||||
constructor () { |
||||
super(profile) |
||||
} |
||||
|
||||
|
||||
render() {
|
||||
return ( |
||||
<div id='searchTab'> |
||||
<SearchTab plugin={this}></SearchTab> |
||||
</div> |
||||
); |
||||
} |
||||
|
||||
} |
||||
|
After Width: | Height: | Size: 2.6 KiB |
@ -0,0 +1,4 @@ |
||||
{ |
||||
"presets": ["@nrwl/react/babel"], |
||||
"plugins": [] |
||||
} |
||||
@ -0,0 +1,19 @@ |
||||
{ |
||||
"env": { |
||||
"browser": true, |
||||
"es6": true |
||||
}, |
||||
"ignorePatterns": ["!**/*"], |
||||
"extends": "../../../.eslintrc.json", |
||||
"globals": { |
||||
"Atomics": "readonly", |
||||
"SharedArrayBuffer": "readonly" |
||||
}, |
||||
"parserOptions": { |
||||
"ecmaVersion": 11, |
||||
"sourceType": "module" |
||||
}, |
||||
"rules": { |
||||
"standard/no-callback-literal": "off" |
||||
} |
||||
} |
||||
@ -0,0 +1,5 @@ |
||||
{ |
||||
"tabWidth": 2, |
||||
"singleQuote": true, |
||||
"semi": false |
||||
} |
||||
@ -0,0 +1,7 @@ |
||||
# remix-ui-vertical-icons-panel |
||||
|
||||
React library for RemixIde vertical icons Panel |
||||
|
||||
## Running unit tests |
||||
|
||||
Run `nx test remix-ui-vertical-icons-panel` to execute the unit tests via [Jest](https://jestjs.io). |
||||
@ -0,0 +1 @@ |
||||
export { SearchTab } from './lib/components/Search'; |
||||
@ -0,0 +1,17 @@ |
||||
import React, { useContext, useReducer } from "react" |
||||
import { SearchContext } from "../context/context" |
||||
import { SearchingInitialState, SearchReducer } from "../reducers/Reducer" |
||||
|
||||
|
||||
|
||||
export const Find = props => { |
||||
|
||||
const { setFind } = useContext(SearchContext) |
||||
const change = (e) => { |
||||
setFind(e.target.value) |
||||
} |
||||
|
||||
return(<> |
||||
<input placeholder="Search" className="form-control" onChange={change}></input> |
||||
</>) |
||||
} |
||||
@ -0,0 +1,16 @@ |
||||
import React, { useContext, useEffect } from 'react' |
||||
import { SearchContext } from '../context/context' |
||||
|
||||
export const Replace = props => { |
||||
const { state, setReplace } = useContext(SearchContext) |
||||
|
||||
const change = e => { |
||||
setReplace(e.target.value) |
||||
} |
||||
|
||||
return ( |
||||
<> |
||||
<input placeholder='Replace' className="form-control" onChange={change}></input> |
||||
</> |
||||
) |
||||
} |
||||
@ -0,0 +1,25 @@ |
||||
import React, { useContext, useEffect, useReducer } from 'react' |
||||
import { SearchContext, SearchProvider } from '../context/context' |
||||
import { SearchingInitialState, SearchReducer } from '../reducers/Reducer' |
||||
import { Find } from './Find' |
||||
import { Replace } from './Replace' |
||||
import { Results } from './results/Results' |
||||
|
||||
export const SearchTab = props => { |
||||
|
||||
const plugin = props.plugin |
||||
|
||||
useEffect(() => { |
||||
console.log (plugin) |
||||
},[]) |
||||
|
||||
return ( |
||||
<> |
||||
<SearchProvider> |
||||
<Find></Find> |
||||
<Replace></Replace> |
||||
<Results plugin={plugin}></Results> |
||||
</SearchProvider> |
||||
</> |
||||
) |
||||
} |
||||
@ -0,0 +1,81 @@ |
||||
import { ViewPlugin } from "@remixproject/engine-web" |
||||
import React, { useContext, useEffect } from "react" |
||||
import { SearchContext } from "../../context/context" |
||||
import { SearchResult } from "../../reducers/Reducer" |
||||
|
||||
interface ResultsProps { |
||||
plugin: ViewPlugin |
||||
} |
||||
|
||||
export const Results = (props: ResultsProps) => { |
||||
|
||||
const { state, setSearchResults } = useContext(SearchContext) |
||||
|
||||
const { plugin } = props |
||||
|
||||
const getDirectory = async (dir) => { |
||||
let result = [] |
||||
const files = await plugin.call('fileManager', 'readdir', dir) |
||||
const fileArray = normalize(files) |
||||
for (const fi of fileArray) { |
||||
if (fi) { |
||||
const type = fi.data.isDirectory |
||||
if (type === true) { |
||||
result = [ |
||||
...result, |
||||
...(await getDirectory( |
||||
`${fi.filename}` |
||||
)) |
||||
] |
||||
} else { |
||||
result = [...result, fi.filename] |
||||
} |
||||
} |
||||
} |
||||
return result |
||||
} |
||||
|
||||
const normalize = (filesList) => { |
||||
const folders = [] |
||||
const files = [] |
||||
Object.keys(filesList || {}).forEach(key => { |
||||
if (filesList[key].isDirectory) { |
||||
folders.push({ |
||||
filename: key, |
||||
data: filesList[key] |
||||
}) |
||||
} else { |
||||
files.push({ |
||||
filename: key, |
||||
data: filesList[key] |
||||
}) |
||||
} |
||||
}) |
||||
return [...folders, ...files] |
||||
} |
||||
|
||||
useEffect(() => { |
||||
if (state.find) { |
||||
getDirectory('/').then(res => { |
||||
const ob = res.map(file => {
|
||||
const r:SearchResult = { |
||||
filename: file, |
||||
lines: [], |
||||
path: file, |
||||
searchComplete: false |
||||
} |
||||
return r |
||||
}) |
||||
console.log(ob) |
||||
setSearchResults(ob) |
||||
}) |
||||
} |
||||
},[state.find]) |
||||
|
||||
|
||||
useEffect(() => { |
||||
console.log(state.searchResults) |
||||
},[state.searchResults]) |
||||
|
||||
return(<></>) |
||||
} |
||||
@ -0,0 +1,88 @@ |
||||
import React from 'react' |
||||
import { createContext, useReducer } from 'react' |
||||
import { |
||||
SearchingInitialState, |
||||
SearchReducer, |
||||
SearchResult, |
||||
SearchState |
||||
} from '../reducers/Reducer' |
||||
|
||||
export interface SearchingStateInterface { |
||||
state: SearchState |
||||
setFind: (value: string) => void |
||||
setReplace: (value: string) => void |
||||
setInclude: (value: string) => void, |
||||
setExclude: (value: string) => void, |
||||
setCaseSensitive: (value: boolean) => void, |
||||
setRegex: (value: boolean) => void, |
||||
setWholeWord: (value: boolean) => void, |
||||
setSearchResults: (value: SearchResult[]) => void, |
||||
} |
||||
|
||||
export const SearchContext = createContext<SearchingStateInterface>(null) |
||||
|
||||
export const SearchProvider = ({ |
||||
children = [], |
||||
reducer = SearchReducer, |
||||
initialState = SearchingInitialState |
||||
} = {}) => { |
||||
const [state, dispatch] = useReducer(reducer, initialState) |
||||
|
||||
const value = { |
||||
state, |
||||
setFind: (value: string) => { |
||||
dispatch({ |
||||
type: 'SET_FIND', |
||||
payload: value |
||||
}) |
||||
}, |
||||
setReplace: (value: string) => { |
||||
dispatch({ |
||||
type: 'SET_REPLACE', |
||||
payload: value |
||||
}) |
||||
}, |
||||
setInclude: (value: string) => { |
||||
dispatch({ |
||||
type: 'SET_INCLUDE', |
||||
payload: value |
||||
}) |
||||
}, |
||||
setExclude(value: string) { |
||||
dispatch({ |
||||
type: 'SET_EXCLUDE', |
||||
payload: value |
||||
}) |
||||
}, |
||||
setCaseSensitive(value: boolean) { |
||||
dispatch({ |
||||
type: 'SET_CASE_SENSITIVE', |
||||
payload: value |
||||
}) |
||||
}, |
||||
setWholeWord(value: boolean) { |
||||
dispatch({ |
||||
type: 'SET_WHOLE_WORD', |
||||
payload: value |
||||
}) |
||||
}, |
||||
setRegex(value: boolean) { |
||||
dispatch({ |
||||
type: 'SET_REGEX', |
||||
payload: value |
||||
}) |
||||
}, |
||||
setSearchResults(value: SearchResult[]) { |
||||
dispatch({ |
||||
type: 'SET_SEARCH_RESULTS', |
||||
payload: value |
||||
}) |
||||
}
|
||||
} |
||||
|
||||
return ( |
||||
<> |
||||
<SearchContext.Provider value={value}>{children}</SearchContext.Provider> |
||||
</> |
||||
) |
||||
} |
||||
@ -0,0 +1,70 @@ |
||||
|
||||
interface Action { |
||||
type: string |
||||
payload: any |
||||
} |
||||
|
||||
export interface SearchResultLine { |
||||
lineNumber: number |
||||
text: string |
||||
} |
||||
|
||||
export interface SearchResult { |
||||
filename: string, |
||||
path: string, |
||||
lines: SearchResultLine[], |
||||
searchComplete: boolean |
||||
}
|
||||
|
||||
export interface SearchState { |
||||
find: string, |
||||
searchResults: SearchResult[], |
||||
replace: string, |
||||
include: string, |
||||
exclude: string, |
||||
} |
||||
|
||||
export const SearchingInitialState: SearchState = { |
||||
find: '', |
||||
replace: '', |
||||
include: '', |
||||
exclude: '', |
||||
searchResults: [] |
||||
} |
||||
|
||||
export const SearchReducer = (state: SearchState = SearchingInitialState, action: Action) => { |
||||
console.log(state) |
||||
switch (action.type) { |
||||
case 'SET_FIND': |
||||
return { |
||||
...state, |
||||
find: action.payload, |
||||
} |
||||
break; |
||||
case 'SET_REPLACE': |
||||
return { |
||||
...state, |
||||
replace: action.payload, |
||||
} |
||||
break; |
||||
case 'SET_INCLUDE': |
||||
return { |
||||
...state, |
||||
include: action.payload, |
||||
} |
||||
break; |
||||
case 'SET_EXCLUDE': |
||||
return { |
||||
...state, |
||||
exclude: action.payload, |
||||
} |
||||
break; |
||||
case 'SET_SEARCH_RESULTS': |
||||
return { |
||||
...state, |
||||
searchResults: action.payload, |
||||
} |
||||
break; |
||||
default: |
||||
} |
||||
} |
||||
@ -0,0 +1,19 @@ |
||||
{ |
||||
"extends": "../../../tsconfig.base.json", |
||||
"compilerOptions": { |
||||
"jsx": "react", |
||||
"allowJs": true, |
||||
"esModuleInterop": true, |
||||
"allowSyntheticDefaultImports": true |
||||
}, |
||||
"files": [], |
||||
"include": [], |
||||
"references": [ |
||||
{ |
||||
"path": "./tsconfig.lib.json" |
||||
}, |
||||
{ |
||||
"path": "./tsconfig.spec.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"] |
||||
} |
||||
Loading…
Reference in new issue