Skip to content

Commit

Permalink
consolidate input styles (#15)
Browse files Browse the repository at this point in the history 
* consolidate input styles

* update voice hoc props

* fix readme
  • Loading branch information
@vutran
vutran committed Dec 16, 2017
1 parent a8e758f commit 036a7eb
Show file tree
Hide file tree
Showing 7 changed files with 27 additions and 54 deletions.
30 changes: 14 additions & 16 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -187,22 +187,20 @@ const VoiceBar = withVoice(Omnibar);
## Props API
| Prop | Type | Required? | Description |
| :------------------- | :----------------- | :-------- | :------------------------------------------------------------------------------------- |
| `children` | `Function` | | Optional rendering function for each result item. Arguments: `{ item }` |
| `extensions` | `Array<Extension>` | \* | An array of extensions to be loaded. |
| `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). |
| `width` | `number` | | The width of the omnibar |
| `height` | `number` | | The height of the omnibar |
| `inputStyle` | `object` | | Style object override for the input element |
| `rowHeight` | `number` | | The height for each result row item |
| `rowStyle` | `object` | | Style object override for each result row item |
| `resultStyle` | `object` | | Style object override for the result container |
| `onAction` | `Function` | | Override the defaut action callback when an item is executed. Arguments: `item` |
| `inputDelay` | `number` | | Override the default input delay used for querying extensions (Default: 100ms) |
| `defaultValue` | `string` | | Optional value to send to the Omnibar. |
| Prop | Type | Required? | Description |
| :------------------- | :-------------------- | :-------- | :------------------------------------------------------------------------------------- |
| `children` | `Function` | | Optional rendering function for each result item. Arguments: `{ item }` |
| `style` | `React.CSSProperties` | | Style object override for the `<input />` element |
| `extensions` | `Array<Extension>` | \* | An array of extensions to be loaded. |
| `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 |
| `rowStyle` | `object` | | Style object override for each result row item |
| `resultStyle` | `object` | | Style object override for the result container |
| `onAction` | `Function` | | Override the defaut action callback when an item is executed. Arguments: `item` |
| `inputDelay` | `number` | | Override the default input delay used for querying extensions (Default: 100ms) |
| `defaultValue` | `string` | | Optional value to send to the Omnibar. |
## Contributing
Expand Down
3 changes: 1 addition & 2 deletions __tests__/Input.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,8 +48,7 @@ describe('Input', () => {
const tree = renderer
.create(
<Input
width={200}
height={150}
style={{ width: 200, height: 150 }}
onKeyDown={handleKeyDown}
onChange={handleChange}
onFocus={handleFocus}
Expand Down
7 changes: 4 additions & 3 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

12 changes: 0 additions & 12 deletions src/Input.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,6 @@ interface Props {
onFocus: (evt: any /* Event */) => void;
// optional input placeholder text
placeholder?: string;
// optional input width
width?: number;
// optional input height
height?: number;
// optional style override
style?: React.CSSProperties;
// optional default value
Expand Down Expand Up @@ -54,14 +50,6 @@ export default class Input extends React.PureComponent<Props, State> {
render() {
const style = { ...INPUT_STYLE, ...this.props.style };

if (this.props.width) {
style.width = this.props.width;
}

if (this.props.height) {
style.height = this.props.height;
}

return (
<input
type="text"
Expand Down
4 changes: 1 addition & 3 deletions src/Omnibar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -147,9 +147,7 @@ export default class Omnibar<T> extends React.PureComponent<
<div style={this.props.rootStyle}>
{React.createElement(Input, {
defaultValue: this.props.defaultValue,
width: this.props.width,
height: this.props.height,
style: this.props.inputStyle,
style: this.props.style,
placeholder: this.props.placeholder,
onChange: this.handleChange,
onKeyDown: this.handleKeyDown,
Expand Down
17 changes: 5 additions & 12 deletions src/hoc.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,20 +5,13 @@ import Microphone from './Microphone';
* Adds voice commands to your Omnibar
*/
export function withVoice(Component: any): React.ComponentClass<any> {
interface VoiceProps {
height?: number;
inputStyle?: React.CSSProperties;
}
interface VoiceProps extends Omnibar.Props<any> {}
interface VoiceState {
value: string;
isSpeaking: boolean;
}

return class VoiceOmnibar extends React.Component<VoiceProps, VoiceState> {
static defaultProps = {
height: 50,
};

state: VoiceState = {
value: '',
isSpeaking: false,
Expand Down Expand Up @@ -61,26 +54,26 @@ export function withVoice(Component: any): React.ComponentClass<any> {
top: 0,
border: 0,
backgroundColor: 'transparent',
lineHeight: `${this.props.height}px`,
lineHeight: '50px',
fontSize: 24,
paddingRight: 15,
paddingTop: 0,
paddingBottom: 0,
paddingLeft: 15,
};

const inputStyle: React.CSSProperties = this.props.inputStyle || {};
const style: React.CSSProperties = this.props.style || {};

if (this.state.isSpeaking) {
inputStyle.backgroundColor = 'rgba(0, 255, 0, 0.075)';
style.backgroundColor = 'rgba(0, 255, 0, 0.075)';
}

return (
<div style={base}>
<Component
{...this.props}
defaultValue={this.state.value}
inputStyle={inputStyle}
style={style}
/>
<button onClick={this.speak} style={mic}>
<Microphone width={24} height={24} active={this.state.isSpeaking} />
Expand Down
8 changes: 2 additions & 6 deletions typings/index.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,8 @@ declare namespace Omnibar {
interface Props<T> {
// results renderer function
children?: ResultRenderer<T> | React.ReactNode;
// optional input bar style override
style?: React.CSSProperties;
// list of extensions
extensions: Array<Omnibar.Extension<T>>;
// max items
Expand All @@ -22,12 +24,6 @@ declare namespace Omnibar {
maxViewableResults?: number;
// optional input placeholder text
placeholder?: string;
// optional input bar width
width?: number;
// optional input bar height
height?: number;
// optional input bar style override
inputStyle?: React.CSSProperties;
// optional result item height
rowHeight?: number;
// optional result item style override
Expand Down

0 comments on commit 036a7eb

Please sign in to comment.