artwork-react-native/lib/textarea-item/index-bak.js

artwork design master for react-native

// import React from 'react';
// import { View, Image, Text, TextInput, TouchableWithoutFeedback, StyleSheet } from 'react-native';
// import { TextAreaItemProps } from './PropsType';
// import TextAreaItemStyle, { ITextAreaItemStyle } from './style';
// import theme from '../style/theme';
// function fixControlledValue(value) {
//     if (typeof value === 'undefined' || value === null) {
//         return '';
//     }
//     return value;
// }
// export interface ITextAreaItemNativeProps extends TextAreaItemProps {
//     last?: boolean;
//     keyboardType?: string;
//     onContentSizeChange?: (e: any) => void;
//     styles?: ITextAreaItemStyle;
// }
// const TextAreaItemStyles = StyleSheet.create<any>(TextAreaItemStyle);
// export default class TextAreaItem extends React.Component<ITextAreaItemNativeProps, any> {
//     static defaultProps = {
//         onChange() {
//         },
//         onFocus() {
//         },
//         onBlur() {
//         },
//         onErrorClick() {
//         },
//         clear: true,
//         error: false,
//         editable: true,
//         rows: 1,
//         count: 0,
//         keyboardType: 'default',
//         autoHeight: false,
//         last: false,
//         styles: TextAreaItemStyles,
//     };
//     constructor(props) {
//         super(props);
//         this.state = {
//             inputCount: 0,
//             height: props.rows > 1 ? 6 * props.rows * 4 : theme.list_item_height,
//         };
//     }
//     onChange = (event) => {
//         const text = event.nativeEvent.text;
//         const { onChange } = this.props;
//         this.setState({
//             inputCount: text.length,
//         });
//         if (onChange) {
//             onChange(text);
//         }
//     }
//     onContentSizeChange = (event) => {
//         let height;
//         const { autoHeight, onContentSizeChange } = this.props;
//         const rows = this.props.rows as number;
//         if (autoHeight) {
//             height = event.nativeEvent.contentSize.height;
//         } else if (rows > 1) {
//             height = 6 * rows * 4;
//         } else {
//             height = theme.list_item_height;
//         }
//         this.setState({
//             height,
//         });
//         if (onContentSizeChange) {
//             onContentSizeChange(event);
//         }
//     }
//     render() {
//         const { rows, error, clear, count, autoHeight, last, onErrorClick, styles, style, ...restProps } = this.props;
//         const { value, defaultValue } = restProps;
//         const { inputCount } = this.state;
//         let valueProps;
//         if ('value' in this.props) {
//             valueProps = {
//                 value: fixControlledValue(value),
//             };
//         } else {
//             valueProps = {
//                 defaultValue,
//             };
//         }
//         const containerStyle = {
//             borderBottomWidth: last ? 0 : theme.border_width_sm,
//         };
//         const textAreaStyle = {
//             color: error ? '#f50' : theme.color_text_base,
//             paddingRight: error ? 2 * theme.h_spacing_lg : 0,
//         };
//         const maxLength = count! > 0 ? count : undefined;
//         return (
//             <View style={[styles!.container, containerStyle, { position: 'relative' }]}>
//                 <TextInput
//                     clearButtonMode={clear ? 'while-editing' : 'never'}
//                     underlineColorAndroid="transparent"
//                     style={[styles!.input, textAreaStyle, { height: Math.max(45, this.state.height) }, style]}
//                     {...restProps}
//                     {...valueProps}
//                     onChange={(event) => this.onChange(event)}
//                     onContentSizeChange={this.onContentSizeChange}
//                     multiline={rows! > 1 || autoHeight}
//                     numberOfLines={rows}
//                     maxLength={maxLength}
//                 />
//                 {error ? <TouchableWithoutFeedback onPress={onErrorClick}>
//                     <View style={[styles!.errorIcon]}>
//                         <Image
//                             source={require('../style/images/error.png')}
//                             style={{ width: theme.icon_size_xs, height: theme.icon_size_xs }}
//                         />
//                     </View>
//                 </TouchableWithoutFeedback> : null}
//                 {rows! > 1 && count! > 0 ? <View style={[styles!.count]}>
//                     <Text>
//                         {inputCount} / {count}
//                     </Text>
//                 </View> : null}
//             </View>
//         );
//     }
// }
"use strict";