Skip to content

Commit

Permalink
fix(input): 修复系列细节问题
Browse files Browse the repository at this point in the history
  • Loading branch information
@jimczj
jimczj committed Aug 7, 2018
1 parent cb29641 commit e50da1b
Show file tree
Hide file tree
Showing 5 changed files with 159 additions and 99 deletions.
10 changes: 6 additions & 4 deletions src/components/form/index.scss
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
@import '../../style/theme/default.scss';

.at-form {
display: block;
padding-left: 30px;
background-color: #fff;
border-bottom: 1px solid #e5e5e5;
border-top: 1px solid #e5e5e5;
padding-left: $spacing-h-lg;
background-color: $color-bg;
border-bottom: $border;
border-top: $border;
overflow: hidden;
}
130 changes: 64 additions & 66 deletions src/components/input/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,36 +6,25 @@ import './index.scss'
/**
* @author:chenzeji
* @description 单行输入框
* @prop name {String} 输入框的唯一标识，传入点击title会聚焦输入框，小程序官方bug，暂时有问题
* @prop value {String|Number} 输入框值
* @prop placeholder {String} 提示字符
* @prop title {String} 输入框左侧标题，若传入为空，则不显示标题
* @prop maxlength {Number} 最大长度 default:200
* @prop backgroundColor {String} 背景颜色 default:#fff
* @prop maxlength {Number} 最大长度 default:140
* @prop disabled {Boolean} 是否禁止输入，禁止点击按钮 default: false
* @prop editable {Boolean} 是否可编辑 default: true
* @prop error {Boolean} 是否出现错误, default: false
* @prop clear {Boolean} 是否显示清除按钮, default: false
* @prop type {String} 输入框类型,可选为 text,number,password,phone default: text
* @prop type {String} 输入框类型,可选为 text,number,password,phone,idcard,digit default: text
* @prop autoFocus {Boolean} 是否自动聚焦 default:false
* @prop onChange {Function} 输入框值改变时触发的事件
* @prop onFocus {Function} 输入框被选中时触发的事件
* @prop onBlur {Function} 输入框失去焦点时触发的事件
* @prop onClickErrorIcon {Function} 点击错误按钮触发的事件
* @prop onErrorClick {Function} 点击错误按钮触发的事件
*/
class AtInput extends Taro.Component {
handleInput (e) {
const { value } = e.target
const { type } = this.props
let newValue = value
if (type === 'phone') {
newValue = value.replace(/\D/g, '').substring(0, 11)
const valueLen = newValue.length
if (valueLen > 3 && valueLen < 8) {
newValue = `${newValue.substr(0, 3)} ${newValue.substr(3)}`
} else if (valueLen >= 8) {
newValue = `${newValue.substr(0, 3)} ${newValue.substr(3, 4)} ${newValue.substr(7)}`
}
}
this.props.onChange(newValue, ...arguments)
this.props.onChange(e.target.value, ...arguments)
}
handleFocus (e) {
this.props.onFocus(e.target.value, ...arguments)
Expand All @@ -47,94 +36,103 @@ class AtInput extends Taro.Component {
this.props.onChange('', ...arguments)
}
handleClickErrIcon () {
this.props.onClickErrorIcon(...arguments)
}
transferType (type) {
if (type === 'phone') {
return 'text'
}
return type
this.props.onErrorClick(...arguments)
}
render () {
const { title, disabled, error, clear, type, placeholder, maxlength, autoFocus, value, backgroundColor } = this.props
const rootStyle = `background-color: ${backgroundColor};`
const rootCls = ['at-input']
const { name, type, maxlength, disabled, title, editable, error, clear, placeholder, autoFocus, value } = this.props
let newMaxlength = maxlength
let newType = type
let newDisabled = disabled
const containerCls = ['at-input__container']
if (error) {
rootCls.push('at-input--error')
containerCls.push('at-input--error')
}
if (disabled) {
rootCls.push('at-input--disabled')
containerCls.push('at-input--disabled')
}
if (type === 'phone') {
newMaxlength = 11
newType = 'number'
}
if (disabled === false && editable === false) {
newDisabled = true
}
return <View className={rootCls} style={rootStyle} >
{
title
? <Label className='at-input__title'>{title}</Label>
: null
}
<Input className='at-input__input'
type={this.transferType(type)}
placeholder={placeholder}
maxlength={maxlength}
autoFocus={autoFocus}
value={value}
disabled={disabled}
onInput={this.handleInput.bind(this)}
onChange={this.handleInput.bind(this)}
onFocus={this.handleFocus.bind(this)}
onBlur={this.handleBlur.bind(this)}
/>
{
clear && value
? <View className='at-input__icon' onClick={this.clearValue.bind(this)} >
<AtIcon value='close-circle' color='#ccc' size='15' />
</View>
: null
}
{
error
? <View className='at-input__icon' onClick={this.handleClickErrIcon.bind(this)} >
<AtIcon value='warning_fill' color='#e93b3d' size='15' />
</View>
: null
}
<View className='at-input__children'>{this.props.children}</View>
return <View className='at-input'>
<View className={containerCls}>
{
title
? <Label className='at-input__title' for={name}>{title}</Label>
: null
}
<Input className='at-input__input'
id={name}
type={newType}
placeholder={placeholder}
maxlength={newMaxlength}
autoFocus={autoFocus}
value={value}
disabled={newDisabled}
onInput={this.handleInput.bind(this)}
onChange={this.handleInput.bind(this)}
onFocus={this.handleFocus.bind(this)}
onBlur={this.handleBlur.bind(this)}
/>
{
clear && value
? <View className='at-input__icon' onClick={this.clearValue.bind(this)} >
<AtIcon value='close-circle' color='#ccc' size='15' />
</View>
: null
}
{
error
? <View className='at-input__icon' onClick={this.handleClickErrIcon.bind(this)} >
<AtIcon value='warning_fill' color='#e93b3d' size='15' />
</View>
: null
}
<View className='at-input__children'>{this.props.children}</View>
</View>
</View>
}
}
const defaultFunc = () => {}
AtInput.defaultProps = {
value: '',
name: '',
placeholder: '',
title: '',
maxlength: 200,
maxlength: 140,
type: 'text',
disabled: false,
editable: true,
error: false,
clear: false,
backgroundColor: '#fff',
autoFocus: false,
onChange: defaultFunc,
onFocus: defaultFunc,
onBlur: defaultFunc,
onClickErrorIcon: defaultFunc
onErrorClick: defaultFunc
}
AtInput.propTypes = {
value: PropTypes.oneOfType([
PropTypes.string,
PropTypes.number
]),
name: '',
placeholder: PropTypes.string,
title: PropTypes.string,
maxlength: PropTypes.number,
type: PropTypes.string,
disabled: PropTypes.bool,
editable: PropTypes.bool,
error: PropTypes.bool,
clear: PropTypes.bool,
backgroundColor: PropTypes.string,
autoFocus: PropTypes.bool,
onChange: PropTypes.func,
onFocus: PropTypes.func,
onBlur: PropTypes.func,
onClickErrorIcon: PropTypes.func,
onErrorClick: PropTypes.func,
}
export default AtInput
43 changes: 26 additions & 17 deletions src/components/input/index.scss
View file
Original file line number Diff line number Diff line change
@@ -1,50 +1,59 @@
@import '../../style/mixins/index.scss';
@import '../../style/theme/default.scss';

.at-input {
background-color: #fff;
padding: 22px 0;
display: flex;
align-items: center;
border-bottom: #e5e5e5 solid 1px;
background-color: $color-bg;
padding: $spacing-v-md 0;
border-bottom: $border;

&__container {
display: flex;
align-items: center;
}

&__input {
flex: 1;
font-size: 28px;
padding: 0 12px;
font-size: $font-size-base;
padding-right: $spacing-v-md;
display: inline-block;
vertical-align: middle;
}

input {
height: auto !important;
min-height: auto !important;
}

&__icon {
display: inline-block;
padding: 0 6px;
padding: 0 $spacing-v-md;
text-align: center;
font-size: 20px;
font-size: $font-size-base;
}

&__title {
width: 150px;
margin-right: 20px;
font-size: 28px;
margin-right: $spacing-h-md;
font-size: $font-size-base;
line-height: $line-height-zh;
vertical-align: middle;
text-align: left;
}

&__children {
display: inline-flex;
border-left: #e7e7e7 solid 1px;
border-left: $border;

> view,
div,
span,
text,
image,
.taro-img {
font-size: 28px;
font-size: $font-size-base;
display: inline-block;
padding: 0 20px;
color: #78a4fa;
text-align: center;
padding: 0 $spacing-v-md;
color: $color-brand-dark;
}

> image,
Expand All @@ -58,7 +67,7 @@
}

&--error {
color: #e93b3d;
color: $color-error;
}

&--disabled {
Expand Down
72 changes: 60 additions & 12 deletions src/pages/form/input/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,13 @@ export default class Index extends Taro.Component {
value5: '',
value6: '',
value7: '',
value8: '',
value9: '',
value10: '',
value12: '',
value13: '',
value14: '',
value15: '',
disabled: false,
second: 60
}
Expand All @@ -44,7 +51,7 @@ export default class Index extends Taro.Component {
// 使用setState 数值更新有延迟
this.state.disabled = false
this.setState({
second: this.props.second,
second: 60,
disabled: false
})
clearInterval(timer)
Expand Down Expand Up @@ -75,25 +82,66 @@ export default class Index extends Taro.Component {
{/* S Header */}
<DocsHeader title='Input 输入框'></DocsHeader>
{/* E Header */}

{/* S Body */}
<View className='doc-body'>
<View className='panel'>
<View className='panel__title'>基础输入框</View>
<View className='panel__title'>输入框标题</View>
<View className='panel__content no-padding'>
<View className='component-item'>
<AtForm>
<AtInput name='value1' title='标准五个字' type='text' placeholder='标准五个字' value={this.state.value1} onChange={this.handleInput.bind(this, 'value1')} />
<AtInput title='标题实在特别长就换行' placeholder='其他列保持正常间距' value={this.state.value2} onChange={this.handleInput.bind(this, 'value2')} />
<AtInput placeholder='无标题' value={this.state.value3} onChange={this.handleInput.bind(this, 'value3')} />
</AtForm>
</View>
</View>
</View>
<View className='panel'>
<View className='panel__title'>输入框类型</View>
<View className='panel__content no-padding'>
<View className='component-item'>
<AtForm>
<AtInput title='文本' type='text' placeholder='单行文本' value={this.state.value4} onChange={this.handleInput.bind(this, 'value4')} />
<AtInput title='数字' type='number' placeholder='请输入数字' value={this.state.value5} onChange={this.handleInput.bind(this, 'value5')} />
<AtInput title='密码' type='password' placeholder='密码不能少于10位数' value={this.state.value6} onChange={this.handleInput.bind(this, 'value6')} />
<AtInput title='身份证' type='idcard' placeholder='身份证号码' value={this.state.value7} onChange={this.handleInput.bind(this, 'value7')} />
<AtInput title='小数' type='digit' placeholder='请输入小数' value={this.state.value8} onChange={this.handleInput.bind(this, 'value8')} />
<AtInput title='手机号码' type='phone' placeholder='手机号码' value={this.state.value9} onChange={this.handleInput.bind(this, 'value9')} />
</AtForm>
</View>
</View>
</View>
<View className='panel'>
<View className='panel__title'>状态</View>
<View className='panel__content no-padding'>
<View className='component-item'>
<AtForm>
<AtInput disabled title='禁用' type='text' placeholder='禁止输入' value={this.state.value10} onChange={this.handleInput.bind(this, 'value10')} />
<AtInput error title='出现错误' type='text' placeholder='点击按钮触发回调' value={this.state.value11} onChange={this.handleInput.bind(this, 'value11')} onErrorClick={this.onClickErrorIcon.bind(this)} />
<AtInput editable={false} title='不可编辑' type='text' placeholder='不可编辑' value={this.state.value12} onChange={this.handleInput.bind(this, 'value12')} />
<AtInput clear title='清除按钮' type='text' placeholder='点击清除按钮清空内容' value={this.state.value13} onChange={this.handleInput.bind(this, 'value13')} />
</AtForm>
</View>
</View>
</View>
<View className='panel'>
<View className='panel__title'>自定义右边栏</View>
<View className='panel__content no-padding'>
<View className='component-item'>
<AtForm>
<AtInput title='标准五个字' type='text' clear placeholder='标准五个字' value={this.state.value1} onChange={this.handleInput.bind(this, 'value1')} />
<AtInput type='number' placeholder='请输入数字' value={this.state.value2} onChange={this.handleInput.bind(this, 'value2')} />
<AtInput title='密码' type='password' placeholder='密码不能少于10位数' value={this.state.value3} onChange={this.handleInput.bind(this, 'value3')} />
<AtInput title='标题实在特别长就换行' placeholder='其他列保持正常间距' value={this.state.value4} onChange={this.handleInput.bind(this, 'value4')} />
<AtInput title='出现错误' clear error onClickErrorIcon={this.onClickErrorIcon.bind(this)} placeholder='其他列保持正常间距' value={this.state.value5} onChange={this.handleInput.bind(this, 'value5')} />
<AtInput title='禁用' disabled placeholder='禁止输入' onChange={this.handleInput.bind(this)} />
<AtInput title='验证码' type='text' maxlength='4' clear placeholder='验证码' value={this.state.value7} onChange={this.handleInput.bind(this, 'value7')}>
<AtInput title='验证码' type='text' maxlength='4' clear placeholder='验证码' value={this.state.value14} onChange={this.handleInput.bind(this, 'value14')}>
<Image src={verificationCode} />
</AtInput>
<AtInput type='phone' clear placeholder='请输入手机号码' value={this.state.value6} onChange={this.handleInput.bind(this, 'value6')}>
<View style={this.state.disabled ? 'color:#e93b3d;' : ''} onClick={this.sendCode.bind(this)}>{this.showTipText()}</View>
<AtInput type='phone' clear placeholder='请输入手机号码' value={this.state.value15} onChange={this.handleInput.bind(this, 'value15')}>
<View
style={{
'color': this.state.disabled ? '#e93b3d' : '',
'width': '90px'
}}
onClick={this.sendCode.bind(this)}
>
{this.showTipText()}
</View>
</AtInput>
</AtForm>
</View>
Expand Down
Loading

0 comments on commit e50da1b

Please sign in to comment.