Merge branch 'master' of https://github.com/ethereum/remix-project into appmodals
filip mertens
3 years ago
commit
66126a4d15
@ -1,17 +0,0 @@ |
||||
'use strict' |
||||
import React from 'react' // eslint-disable-line
|
||||
import { RemixApp } from '@remix-ui/app' |
||||
import AppComponent from './app-component' |
||||
|
||||
const appComponent = new AppComponent() |
||||
appComponent.run() |
||||
|
||||
function App () { |
||||
return <> |
||||
<React.StrictMode> |
||||
<RemixApp app={appComponent}></RemixApp> |
||||
</React.StrictMode> |
||||
</> |
||||
} |
||||
|
||||
export default App |
||||
@ -1,9 +1,16 @@ |
||||
// eslint-disable-next-line no-use-before-define
|
||||
import React from 'react' |
||||
import ReactDOM from 'react-dom' |
||||
import App from './app' |
||||
import AppComponent from './app' |
||||
// eslint-disable-next-line no-unused-vars
|
||||
import { RemixApp } from '@remix-ui/app' |
||||
|
||||
const appComponent = new AppComponent() |
||||
appComponent.run() |
||||
|
||||
ReactDOM.render( |
||||
<App />, |
||||
<React.StrictMode> |
||||
<RemixApp app={appComponent}></RemixApp> |
||||
</React.StrictMode>, |
||||
document.getElementById('root') |
||||
) |
||||
|
||||
@ -1,7 +0,0 @@ |
||||
# remix-ui-clipboard |
||||
|
||||
This library was generated with [Nx](https://nx.dev). |
||||
|
||||
## Running unit tests |
||||
|
||||
Run `nx test remix-ui-clipboard` to execute the unit tests via [Jest](https://jestjs.io). |
||||
@ -0,0 +1,12 @@ |
||||
{ |
||||
"presets": [ |
||||
[ |
||||
"@nrwl/react/babel", |
||||
{ |
||||
"runtime": "automatic", |
||||
"useBuiltIns": "usage" |
||||
} |
||||
] |
||||
], |
||||
"plugins": [] |
||||
} |
||||
@ -0,0 +1,18 @@ |
||||
{ |
||||
"extends": ["plugin:@nrwl/nx/react", "../../../.eslintrc.json"], |
||||
"ignorePatterns": ["!**/*"], |
||||
"overrides": [ |
||||
{ |
||||
"files": ["*.ts", "*.tsx", "*.js", "*.jsx"], |
||||
"rules": {} |
||||
}, |
||||
{ |
||||
"files": ["*.ts", "*.tsx"], |
||||
"rules": {} |
||||
}, |
||||
{ |
||||
"files": ["*.js", "*.jsx"], |
||||
"rules": {} |
||||
} |
||||
] |
||||
} |
||||
@ -0,0 +1,7 @@ |
||||
# remix-ui-theme-module |
||||
|
||||
This library was generated with [Nx](https://nx.dev). |
||||
|
||||
## Running unit tests |
||||
|
||||
Run `nx test remix-ui-theme-module` to execute the unit tests via [Jest](https://jestjs.io). |
||||
@ -0,0 +1 @@ |
||||
export * from './lib/remix-ui-theme-module'; |
||||
@ -0,0 +1,106 @@ |
||||
/* eslint-disable @typescript-eslint/no-explicit-any */ |
||||
import React, { useEffect, useRef, useState } from 'react'; |
||||
import { Theme, ThemeModule } from '../../types/theme-module'; |
||||
import './remix-ui-theme-module.module.css'; |
||||
|
||||
/* eslint-disable-next-line */ |
||||
export interface RemixUiThemeModuleProps { |
||||
themeModule: ThemeModule; |
||||
} |
||||
|
||||
const defaultThemes = [ |
||||
{ |
||||
name: 'Dark', |
||||
quality: 'dark', |
||||
url: 'assets/css/themes/remix-dark_tvx1s2.css' |
||||
}, |
||||
{ |
||||
name: 'Light', |
||||
quality: 'light', |
||||
url: 'assets/css/themes/remix-light_powaqg.css' |
||||
}, |
||||
{ |
||||
name: 'Midcentury', |
||||
quality: 'light', |
||||
url: 'assets/css/themes/remix-midcentury_hrzph3.css' |
||||
}, |
||||
{ |
||||
name: 'Black', |
||||
quality: 'dark', |
||||
url: 'assets/css/themes/remix-black_undtds.css' |
||||
}, |
||||
{ |
||||
name: 'Candy', |
||||
quality: 'light', |
||||
url: 'assets/css/themes/remix-candy_ikhg4m.css' |
||||
}, |
||||
|
||||
{ |
||||
name: 'Cerulean', |
||||
quality: 'light', |
||||
url: 'assets/css/themes/bootstrap-cerulean.min.css' |
||||
}, |
||||
{ |
||||
name: 'Flatly', |
||||
quality: 'light', |
||||
url: 'assets/css/themes/bootstrap-flatly.min.css' |
||||
}, |
||||
{ |
||||
name: 'Spacelab', |
||||
quality: 'light', |
||||
url: 'assets/css/themes/bootstrap-spacelab.min.css' |
||||
}, |
||||
{ |
||||
name: 'Cyborg', |
||||
quality: 'dark', |
||||
url: 'assets/css/themes/bootstrap-cyborg.min.css' |
||||
} |
||||
]; |
||||
|
||||
export function RemixUiThemeModule({ themeModule }: RemixUiThemeModuleProps) { |
||||
const [themeName, setThemeName] = useState('') |
||||
|
||||
useEffect(() => { |
||||
themeModule.switchTheme() |
||||
}, [themeName, themeModule]) |
||||
|
||||
return ( |
||||
<div className="border-top"> |
||||
<div className="card-body pt-3 pb-2"> |
||||
<h6 className="card-title">Themes</h6> |
||||
<div className="card-text themes-container"> |
||||
{themeModule.getThemes() |
||||
? themeModule.getThemes().map((theme, idx) => ( |
||||
<div |
||||
className="radio custom-control custom-radio mb-1 form-check" |
||||
key={idx} |
||||
> |
||||
<input |
||||
type="radio" |
||||
onChange={event => { |
||||
themeModule.switchTheme(theme.name); |
||||
setThemeName(theme.name); |
||||
}} |
||||
className="align-middle custom-control-input" |
||||
name="theme" |
||||
id={theme.name} |
||||
data-id={`settingsTabTheme${theme.name}`} |
||||
checked={themeModule.active === theme.name} |
||||
/> |
||||
<label |
||||
className="form-check-label custom-control-label" |
||||
data-id={`settingsTabThemeLabel${theme.name}`} |
||||
htmlFor={theme.name} |
||||
> |
||||
{theme.name} ({theme.quality}) |
||||
</label> |
||||
</div> |
||||
)) |
||||
: null} |
||||
</div> |
||||
</div> |
||||
</div> |
||||
) |
||||
} |
||||
|
||||
export default RemixUiThemeModule; |
||||
@ -0,0 +1,20 @@ |
||||
{ |
||||
"extends": "../../../tsconfig.base.json", |
||||
"compilerOptions": { |
||||
"jsx": "react", |
||||
"allowJs": true, |
||||
"esModuleInterop": true, |
||||
"allowSyntheticDefaultImports": true, |
||||
"forceConsistentCasingInFileNames": true, |
||||
"strict": true, |
||||
"noImplicitReturns": true, |
||||
"noFallthroughCasesInSwitch": 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"] |
||||
} |
||||
@ -0,0 +1,47 @@ |
||||
import { Plugin } from "@remixproject/engine/lib/abstract"; |
||||
import { EventEmitter } from "events"; |
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
export class ThemeModule extends Plugin<any, any> { |
||||
currentThemeState: Record<string, unknown>; |
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
constructor(registry: any); |
||||
events: EventEmitter; |
||||
_deps: { |
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
config: any; |
||||
}; |
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
_paq: any |
||||
element: HTMLDivElement; |
||||
// eslint-disable-next-line @typescript-eslint/ban-types
|
||||
themes: {[key: string]: Theme}; |
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
active: string; |
||||
forced: boolean; |
||||
render(): HTMLDivElement; |
||||
renderComponent(): void; |
||||
/** Return the active theme */ |
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
currentTheme(): any; |
||||
/** Returns all themes as an array */ |
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
getThemes(): Theme[]; |
||||
/** |
||||
* Init the theme |
||||
*/ |
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
initTheme(callback: any): void; |
||||
/** |
||||
* Change the current theme |
||||
* @param {string} [themeName] - The name of the theme |
||||
*/ |
||||
switchTheme(themeName?: string): void; |
||||
/** |
||||
* fixes the invertion for images since this should be adjusted when we switch between dark/light qualified themes |
||||
* @param {element} [image] - the dom element which invert should be fixed to increase visibility |
||||
*/ |
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
fixInvert(image?: any): void; |
||||
} |
||||
|
||||
interface Theme { name: string, quality: string, url: string } |
||||
Loading…
Reference in new issue