hendrik/lens
1
0
Fork 0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00
Code Issues Projects Releases Wiki Activity

Use React.Context for controlling input theme in Dialogs

Browse Source 
Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev 2022-02-01 15:32:49 +03:00
parent 310a2f14d9
commit e7c3808d02
2 changed files with 18 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/renderer/components/dialog/dialog.tsx
View File

@ -12,6 +12,7 @@ import { reaction } from "mobx";
import { Animate } from "../animate"; import { Animate } from "../animate";
import { cssNames, noop, stopPropagation } from "../../utils"; import { cssNames, noop, stopPropagation } from "../../utils";
import { navigation } from "../../navigation"; import { navigation } from "../../navigation";
import { InputThemeContext } from "../input";
// todo: refactor + handle animation-end in props.onClose()? // todo: refactor + handle animation-end in props.onClose()?
@ -139,16 +140,18 @@ export class Dialog extends React.PureComponent<DialogProps, DialogState> {
className = cssNames("Dialog flex center", className, { modal, pinned }); className = cssNames("Dialog flex center", className, { modal, pinned });
let dialog = ( let dialog = (
<div <InputThemeContext.Provider value="light">
className={className} <div
onClick={stopPropagation} className={className}
ref={this.ref} onClick={stopPropagation}
data-testid={testId} ref={this.ref}
> data-testid={testId}
<div className="box" ref={e => this.contentElem = e}> >
{this.props.children} <div className="box" ref={e => this.contentElem = e}>
{this.props.children}
</div>
</div> </div>
</div> </InputThemeContext.Provider>
); );
if (animated) { if (animated) {

7
src/renderer/components/input/input.tsx
View File

@ -70,6 +70,8 @@ interface State {
submitted: boolean; submitted: boolean;
} }
export const InputThemeContext = React.createContext("dark");
const defaultProps: Partial<InputProps> = { const defaultProps: Partial<InputProps> = {
rows: 1, rows: 1,
maxRows: 10000, maxRows: 10000,
@ -347,9 +349,10 @@ export class Input extends React.Component<InputProps, State> {
...inputProps ...inputProps
} = this.props; } = this.props;
const { dirty, valid, validating, errors } = this.state; const { dirty, valid, validating, errors } = this.state;
const theme = this.context;
const className = cssNames(styles.Input, this.props.className, { const className = cssNames(styles.Input, this.props.className, {
[styles.lightTheme]: lightTheme, [styles.lightTheme]: lightTheme || theme == "light",
[styles.disabled]: disabled, [styles.disabled]: disabled,
[styles.invalid]: !valid, [styles.invalid]: !valid,
[styles.dirty]: dirty, [styles.dirty]: dirty,
@ -413,3 +416,5 @@ export class Input extends React.Component<InputProps, State> {
); );
} }
} }
Input.contextType = InputThemeContext;