Skip to content

B
baas-ide
Commit 6dfe730e authored by tizah's avatar tizah
Browse files
Options

feat_fix_n_refactor: exptracted checkbox as a reusable component and fix selec all and auto run,

parent 493511fe
Show whitespace changes
Inline Side-by-side
Showing with 168 additions and 60 deletions
libs/remix-ui/checkbox/.babelrc 0 → 100644
View file @ 6dfe730e
{
"presets": ["@nrwl/react/babel"],
"plugins": []
}
libs/remix-ui/checkbox/.eslintrc 0 → 100644
View file @ 6dfe730e
{
"env": {
"browser": true,
"es6": true
},
"extends": "../../../.eslintrc",
"globals": {
"Atomics": "readonly",
"SharedArrayBuffer": "readonly"
},
"parserOptions": {
"ecmaVersion": 11,
"sourceType": "module"
},
"rules": {
"no-unused-vars": "off",
"@typescript-eslint/no-unused-vars": "error"
}
}
libs/remix-ui/checkbox/README.md 0 → 100644
View file @ 6dfe730e
# remix-ui-checkbox
This library was generated with [Nx](https://nx.dev).
## Running unit tests
Run `nx test remix-ui-checkbox` to execute the unit tests via [Jest](https://jestjs.io).
libs/remix-ui/checkbox/src/index.ts 0 → 100644
View file @ 6dfe730e
export * from './lib/remix-ui-checkbox'
libs/remix-ui/checkbox/src/lib/remix-ui-checkbox.tsx 0 → 100644
View file @ 6dfe730e
import React from 'react' //eslint-disable-line
import './remix-ui-checkbox.css'
/* eslint-disable-next-line */
export interface RemixUiCheckboxProps {
onClick?: (event) => void
onChange?: (event) => void
label?: string
inputType?: string
name?: string
checked?: boolean
id?: string
itemName?: string
categoryId?: string
}
export const RemixUiCheckbox = ({
id,
label,
onClick,
inputType,
name,
checked,
onChange,
itemName,
categoryId
}: RemixUiCheckboxProps) => {
return (
<div className="listenOnNetwork_2A0YE0 custom-control custom-checkbox" style={{ display: 'flex', alignItems: 'center' }} onClick={onClick}>
<input
id={id}
type={inputType}
onChange={onChange}
style={{ verticalAlign: 'bottom' }}
name={name}
className="custom-control-input"
checked={checked}
/>
<label className="form-check-label custom-control-label" id={`heading${categoryId}`} style={{ paddingTop: '0.15rem' }}>
{name ? <div className="font-weight-bold">{itemName}</div> : ''}
{label}
</label>
</div>
)
}
export default RemixUiCheckbox
libs/remix-ui/checkbox/tsconfig.json 0 → 100644
View file @ 6dfe730e
{
"extends": "../../../tsconfig.json",
"compilerOptions": {
"jsx": "react",
"allowJs": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true
},
"files": [],
"include": [],
"references": [
{
"path": "./tsconfig.lib.json"
}
]
}
libs/remix-ui/checkbox/tsconfig.lib.json 0 → 100644
View file @ 6dfe730e
{
"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"]
}
libs/remix-ui/static-analyser/src/lib/Button/StaticAnalyserButton.tsx
View file @ 6dfe730e
......@@ -12,11 +12,9 @@ const StaticAnalyserButton = ({
disabled
}: StaticAnalyserButtonProps) => {
return (
<div className="remixui-button-container" id='staticanalysisButton'>
<button className="btn btn-sm w-31 btn-primary" onClick={onClick} disabled={disabled}>
<button className="btn btn-sm w-25 btn-primary" onClick={onClick} disabled={disabled}>
{buttonText}
</button>
</div>
)
}
......
libs/remix-ui/static-analyser/src/lib/Checkbox/StaticAnalyserCheckedBox.tsx
View file @ 6dfe730e
......@@ -24,7 +24,7 @@ const StaticAnalyserCheckedBox = ({
categoryId
}: StaticAnalyserCheckBoxProps) => {
return (
<div className="pt-1 h-80 mx-3 align-items-center listenOnNetwork_2A0YE0 custom-control custom-checkbox " onClick={onClick}>
<div className="listenOnNetwork_2A0YE0 custom-control custom-checkbox" style={{ display: 'flex', alignItems: 'center' }} onClick={onClick}>
<input
id={id}
type={inputType}
......@@ -34,9 +34,9 @@ const StaticAnalyserCheckedBox = ({
className="custom-control-input"
checked={checked}
/>
<label className="pt-1 form-check-label custom-control-label" id={`heading${categoryId}`} >
{name ? <h6>{itemName}</h6> : ''}
<p>{label}</p>
<label className="form-check-label custom-control-label" id={`heading${categoryId}`} style={{ paddingTop: '0.15rem' }}>
{name ? <div className="font-weight-bold">{itemName}</div> : ''}
{label}
</label>
</div>
)
......
libs/remix-ui/static-analyser/src/lib/ErrorRenderer.tsx
View file @ 6dfe730e
......@@ -4,20 +4,12 @@ interface ErrorRendererProps {
message: any;
opt: any,
warningErrors: any
editor: any
}
const ErrorRenderer = ({ message, opt }: ErrorRendererProps) => {
const [, setError] = useState(
{
row: null,
column: null,
text: null,
type: null,
errFile: null
}
)
const ErrorRenderer = ({ message, opt, editor }: ErrorRendererProps) => {
const getPositionDetails = (msg: any) => {
const result = { } as any
const result = { } as Record<string, number | string>
// To handle some compiler warning without location like SPDX license warning etc
if (!msg.includes(':')) return { errLine: -1, errCol: -1, errFile: msg }
......@@ -32,6 +24,12 @@ const ErrorRenderer = ({ message, opt }: ErrorRendererProps) => {
result.errFile = position ? position[1] : ''
return result
}
const handlePointToErrorOnClick = () => {
const result = opt.locationString.split(':')
editor._components.registry.get('editor').api.gotoLine(parseInt(result[0]) - 1, parseInt(result[1]))
}
if (!message) return
let position = getPositionDetails(message)
if (!position.errFile || (opt.errorType && opt.errorType === position.errFile)) {
......@@ -43,15 +41,6 @@ const ErrorRenderer = ({ message, opt }: ErrorRendererProps) => {
opt.errLine = position.errLine
opt.errCol = position.errCol
opt.errFile = position.errFile.trim()
if (!opt.noAnnotations && opt.errFile) {
setError({
errFile: opt.errFile,
row: opt.errLine,
column: opt.errCol,
text: message,
type: opt.type
})
}
const classList = opt.type === 'error' ? 'alert alert-danger' : 'alert alert-warning'
return (
<div>
......@@ -59,7 +48,7 @@ const ErrorRenderer = ({ message, opt }: ErrorRendererProps) => {
<div className="close" data-id="renderer">
<i className="fas fa-times"></i>
</div>
<span className='d-flex flex-column'>
<span className='d-flex flex-column' onClick={handlePointToErrorOnClick}>
<span className='h6 font-weight-bold'>{opt.name}</span>
{ opt.item.warning }
{opt.item.more
......
libs/remix-ui/static-analyser/src/lib/remix-ui-static-analyser.tsx
View file @ 6dfe730e
......@@ -5,6 +5,7 @@ import Button from './Button/StaticAnalyserButton' // eslint-disable-line
import remixLib from '@remix-project/remix-lib'
import _ from 'lodash'
import { TreeView, TreeViewItem } from '@remix-ui/tree-view' // eslint-disable-line
import { RemixUiCheckbox } from '@remix-ui/checkbox' // eslint-disable-line
import ErrorRenderer from './ErrorRenderer' // eslint-disable-line
const StaticAnalysisRunner = require('@remix-project/remix-analyzer').CodeAnalysis
const utils = remixLib.util
......@@ -60,12 +61,12 @@ export const RemixUiStaticAnalyser = (props: RemixUiStaticAnalyserProps) => {
}
return indexOfCategory
}
const [autoRun, setAutoRun] = useState(true)
const [categoryIndex, setCategoryIndex] = useState(groupedModuleIndex(groupedModules))
const warningContainer = React.useRef(null)
const [runButtonState, setRunButtonState] = useState(true)
const [autoRun, setAutoRun] = useState(false)
const [result, setResult] = useState({
lastCompilationResult: null,
lastCompilationSource: null,
......@@ -81,41 +82,33 @@ export const RemixUiStaticAnalyser = (props: RemixUiStaticAnalyserProps) => {
const [warningState, setWarningState] = useState([])
useEffect(() => {
if (autoRun) {
const setCompilationResult = async (data, source, file) => {
await setResult({ lastCompilationResult: data, lastCompilationSource: source, currentFile: file })
}
if (props.analysisModule) {
props.analysisModule.on(
'solidity',
'compilationFinished',
(file, source, languageVersion, data) => {
if (languageVersion.indexOf('soljson') !== 0) return
setCompilationResult(data, source, file)
if(categoryIndex.length > 0){
if (categoryIndex.length > 0) {
run(data, source, file)
}
}
)
}
} else {
setAutoRun(true)
}
return () => { }
}, [autoRun, categoryIndex])
const run = (lastCompilationResult, lastCompilationSource, currentFile) => {
// const highlightLocation = async (location, fileName) => {
// await props.analysisModule.call('editor', 'discardHighlight')
// await props.analysisModule.call('editor', 'highlight', location, fileName)
// }
if (autoRun) {
setResult({ lastCompilationResult, lastCompilationSource, currentFile })
if (lastCompilationResult && categoryIndex.length) {
if (lastCompilationResult && categoryIndex.length > 0) {
setRunButtonState(false)
let warningCount = 0
const warningMessage = []
......@@ -139,8 +132,8 @@ export const RemixUiStaticAnalyser = (props: RemixUiStaticAnalyserProps) => {
let row = 0
let fileName = currentFile
if (item.location) {
var split = item.location.split(':')
var file = split[2]
const split = item.location.split(':')
const file = split[2]
location = {
start: parseInt(split[0]),
length: parseInt(split[1])
......@@ -202,7 +195,7 @@ export const RemixUiStaticAnalyser = (props: RemixUiStaticAnalyserProps) => {
const groupedCategory = groupBy(resultArray, 'warningModuleName')
setWarningState(groupedCategory)
})
if(categoryIndex.length > 0){
if (categoryIndex.length > 0) {
props.event.trigger('staticAnaysisWarning', [warningCount])
}
} else {
......@@ -213,6 +206,7 @@ export const RemixUiStaticAnalyser = (props: RemixUiStaticAnalyserProps) => {
props.event.trigger('staticAnaysisWarning', [-1])
}
}
}
const handleCheckAllModules = (groupedModules) => {
const index = groupedModuleIndex(groupedModules)
......@@ -223,9 +217,8 @@ export const RemixUiStaticAnalyser = (props: RemixUiStaticAnalyserProps) => {
})
)
} else {
setCategoryIndex(_.uniq([...categoryIndex]))
setCategoryIndex(_.uniq([...categoryIndex, ...index]))
}
}
const handleCheckOrUncheckCategory = (category) => {
......@@ -261,7 +254,7 @@ export const RemixUiStaticAnalyser = (props: RemixUiStaticAnalyserProps) => {
const categoryItem = (categoryId, item, i) => {
return (
<div className="form-check" key={i}>
<CheckBox
<RemixUiCheckbox
categoryId={categoryId}
id={`staticanalysismodule_${categoryId}_${i}`}
inputType="checkbox"
......@@ -285,7 +278,7 @@ export const RemixUiStaticAnalyser = (props: RemixUiStaticAnalyserProps) => {
<label
htmlFor={`heading${categoryId}`}
style={{ cursor: 'pointer' }}
className="pl-3 card-header h6 d-flex justify-content-between font-weight-bold border-left px-1 py-2 w-100"
className="pl-3 card-header h6 d-flex justify-content-between font-weight-bold px-1 py-2 w-100"
data-bs-toggle="collapse"
data-bs-expanded="false"
data-bs-controls={`heading${categoryId}`}
......@@ -294,10 +287,10 @@ export const RemixUiStaticAnalyser = (props: RemixUiStaticAnalyserProps) => {
{category[0].categoryDisplayName}
</label>
}
expand={true}
expand={false}
>
<div>
<CheckBox onClick={() => handleCheckOrUncheckCategory(category)} id={categoryId} inputType="checkbox" label={`Select ${category[0].categoryDisplayName}`} name='checkCategoryEntry' checked={category.map(x => x._index.toString()).every(el => categoryIndex.includes(el))} />
<RemixUiCheckbox onClick={() => handleCheckOrUncheckCategory(category)} id={categoryId} inputType="checkbox" label={`Select ${category[0].categoryDisplayName}`} name='checkCategoryEntry' checked={category.map(x => x._index.toString()).every(el => categoryIndex.includes(el))} />
</div>
<div className="w-100 d-block px-2 my-1 entries collapse multi-collapse" id={`heading${categoryId}`}>
{category.map((item, i) => {
......@@ -314,11 +307,10 @@ export const RemixUiStaticAnalyser = (props: RemixUiStaticAnalyserProps) => {
}
return (
<div style={{ marginLeft: '10px', marginRight: '10px' }}>
<div className="analysis_3ECCBV px-3 pb-1">
<div className="my-2 d-flex flex-column align-items-left">
<div className="d-flex justify-content-between">
<div >
<CheckBox
<RemixUiCheckbox
id="checkAllEntries"
inputType="checkbox"
checked={Object.values(groupedModules).map((value: any) => {
......@@ -329,16 +321,13 @@ export const RemixUiStaticAnalyser = (props: RemixUiStaticAnalyserProps) => {
label="Select all"
onClick={() => handleCheckAllModules(groupedModules)}
/>
</div>
<div className="" >
<CheckBox
<RemixUiCheckbox
id="autorunstaticanalysis"
inputType="checkbox"
onClick={handleAutoRun}
checked={autoRun}
label="Autorun"
/>
</div>
<Button buttonText="Run" onClick={() => run(result.lastCompilationResult, result.lastCompilationSource, result.currentFile)} disabled={runButtonState || categoryIndex.length === 0}/>
</div>
</div>
......@@ -368,7 +357,12 @@ export const RemixUiStaticAnalyser = (props: RemixUiStaticAnalyserProps) => {
<>
<span className="text-dark h6">{element[0]}</span>
{element[1].map(x => (
x.hasWarning ? (<ErrorRenderer message={x.msg} opt={x.options} warningErrors={ x.warningErrors}/>) : null
x.hasWarning ? (
<div id={`staticAnalysisModule${element[1].warningModuleName}`}>
<ErrorRenderer message={x.msg} opt={x.options} warningErrors={ x.warningErrors} editor={props.analysisModule}/>
</div>
) : null
))}
</>
)))
......
nx.json
View file @ 6dfe730e
......@@ -98,6 +98,9 @@
},
"remix-ui-static-analyser": {
"tags": []
},
"remix-ui-checkbox": {
"tags": []
}
}
}
package.json
View file @ 6dfe730e
......@@ -41,7 +41,7 @@
"workspace-schematic": "nx workspace-schematic",
"dep-graph": "nx dep-graph",
"help": "nx help",
"lint:libs": "nx run-many --target=lint --projects=remix-analyzer,remix-astwalker,remix-debug,remix-lib,remix-simulator,remix-solidity,remix-tests,remix-url-resolver,remixd,remix-ui-tree-view,remix-ui-modal-dialog,remix-ui-toaster,remix-ui-file-explorer,remix-ui-debugger-ui,remix-ui-workspace",
"lint:libs": "nx run-many --target=lint --projects=remix-analyzer,remix-astwalker,remix-debug,remix-lib,remix-simulator,remix-solidity,remix-tests,remix-url-resolver,remixd,remix-ui-tree-view,remix-ui-modal-dialog,remix-ui-toaster,remix-ui-file-explorer,remix-ui-debugger-ui,remix-ui-workspace,remix-ui-static-analyser,remix-ui-checkbox",
"build:libs": "nx run-many --target=build --parallel=false --with-deps=true --projects=remix-analyzer,remix-astwalker,remix-debug,remix-lib,remix-simulator,remix-solidity,remix-tests,remix-url-resolver,remixd",
"test:libs": "nx run-many --target=test --projects=remix-analyzer,remix-astwalker,remix-debug,remix-lib,remix-simulator,remix-solidity,remix-tests,remix-url-resolver,remixd",
"publish:libs": "npm run build:libs & lerna publish --skip-git & npm run bumpVersion:libs",
......
tsconfig.json
View file @ 6dfe730e
......@@ -39,7 +39,8 @@
"@remix-ui/toaster": ["libs/remix-ui/toaster/src/index.ts"],
"@remix-ui/file-explorer": ["libs/remix-ui/file-explorer/src/index.ts"],
"@remix-ui/workspace": ["libs/remix-ui/workspace/src/index.ts"],
"@remix-ui/static-analyser": ["libs/remix-ui/static-analyser/src/index.ts"]
"@remix-ui/static-analyser": ["libs/remix-ui/static-analyser/src/index.ts"],
"@remix-ui/checkbox": ["libs/remix-ui/checkbox/src/index.ts"]
}
},
"exclude": ["node_modules", "tmp"]
......
workspace.json
View file @ 6dfe730e
......@@ -744,6 +744,22 @@
}
}
}
},
"remix-ui-checkbox": {
"root": "libs/remix-ui/checkbox",
"sourceRoot": "libs/remix-ui/checkbox/src",
"projectType": "library",
"schematics": {},
"architect": {
"lint": {
"builder": "@nrwl/linter:lint",
"options": {
"linter": "eslint",
"tsConfig": ["libs/remix-ui/checkbox/tsconfig.lib.json"],
"exclude": ["**/node_modules/**", "!libs/remix-ui/checkbox/**/*"]
}
}
}
}
},
"cli": {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment