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