Skip to content
This repository has been archived by the owner on Oct 23, 2023. It is now read-only.

Commit

Permalink
feat: change text input to autsized textarea
Browse files Browse the repository at this point in the history
  • Loading branch information
marionebl committed Sep 10, 2018
1 parent a2bc26e commit 036bba5
Show file tree
Hide file tree
Showing 4 changed files with 38 additions and 9 deletions.
17 changes: 17 additions & 0 deletions package-lock.json

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

2 changes: 2 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -112,6 +112,7 @@
"@types/react": "16.4.7",
"@types/react-dom": "16.0.6",
"@types/react-helmet": "5.0.6",
"@types/react-textarea-autosize": "4.3.3",
"@types/read-pkg": "3.0.0",
"@types/readdir-enhanced": "2.2.0",
"@types/smoothscroll-polyfill": "0.3.0",
Expand Down Expand Up @@ -199,6 +200,7 @@
"react-outside-click-handler": "1.2.0",
"react-router": "4.2.0",
"react-select": "2.0.0-beta.6",
"react-textarea-autosize": "7.0.4",
"read-pkg": "3.0.0",
"readdir-enhanced": "2.2.1",
"readts": "0.2.0",
Expand Down
12 changes: 8 additions & 4 deletions src/components/property-input/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,12 @@ import * as React from 'react';
import { Color } from '../colors';
import { fonts } from '../fonts';
import { getSpace, SpaceSize } from '../space';
import styled from 'styled-components';
import styled, { css } from 'styled-components';

const INPUT_PADDING_RIGHT = (props: PropertyInputProps) =>
props.type === PropertyInputType.Number ? 0 : getSpace(SpaceSize.S);
props.type && props.type === PropertyInputType.Number ? 0 : getSpace(SpaceSize.S);

const StyledInput = styled.input`
export const PropertyInputStyles = css`
display: block;
box-sizing: border-box;
width: 100%;
Expand Down Expand Up @@ -42,13 +42,17 @@ const StyledInput = styled.input`
}
`;

const StyledInput = styled.input`
${PropertyInputStyles};
`;

export interface PropertyInputProps {
list?: string;
className?: string;
onBlur?: React.FocusEventHandler<HTMLInputElement>;
onChange?: React.ChangeEventHandler<HTMLInputElement>;
placeholder?: string;
type: PropertyInputType;
type?: PropertyInputType;
value?: string;
}

Expand Down
16 changes: 11 additions & 5 deletions src/components/property-item-string/index.tsx
Original file line number Diff line number Diff line change
@@ -1,16 +1,17 @@
import * as React from 'react';
import { PropertyInput, PropertyInputType } from '../property-input';
import { PropertyInputStyles } from '../property-input';
import { PropertyItem } from '../property-item';
import { Link2 } from 'react-feather';
import styled, { StyledComponentClass } from 'styled-components';
import { Color } from '../colors';
import * as TextareaAutosize from 'react-textarea-autosize';

export interface PropertyItemStringProps {
className?: string;
description?: string;
label: string;
onBlur?: React.FocusEventHandler<HTMLInputElement>;
onChange?: React.ChangeEventHandler<HTMLInputElement>;
onBlur?: React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
onChange?: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>;
placeholder?: string;
value?: string;
children?(renderProps: PropertyItemStringProps): JSX.Element | null;
Expand All @@ -33,12 +34,17 @@ export const LinkIcon: StyledComponentClass<{}, {}, any> = styled(Link2)`
}
`;

const StyledTextArea = styled(TextareaAutosize.default)`
resize: none;
${PropertyInputStyles};
`;

export const PropertyItemString: React.StatelessComponent<PropertyItemStringProps> = props => (
<PropertyItem description={props.description} label={props.label}>
<PropertyInput
<StyledTextArea
onChange={props.onChange}
onBlur={props.onBlur}
type={PropertyInputType.Text}
useCacheForDOMMeasurements
value={props.value || ''}
placeholder={props.placeholder}
/>
Expand Down

0 comments on commit 036bba5

Please sign in to comment.