diff --git a/src/renderer/components/input/search-input.tsx b/src/renderer/components/input/search-input.tsx index 6d7eb11746..9bf2b7387d 100644 --- a/src/renderer/components/input/search-input.tsx +++ b/src/renderer/components/input/search-input.tsx @@ -26,7 +26,7 @@ const defaultProps: Partial = { export class SearchInput extends React.Component { static defaultProps = defaultProps as object; - @observable inputVal: string; + @observable inputVal = ""; // fix: use empty string to avoid react warnings @disposeOnUnmount updateInput = autorun(() => this.inputVal = getSearch()) diff --git a/src/renderer/components/items-list/index.ts b/src/renderer/components/items-list/index.ts deleted file mode 100644 index 0db21a797b..0000000000 --- a/src/renderer/components/items-list/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from "./items-list" \ No newline at end of file diff --git a/src/renderer/components/items-list/items-list.scss b/src/renderer/components/items-list/items-list.scss deleted file mode 100644 index fbb3495443..0000000000 --- a/src/renderer/components/items-list/items-list.scss +++ /dev/null @@ -1,45 +0,0 @@ -.ItemsList { - &.selectable { - .Item:not(.disabled) { - cursor: pointer; - - &:hover { - background-color: #f7f7f7; - border-radius: $radius; - } - } - } - - &.inline { - .Item { - margin-right: $margin; - } - } -} - -.Item { - padding: $padding / 2; - margin: 0 $margin / -2; - user-select: none; - - .Icon { - &.tick-icon { - color: $colorOk; - } - - &.action-icon { - border-radius: $radius; - background: white; - color: #36393e; - } - } - - &.selected { - } - - &.disabled { - opacity: .5; - pointer-events: none; - } -} - diff --git a/src/renderer/components/items-list/items-list.tsx b/src/renderer/components/items-list/items-list.tsx deleted file mode 100644 index 0b15ff1684..0000000000 --- a/src/renderer/components/items-list/items-list.tsx +++ /dev/null @@ -1,121 +0,0 @@ -import './items-list.scss' -import React from 'react' -import { observer } from "mobx-react"; -import { cssNames } from "../../utils"; -import { Icon } from "../icon"; - -interface ItemsListProps { - className?: string; - disabled?: boolean; - inline?: boolean; - selectable?: boolean; - multiSelect?: boolean; - showSelectedItems?: boolean; - showSelectedIcon?: boolean; - selectedValues?: any[]; - onSelectChange(currentItem: any, selectedItems: any[]): void; -} - -@observer -export class ItemsList extends React.Component { - static defaultProps: Partial = { - selectable: true, - multiSelect: true, - showSelectedIcon: false, - } - - onClickItem(itemValue: any) { - const { selectedValues, multiSelect, onSelectChange } = this.props; - if (multiSelect) { - const itemIndex = selectedValues.findIndex(value => value === itemValue); - if (itemIndex > -1) { - // remove - const newSelectedValues = [...selectedValues]; - newSelectedValues.splice(itemIndex, 1); - onSelectChange(itemValue, newSelectedValues); - } - else { - // add - const newSelectedValues = [].concat(selectedValues, itemValue); - onSelectChange(itemValue, newSelectedValues) - } - } - else { - onSelectChange(itemValue, [itemValue]); - } - } - - render() { - const { disabled, inline, selectable, selectedValues, showSelectedItems, showSelectedIcon } = this.props; - let { className, children } = this.props; - className = cssNames('ItemsList flex', className, { - selectable: selectable, - "inline wrap": inline, - column: !inline, - }); - if (selectable) { - children = React.Children.toArray(children).map((item: React.ReactElement) => { - const itemValue = item.props.value; - const isSelected = selectedValues.includes(itemValue); - const isDisabled = disabled !== undefined ? disabled : item.props.disabled; - - if (showSelectedItems === false && isSelected) { - return null; - } - - const onClick = (evt: React.MouseEvent) => { - if (item.props.onClick) item.props.onClick(evt); - this.onClickItem(itemValue); - }; - - return React.cloneElement(item, { - showSelectedIcon: showSelectedIcon, - selected: isSelected, - disabled: isDisabled, - onClick: onClick, - }) - }); - } - return ( -
    - {children} -
- ); - } -} - -interface ItemProps extends React.HTMLProps { - value: any; - className?: string; - disabled?: boolean; - selected?: boolean; - showSelectedIcon?: boolean; -} - -const defaultProps: Partial = { - showSelectedIcon: true, -} - -export class Item extends React.Component { - static defaultProps = defaultProps as object; - - render() { - const { disabled, selected, value, showSelectedIcon, children, ...itemProps } = this.props; - let { className } = this.props; - className = cssNames('Item flex gaps', className, { disabled, selected }); - const actionIcon = selected ? "remove" : "add"; - return ( -
  • -
    - {children} -
    - {showSelectedIcon && selected && ( - - )} - {!showSelectedIcon && ( - - )} -
  • - ); - } -}