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

resolve pr comments

Browse Source 
Signed-off-by: Sebastian Malton <smalton@mirantis.com>
This commit is contained in:
Sebastian Malton 2020-08-19 10:30:04 -04:00 committed by Sebastian Malton
parent ff928183cc
commit 486086c678
2 changed files with 26 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/renderer/components/editable-list/editable-list.scss
View File

@ -1,9 +1,9 @@
.EditableList { .EditableList {
.EditableListContents { .el-contents {
display: grid; display: grid;
grid-template-columns: 1fr auto; grid-template-columns: 1fr auto;
.ValueRemove { .el-value-remove {
.Icon { .Icon {
justify-content: unset; justify-content: unset;
} }

36
src/renderer/components/editable-list/editable-list.tsx
View File

@ -5,6 +5,7 @@ import { Icon } from "../icon";
import { Input } from "../input"; import { Input } from "../input";
import { observable } from "mobx"; import { observable } from "mobx";
import { observer } from "mobx-react"; import { observer } from "mobx-react";
import { autobind } from "../../utils";
export interface Props<T> { export interface Props<T> {
items: T[], items: T[],
@ -14,37 +15,48 @@ export interface Props<T> {
// An optional prop used to convert T to a displayable string // An optional prop used to convert T to a displayable string
// defaults to `String` // defaults to `String`
display?: (item: T) => string, renderItem?: (item: T, index: number) => React.ReactNode,
}
const defaultProps: Partial<Props<any>> = {
placeholder: "Add new item...",
renderItem: (item: any, index: number) => <React.Fragment key={index}>{item}</React.Fragment>
} }
@observer @observer
export class EditableList<T> extends React.Component<Props<T>> { export class EditableList<T> extends React.Component<Props<T>> {
static defaultProps = defaultProps as Props<any>;
@observable currentNewItem = ""; @observable currentNewItem = "";
@autobind()
onSubmit(val: string) {
const { add } = this.props
if (val) {
add(val)
this.currentNewItem = ""
}
}
render() { render() {
const { items, add, remove, display = String, placeholder = "Add new item..." } = this.props; const { items, remove, renderItem, placeholder } = this.props;
return ( return (
<div className="EditableList"> <div className="EditableList">
<div className="EditableListHeader"> <div className="el-header">
<Input <Input
value={this.currentNewItem} value={this.currentNewItem}
onSubmit={val => { onSubmit={this.onSubmit}
if (val) {
add(val);
}
this.currentNewItem = "";
}}
placeholder={placeholder} placeholder={placeholder}
onChange={val => this.currentNewItem = val} onChange={val => this.currentNewItem = val}
/> />
</div> </div>
<div className="EditableListContents"> <div className="el-contents">
{ {
items items
.map((item, index) => [ .map((item, index) => [
<span key={`${item}-value`}>{display(item)}</span>, <span key={`${item}-value`}>{renderItem(item, index)}</span>,
<div key={`${item}-remove`} className="ValueRemove"> <div key={`${item}-remove`} className="el-value-remove">
<Icon material="delete_outline" onClick={() => remove(({ index, oldItem: item }))} /> <Icon material="delete_outline" onClick={() => remove(({ index, oldItem: item }))} />
</div> </div>
]) ])