From b2eacb17a2d12c634449d80c562f52063f97fd50 Mon Sep 17 00:00:00 2001 From: Vu Tran Date: Mon, 18 Dec 2017 18:57:32 -0800 Subject: [PATCH] remove row height --- README.md | 1 - src/Input.tsx | 4 ++-- src/Omnibar.tsx | 6 ++---- src/Results.tsx | 2 -- src/ResultsItem.tsx | 6 +++--- src/constants.tsx | 2 ++ src/hoc.tsx | 3 ++- typings/index.d.ts | 2 -- 8 files changed, 11 insertions(+), 15 deletions(-) diff --git a/README.md b/README.md index b67627a..e73c736 100644 --- a/README.md +++ b/README.md @@ -192,7 +192,6 @@ const VoiceBar = withVoice(Omnibar); | `placeholder` | `string` | | Input placeholder | | `maxResults` | `number` | | The maximum amount of results to display overall. | | `maxViewableResults` | `number` | | The maximum amount of results to display in the viewable container (before scrolling). | -| `rowHeight` | `number` | | The height for each result row item | | `resultStyle` | `object` | | Style object override for the result container | | `onAction` | `Function` | | Apply an action callback when an item is executed. Arguments: `item` | | `inputDelay` | `number` | | Set an input delay used for querying extensions (Default: 100ms) | diff --git a/src/Input.tsx b/src/Input.tsx index 4d4c497..ceb7a72 100644 --- a/src/Input.tsx +++ b/src/Input.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { COLORS } from './constants'; +import { COLORS, DEFAULT_HEIGHT } from './constants'; interface Props { // callback method when the input value has changed @@ -24,7 +24,7 @@ interface State { const INPUT_STYLE: React.CSSProperties = { width: '100%', - height: 50, + height: DEFAULT_HEIGHT, fontSize: 24, lineHeight: '24px', boxSizing: 'border-box', diff --git a/src/Omnibar.tsx b/src/Omnibar.tsx index c0148f1..9d88ec8 100644 --- a/src/Omnibar.tsx +++ b/src/Omnibar.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import Input from './Input'; import Results from './Results'; import search from './search'; -import { KEYS, BLUR_DELAY } from './constants'; +import { KEYS, BLUR_DELAY, DEFAULT_HEIGHT } from './constants'; import AnchorAction from './modifiers/anchor/AnchorAction'; import { debounce } from './utils'; @@ -15,7 +15,6 @@ export default class Omnibar extends React.PureComponent< children: null, extensions: [], maxViewableResults: null, - rowHeight: 50, inputDelay: 100, // style props @@ -140,7 +139,7 @@ export default class Omnibar extends React.PureComponent< render() { const maxHeight = this.props.maxViewableResults - ? this.props.maxViewableResults * this.props.rowHeight + ? this.props.maxViewableResults * DEFAULT_HEIGHT : null; return ( @@ -159,7 +158,6 @@ export default class Omnibar extends React.PureComponent< children: this.props.children, selectedIndex: this.state.selectedIndex, items: this.state.results, - rowHeight: this.props.rowHeight, maxHeight: maxHeight, style: this.props.resultStyle, onMouseEnterItem: this.handleMouseEnterItem, diff --git a/src/Results.tsx b/src/Results.tsx index b163d8f..aef607d 100644 --- a/src/Results.tsx +++ b/src/Results.tsx @@ -21,8 +21,6 @@ interface Props { onClickItem?: (e: any /* Event */) => void; // max container height maxHeight?: React.CSSLength; - // item row height - rowHeight?: React.CSSLength; // optional override container style style?: React.CSSProperties; } diff --git a/src/ResultsItem.tsx b/src/ResultsItem.tsx index 65b4a3e..0426209 100644 --- a/src/ResultsItem.tsx +++ b/src/ResultsItem.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { COLORS } from './constants'; +import { COLORS, DEFAULT_HEIGHT } from './constants'; import { AnchorItem } from './modifiers/anchor'; import AnchorRenderer from './modifiers/anchor/AnchorRenderer'; @@ -26,8 +26,8 @@ interface State { } const ITEM_STYLE: React.CSSProperties = { - height: 50, - lineHeight: '50px', + height: DEFAULT_HEIGHT, + lineHeight: `${DEFAULT_HEIGHT}px`, fontSize: 24, borderStyle: 'solid', borderColor: COLORS.DARKGRAY, diff --git a/src/constants.tsx b/src/constants.tsx index 4acb46d..013d513 100644 --- a/src/constants.tsx +++ b/src/constants.tsx @@ -19,3 +19,5 @@ export const KEYS = { }; export const BLUR_DELAY = 200; + +export const DEFAULT_HEIGHT = 50; diff --git a/src/hoc.tsx b/src/hoc.tsx index 83a6683..5780936 100644 --- a/src/hoc.tsx +++ b/src/hoc.tsx @@ -1,4 +1,5 @@ import * as React from 'react'; +import { DEFAULT_HEIGHT } from './constants'; import Microphone from './Microphone'; /** @@ -54,7 +55,7 @@ export function withVoice(Component: any): React.ComponentClass { top: 0, border: 0, backgroundColor: 'transparent', - lineHeight: '50px', + lineHeight: `${DEFAULT_HEIGHT}px`, fontSize: 24, paddingRight: 15, paddingTop: 0, diff --git a/typings/index.d.ts b/typings/index.d.ts index a503df1..c15e57c 100644 --- a/typings/index.d.ts +++ b/typings/index.d.ts @@ -40,8 +40,6 @@ declare namespace Omnibar { maxViewableResults?: number; // optional input placeholder text placeholder?: string; - // optional result item height - rowHeight?: number; // optional result list style override resultStyle?: React.CSSProperties; // options style on the root element