Skip to content

Commit

Permalink
Merge branch 'dev' of github.com:NervJS/taro-ui into dev
Browse files Browse the repository at this point in the history
  • Loading branch information
@cos2004
cos2004 committed Sep 7, 2018
2 parents a89a713 + 24a8e48 commit 00bdb14
Show file tree
Hide file tree
Showing 14 changed files with 518 additions and 534 deletions.
104 changes: 53 additions & 51 deletions src/components/checkbox/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,16 +6,24 @@ import AtIcon from '../../components/icon/index'
import AtComponent from '../../common/component'
import './index.scss'

/**
* @author: chenzeji
* @description 多选框组件
* @prop onChange {Function} 监听数据改变事件
* @prop selectedList {Array} 被选中的选项列表 eg: ['苹果']
* @prop options {Array} 选项列表 eg: [{value:'apple', label: '苹果', desc:'这个苹果又大又甜'}]
*/
class AtCheckbox extends AtComponent {
export default class AtCheckbox extends AtComponent {
static defaultProps = {
style: '',
options: [],
selectedList: [],
onChange: () => { }
}

static propTypes = {
style: PropTypes.string,
options: PropTypes.array,
selectedList: PropTypes.array,
onChange: PropTypes.func,
}

handleClick (option) {
if (option.disabled) return

const value = option.value
const selectedList = new Set(this.props.selectedList)
if (!selectedList.has(value)) {
Expand All @@ -25,56 +33,50 @@ class AtCheckbox extends AtComponent {
}
this.props.onChange(Array.from(selectedList))
}

render () {
const { options, selectedList, style } = this.props
const {
options,
selectedList,
style
} = this.props

return <View className='at-checkbox' style={style}>
{
options.map(option => <View
key={option.value}
onClick={this.handleClick.bind(this, option)}
className={
option.disabled
? 'at-checkbox__option at-checkbox__option--disabled'
: 'at-checkbox__option'}
>
<View className='at-checkbox__option_wrap'>
<View className='at-checkbox__option_container'>
<View
className={
selectedList.includes(option.value)
? 'at-checkbox__icon at-checkbox__icon--selected'
: 'at-checkbox__icon'}
>
<View className='at-checkbox__icon_container'>
<AtIcon value='check' size='14' color='#fff' />
options.map(option => (
<View
key={option.value}
onClick={this.handleClick.bind(this, option)}
className={
option.disabled
? 'at-checkbox__option at-checkbox__option--disabled'
: 'at-checkbox__option'
}
>
<View className='at-checkbox__option_wrap'>
<View className='at-checkbox__option_container'>
<View
className={
selectedList.includes(option.value)
? 'at-checkbox__icon at-checkbox__icon--selected'
: 'at-checkbox__icon'
}
>
<View className='at-checkbox__icon_container'>
<AtIcon value='check' size='14' color='#fff' />
</View>
</View>
<View className='at-checkbox__title'>{option.label}</View>
</View>
<View className='at-checkbox__title'>{option.label}</View>
{
option.desc
? <View className='at-checkbox__desc'>{option.desc}</View>
: null
}
</View>
{
option.desc
? <View className='at-checkbox__desc'>{option.desc}</View>
: null
}
</View>
</View>)
</View>)
)
}
</View>
}
}
AtCheckbox.defaultProps = {
style: '',
options: [],
selectedList: [],
onChange: () => {}
}
AtCheckbox.propTypes = {
style: PropTypes.oneOfType([
PropTypes.object,
PropTypes.string
]),
options: PropTypes.array,
selectedList: PropTypes.array,
onChange: PropTypes.func,
}
export default AtCheckbox
39 changes: 17 additions & 22 deletions src/components/form/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,23 @@ import PropTypes from 'prop-types'
import AtComponent from '../../common/component'
import './index.scss'

class AtForm extends AtComponent {
const defaultFunc = () => { }

export default class AtForm extends AtComponent {
static defaultProps = {
style: '',
reportSubmit: false,
onSubmit: defaultFunc,
onReset: defaultFunc
}

static propTypes = {
style: PropTypes.string,
reportSubmit: PropTypes.bool,
onSubmit: PropTypes.func,
onReset: PropTypes.func
}

onSubmit () {
this.props.onSubmit(...arguments)
}
Expand All @@ -32,24 +48,3 @@ class AtForm extends AtComponent {
</Form>
}
}

const defaultFunc = () => {}

AtForm.defaultProps = {
style: '',
reportSubmit: false,
onSubmit: defaultFunc,
onReset: defaultFunc
}

AtForm.propTypes = {
style: PropTypes.oneOfType([
PropTypes.object,
PropTypes.string
]),
reportSubmit: PropTypes.bool,
onSubmit: PropTypes.func,
onReset: PropTypes.func
}

export default AtForm
86 changes: 46 additions & 40 deletions src/components/input-number/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,17 +6,31 @@ import AtIcon from '../../components/icon/index'
import AtComponent from '../../common/component'
import './index.scss'

/**
* @author:chenzeji
* @description 数字输入框
* @prop value {Number} 当前输入框值 default: 1
* @prop min {Number} 最小值 default: 0
* @prop max {Number} 最大值 default:100
* @prop step {Number} 每次点击改变的间隔大小 default:1
* @prop disabled {Boolean} 是否禁止点击 default: false
* @prop onChange {Function} 监听事件改变函数
*/
class AtInputNumber extends AtComponent {
export default class AtInputNumber extends AtComponent {
static defaultProps = {
style: '',
disabled: false,
value: 1,
width: 80,
min: 0,
max: 100,
step: 1,
size: '',
onChange: () => { }
}

static propTypes = {
style: PropTypes.string,
disabled: PropTypes.bool,
value: PropTypes.number,
width: PropTypes.number,
min: PropTypes.number,
max: PropTypes.number,
step: PropTypes.number,
size: PropTypes.string,
onChange: PropTypes.func
}

// 实现两数相加并保留小数点后最短尾数
static addNum (num1, num2) {
let sq1, sq2
Expand All @@ -33,6 +47,7 @@ class AtInputNumber extends AtComponent {
const m = Math.pow(10, Math.max(sq1, sq2))
return (Math.round(num1 * m) + Math.round(num2 * m)) / m
}

// 格式化数字，处理01变成1,并且不处理1. 这种情况
static parseValue (num) {
const numStr = num.toString()
Expand All @@ -41,81 +56,72 @@ class AtInputNumber extends AtComponent {
}
return num
}

handleMinus () {
const { disabled, value, min, step } = this.props
if (disabled) return

let nextValue = AtInputNumber.addNum(value, -step)
nextValue = nextValue > min ? nextValue : min
this.props.onChange(AtInputNumber.parseValue(nextValue))
}

handlePlus () {
const { disabled, value, max, step } = this.props
if (disabled) return

let nextValue = AtInputNumber.addNum(value, step)
nextValue = nextValue < max ? nextValue : max
this.props.onChange(AtInputNumber.parseValue(nextValue))
}

handleInput (e) {
const { value } = e.target
const { disabled, min, max } = this.props
if (disabled) return

let nextValue = value < max ? value : max
nextValue = nextValue > min ? nextValue : min
this.props.onChange(AtInputNumber.parseValue(nextValue))
}

render () {
const { style, width, disabled, value, min, max, size } = this.props
const inputStyle = `width: ${Taro.pxTransform(width)}`
const rootCls = ['at-input-number']
if (size) {
rootCls.push('at-input-number--lg')
}

return <View className={rootCls} style={style}>
<View
className={value <= min || disabled ? 'at-input-number__btn at-input-number--disabled' : 'at-input-number__btn'}
className={
value <= min || disabled
? 'at-input-number__btn at-input-number--disabled'
: 'at-input-number__btn'
}
onClick={this.handleMinus.bind(this)}
>
<AtIcon value='subtract' size='18' />
</View>
<Input className='at-input-number__input'
<Input
className='at-input-number__input'
style={inputStyle}
type='digit'
value={value}
disabled={disabled}
onInput={this.handleInput.bind(this)}
/>
<View
className={value >= max || disabled ? 'at-input-number__btn at-input-number--disabled' : 'at-input-number__btn'}
className={
value >= max || disabled
? 'at-input-number__btn at-input-number--disabled'
: 'at-input-number__btn'
}
onClick={this.handlePlus.bind(this)}
>
<AtIcon value='add' size='18' />
</View>
</View>
}
}
AtInputNumber.defaultProps = {
style: '',
disabled: false,
value: 1,
width: 80,
min: 0,
max: 100,
step: 1,
size: '',
onChange: () => {}
}
AtInputNumber.propTypes = {
style: PropTypes.oneOfType([
PropTypes.object,
PropTypes.string
]),
disabled: PropTypes.bool,
value: PropTypes.number,
width: PropTypes.number,
min: PropTypes.number,
max: PropTypes.number,
step: PropTypes.number,
size: PropTypes.string,
onChange: PropTypes.func
}
export default AtInputNumber
Loading

0 comments on commit 00bdb14

Please sign in to comment.