Skip to content

Commit

Permalink
Merge pull request ant-design#6138 from ant-design/fix-typescript
Browse files Browse the repository at this point in the history 
refactor: extract Input.Textarea
  • Loading branch information
@afc163
afc163 authored Jul 4, 2017
2 parents c7be13b + fe33e76 commit 340cbda
Show file tree
Hide file tree
Showing 10 changed files with 201 additions and 134 deletions.
149 changes: 38 additions & 111 deletions components/input/Input.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import React from 'react';
import { Component, cloneElement } from 'react';
import React, { Component, cloneElement } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import calculateNodeHeight from './calculateNodeHeight';
import assign from 'object-assign';
import omit from 'omit.js';
import Group from './Group';
import Search from './Search';
import TextArea from './TextArea';

function fixControlledValue(value) {
if (typeof value === 'undefined' || value === null) {
Expand All @@ -13,63 +13,46 @@ function fixControlledValue(value) {
return value;
}

function onNextFrame(cb) {
if (window.requestAnimationFrame) {
return window.requestAnimationFrame(cb);
}
return window.setTimeout(cb, 1);
}

function clearNextFrameAction(nextFrameId) {
if (window.cancelAnimationFrame) {
window.cancelAnimationFrame(nextFrameId);
} else {
window.clearTimeout(nextFrameId);
}
}

export interface AutoSizeType {
minRows?: number;
maxRows?: number;
}

export interface InputProps {
export interface AbstractInputProps {
prefixCls?: string;
className?: string;
defaultValue?: any;
value?: any;
style?: React.CSSProperties;
}

export interface InputProps extends AbstractInputProps {
placeholder?: string;
type?: string;
id?: number | string;
name?: string;
value?: any;
defaultValue?: any;
placeholder?: string;
size?: 'large' | 'default' | 'small';
disabled?: boolean;
readOnly?: boolean;
addonBefore?: React.ReactNode;
addonAfter?: React.ReactNode;
onPressEnter?: React.FormEventHandler<any>;
onKeyDown?: React.FormEventHandler<any>;
onChange?: React.FormEventHandler<any>;
onPressEnter?: React.FormEventHandler<any>;
onClick?: React.FormEventHandler<any>;
onFocus?: React.FormEventHandler<any>;
onBlur?: React.FormEventHandler<any>;
autosize?: boolean | AutoSizeType;
autoComplete?: 'on' | 'off';
style?: React.CSSProperties;
prefix?: React.ReactNode;
suffix?: React.ReactNode;
spellCheck?: boolean;
autoFocus?: boolean;
}

export default class Input extends Component<InputProps, any> {
static Group: any;
static Search: any;
static Group: typeof Group;
static Search: typeof Search;
static TextArea: typeof TextArea;

static defaultProps = {
disabled: false,
prefixCls: 'ant-input',
type: 'text',
autosize: false,
disabled: false,
};

static propTypes = {
Expand All @@ -95,30 +78,10 @@ export default class Input extends Component<InputProps, any> {
suffix: PropTypes.node,
};

nextFrameActionId: number;
refs: {
input: any;
};

state = {
textareaStyles: null,
isFocus: false,
input: HTMLInputElement;
};

componentDidMount() {
this.resizeTextarea();
}

componentWillReceiveProps(nextProps) {
// Re-render with the new content then recalculate the height as required.
if (this.props.value !== nextProps.value) {
if (this.nextFrameActionId) {
clearNextFrameAction(this.nextFrameActionId);
}
this.nextFrameActionId = onNextFrame(this.resizeTextarea);
}
}

handleKeyDown = (e) => {
const { onPressEnter, onKeyDown } = this.props;
if (e.keyCode === 13 && onPressEnter) {
Expand All @@ -129,36 +92,18 @@ export default class Input extends Component<InputProps, any> {
}
}

handleTextareaChange = (e) => {
if (!('value' in this.props)) {
this.resizeTextarea();
}
const onChange = this.props.onChange;
if (onChange) {
onChange(e);
}
}

resizeTextarea = () => {
const { type, autosize } = this.props;
if (type !== 'textarea' || !autosize || !this.refs.input) {
return;
}
const minRows = autosize ? (autosize as AutoSizeType).minRows : null;
const maxRows = autosize ? (autosize as AutoSizeType).maxRows : null;
const textareaStyles = calculateNodeHeight(this.refs.input, false, minRows, maxRows);
this.setState({ textareaStyles });
}

focus() {
this.refs.input.focus();
}

blur() {
this.refs.input.blur();
}

renderLabeledInput(children) {
const props = this.props;

// Not wrap when there is not addons
if (props.type === 'textarea' || (!props.addonBefore && !props.addonAfter)) {
if ((!props.addonBefore && !props.addonAfter)) {
return children;
}

Expand Down Expand Up @@ -207,8 +152,7 @@ export default class Input extends Component<InputProps, any> {

renderLabeledIcon(children) {
const { props } = this;

if (props.type === 'textarea' || !('prefix' in props || 'suffix' in props)) {
if (!('prefix' in props || 'suffix' in props)) {
return children;
}

Expand All @@ -234,23 +178,18 @@ export default class Input extends Component<InputProps, any> {
}

renderInput() {
const props = assign({}, this.props);
const props = this.props;
// Fix https://fb.me/react-unknown-prop
const otherProps = omit(this.props, [
const otherProps = omit(props, [
'prefixCls',
'onPressEnter',
'autosize',
'addonBefore',
'addonAfter',
'prefix',
'suffix',
]);

const prefixCls = props.prefixCls;
if (!props.type) {
return props.children;
}

const inputClassName = classNames(prefixCls, {
[`${prefixCls}-sm`]: props.size === 'small',
[`${prefixCls}-lg`]: props.size === 'large',
Expand All @@ -262,32 +201,20 @@ export default class Input extends Component<InputProps, any> {
// specify either the value prop, or the defaultValue prop, but not both.
delete otherProps.defaultValue;
}

switch (props.type) {
case 'textarea':
return (
<textarea
{...otherProps}
style={assign({}, props.style, this.state.textareaStyles)}
className={inputClassName}
onKeyDown={this.handleKeyDown}
onChange={this.handleTextareaChange}
ref="input"
/>
);
default:
return this.renderLabeledIcon(
<input
{...otherProps}
className={inputClassName}
onKeyDown={this.handleKeyDown}
ref="input"
/>,
);
}
return this.renderLabeledIcon(
<input
{...otherProps}
className={inputClassName}
onKeyDown={this.handleKeyDown}
ref="input"
/>,
);
}

render() {
if (this.props.type === 'textarea') {
return <TextArea {...this.props as any} ref="input" />;
}
return this.renderLabeledInput(this.renderInput());
}
}
14 changes: 4 additions & 10 deletions components/input/Search.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,10 @@
import React from 'react';
import classNames from 'classnames';
import Input from './Input';
import Input, { AbstractInputProps } from './Input';
import Icon from '../icon';

export interface SearchProps {
className?: string;
export interface SearchProps extends AbstractInputProps {
placeholder?: string;
prefixCls?: string;
style?: React.CSSProperties;
defaultValue?: any;
value?: any;
onSearch?: (value: string) => any;
onChange?: React.FormEventHandler<any>;
size?: 'large' | 'default' | 'small';
Expand All @@ -21,15 +16,14 @@ export interface SearchProps {
export default class Search extends React.Component<SearchProps, any> {
static defaultProps = {
prefixCls: 'ant-input-search',
onSearch() {},
};
input: any;
onSearch = () => {
const { onSearch } = this.props;
if (onSearch) {
onSearch(this.input.refs.input.value);
}
this.input.refs.input.focus();
this.input.focus();
}
render() {
const { className, prefixCls, ...others } = this.props;
Expand All @@ -45,8 +39,8 @@ export default class Search extends React.Component<SearchProps, any> {
<Input
onPressEnter={this.onSearch}
{...others}
suffix={searchSuffix}
className={classNames(prefixCls, className)}
suffix={searchSuffix}
ref={node => this.input = node}
/>
);
Expand Down
Loading

0 comments on commit 340cbda

Please sign in to comment.