feat: 新增表单组件

jd-opensource · Jul 19, 2018 · c8b1fa3 · c8b1fa3
1 parent 6ffbf14
commit c8b1fa3
Show file tree

Hide file tree

Showing 27 changed files with 1,242 additions and 130 deletions.
diff --git a/.gitignore b/.gitignore
@@ -5,5 +5,5 @@ yarn.lock
 package-lock.json
 
 .temp
-
-.vscode
+.DS_Store
+.vscode
diff --git a/package.json b/package.json
@@ -1,49 +1,50 @@
 {
-  "name": "taro-ui-examples",
-  "version": "1.0.0",
-  "private": true,
-  "description": "",
-  "main": "index.js",
-  "scripts": {
-    "build:weapp": "taro build --type weapp",
-    "build:h5": "taro build --type h5",
-    "dev:weapp": "npm run build:weapp -- --watch",
-    "dev:h5": "npm run build:h5 -- --watch",
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "author": "",
-  "license": "MIT",
-  "dependencies": {
-    "@tarojs/components": "latest",
-    "@tarojs/router": "latest",
-    "@tarojs/taro": "latest",
-    "@tarojs/taro-h5": "latest",
-    "@tarojs/taro-weapp": "latest",
-    "lodash": "^4.17.10",
-    "nervjs": "^1.3.0"
-  },
-  "devDependencies": {
-    "@tarojs/cli": "latest",
-    "@tarojs/plugin-babel": "latest",
-    "@tarojs/plugin-csso": "latest",
-    "@tarojs/plugin-sass": "latest",
-    "@tarojs/plugin-uglifyjs": "latest",
-    "@tarojs/webpack-runner": "latest",
-    "babel-eslint": "^8.2.3",
-    "babel-plugin-transform-class-properties": "^6.24.1",
-    "babel-plugin-transform-decorators-legacy": "^1.3.4",
-    "babel-plugin-transform-object-rest-spread": "^6.26.0",
-    "babel-preset-env": "^1.6.1",
-    "eslint": "^4.19.1",
-    "eslint-config-taro": "latest",
-    "eslint-plugin-import": "^2.12.0",
-    "eslint-plugin-react": "^7.8.2",
-    "eslint-plugin-taro": "latest",
-    "glob": "^7.1.2",
-    "gulp": "^3.9.1",
-    "gulp-clean": "^0.4.0",
-    "gulp-concat": "^2.6.1",
-    "gulp-sass": "^4.0.1",
-    "node-fs-extra": "^0.8.2"
-  }
+	"name": "taro-ui-examples",
+	"version": "1.0.0",
+	"private": true,
+	"description": "",
+	"main": "index.js",
+	"scripts": {
+		"build:weapp": "taro build --type weapp",
+		"build:h5": "taro build --type h5",
+		"dev:weapp": "npm run build:weapp -- --watch",
+		"dev:h5": "npm run build:h5 -- --watch",
+		"test": "echo \"Error: no test specified\" && exit 1"
+	},
+	"author": "",
+	"license": "MIT",
+	"dependencies": {
+		"@tarojs/components": "0.0.70",
+		"@tarojs/router": "0.0.70",
+		"@tarojs/taro": "0.0.70",
+		"@tarojs/taro-h5": "0.0.70",
+		"@tarojs/taro-weapp": "0.0.70",
+		"lodash": "^4.17.10",
+		"nervjs": "^1.3.0",
+		"prop-types": "^15.6.2"
+	},
+	"devDependencies": {
+		"@tarojs/cli": "0.0.70",
+		"@tarojs/plugin-babel": "0.0.70",
+		"@tarojs/plugin-csso": "0.0.70",
+		"@tarojs/plugin-sass": "0.0.70",
+		"@tarojs/plugin-uglifyjs": "0.0.70",
+		"@tarojs/webpack-runner": "0.0.70",
+		"babel-eslint": "^8.2.3",
+		"babel-plugin-transform-class-properties": "^6.24.1",
+		"babel-plugin-transform-decorators-legacy": "^1.3.4",
+		"babel-plugin-transform-object-rest-spread": "^6.26.0",
+		"babel-preset-env": "^1.6.1",
+		"eslint": "^4.19.1",
+		"eslint-config-taro": "0.0.70",
+		"eslint-plugin-import": "^2.12.0",
+		"eslint-plugin-react": "^7.8.2",
+		"eslint-plugin-taro": "0.0.70",
+		"glob": "^7.1.2",
+		"gulp": "^3.9.1",
+		"gulp-clean": "^0.4.0",
+		"gulp-concat": "^2.6.1",
+		"gulp-sass": "^4.0.1",
+		"node-fs-extra": "^0.8.2"
+	}
 }
diff --git a/src/app.js b/src/app.js
@@ -5,7 +5,7 @@ import './app.scss'
 
 class App extends Component {
   config = {
-    pages: ['pages/index/index', 'pages/toast/index'],
+    pages: ['pages/index/index', 'pages/toast/index', 'pages/input/index'],
     window: {
       backgroundTextStyle: 'light',
       navigationBarBackgroundColor: '#fff',

diff --git a/src/components/Inputnumber/index.js b/src/components/Inputnumber/index.js
@@ -0,0 +1,67 @@
+import Taro from '@tarojs/taro'
+import { View, Input } from '@tarojs/components'
+import PropTypes from 'prop-types'
+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 onChange {Function} 监听事件改变函数
+ */
+class AtInputNumber extends Taro.Component {
+  static addNum(num1, num2) {
+    let sq1, sq2, m;
+    try {
+      sq1 = num1.toString().split('.')[1].length;
+    }
+    catch (e) {
+      sq1 = 0;
+    }
+    try {
+      sq2 = num2.toString().split('.')[1].length;
+    }
+    catch (e) {
+      sq2 = 0;
+    }
+    m = Math.pow(10, Math.max(sq1, sq2));
+    return (Math.round(num1 * m) + Math.round(num2 * m)) / m;
+  }
+  handleMinus(){
+    let value = AtInputNumber.addNum(this.props.value, - this.props.step)
+    value = value > this.props.min ? value : this.props.min
+    this.props.onChange({ value: value })
+  }
+  handlePlus() {
+    let value = AtInputNumber.addNum(this.props.value, this.props.step)
+    value = value < this.props.max ? value : this.props.max
+    this.props.onChange({ value: value })
+  }
+  render() {
+    return <View className='at-inputnumber'>
+      <View className={this.props.value <= this.props.min ? 'at-inputnumber__btn at-inputnumber__btn--disabled' : 'at-inputnumber__btn'}  onClick={this.handleMinus.bind(this)}>-</View>
+      <Input className='at-inputnumber__input'
+        type='number'
+        value={this.props.value} />
+      <View className={this.props.value >= this.props.max ? 'at-inputnumber__btn at-inputnumber__btn--disabled' : 'at-inputnumber__btn'} onClick={this.handlePlus.bind(this)}>+</View>
+    </View>
+  }
+}
+AtInputNumber.defaultProps = {
+  value: 1,
+  min: 0,
+  max: 100,
+  step: 1,
+  onChange: () => {}
+}
+AtInputNumber.propTypes = {
+  value: PropTypes.number,
+  min: PropTypes.number,
+  max: PropTypes.number,
+  step: PropTypes.number,
+  onChange: PropTypes.func
+}
+export default AtInputNumber
diff --git a/src/components/Inputnumber/index.scss b/src/components/Inputnumber/index.scss
@@ -0,0 +1,28 @@
+.at-inputnumber {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: #e5e5e5 solid 1px;
+  border-radius: 8px;
+  width: 300px;
+  background-color: #fff;
+  .at-inputnumber__btn,.at-inputnumber-text {
+    padding: 13px;
+  }
+  .at-inputnumber__btn {
+    flex:1;
+    text-align: center;
+    color: #6190e8;
+    cursor: pointer;
+    &--disabled {
+      color: #e5e5e5;
+    }
+  }
+  .at-inputnumber__input {
+    font-size: 30px;
+    flex:2;
+    text-align: center;
+    border-left: #e5e5e5 solid 1px;
+    border-right: #e5e5e5 solid 1px;
+  }
+}
diff --git a/src/components/actionInput/index.js b/src/components/actionInput/index.js
@@ -0,0 +1,98 @@
+import Taro from '@tarojs/taro'
+import { View, Input, Icon } from '@tarojs/components'
+import PropTypes from 'prop-types'
+import './index.scss'
+
+/**
+ * @author: chenzeji
+ * @description 带有点击动作的input输入框
+ * @prop second {Number} 倒计时，单位：秒 default:60
+ * @prop maxlength {Number} 输入长度最大值 default:200
+ * @prop placeholder {String} 提示字符
+ * @prop actionName {String} 点击操作的文案
+ * @prop onChange {Function} input数据改变触发事件
+ * @prop onClick {Function} 点击右边按钮触发的事件
+ */
+class AtActionInput extends Taro.Component {
+  constructor() {
+    super(...arguments)
+    this.state = {
+      second: this.props.second ? parseInt(this.props.second): 60,
+      disabled: false
+    }
+  }
+  handleClick() {
+    if (this.state.disabled) return
+
+    this.props.onClick()
+    // 使用setState 数值更新有延迟
+    this.state.disabled = true
+    // 倒计时
+    const timer = setInterval(() => {
+      if (this.state.second>0) {
+        // 使用setState 数值更新有延迟
+        this.state.second--
+        this.setState({
+          second: this.state.second
+        })
+      } else {
+        // 使用setState 数值更新有延迟
+        this.state.disabled = false
+        this.setState({
+          second: this.props.second ? parseInt(this.props.second) : 60,
+          disabled: false
+        })
+        clearInterval(timer)
+      }
+    },1000)
+  }
+  clearValue() {
+    this.props.onChange({value:''})
+  }
+  handleChange(e) {
+    this.props.onChange({ value: e.target.value })
+  }
+  showTipText() {
+    return this.state.disabled ? this.state.second + 's后重试' : this.props.actionName
+  }
+  render() {
+    return <View className='at-actioninput'>
+      <Input className={this.props.actionName ? 'at-actioninput__input' : 'at-actioninput__input at-actioninput__input--withoutaction'}
+        value={this.props.value}
+        type='text'
+        placeholder={this.props.placeholder}
+        maxlength={this.props.maxlength}
+        onInput={this.handleChange.bind(this)} />
+      <View className='at-actioninput__action'>
+        {this.props.value && this.props.value.length
+          ? <Icon className='at-actioninput__icon' size='15' type='clear' onClick={this.clearValue.bind(this)} />
+          : null
+        }
+        {this.props.actionName
+          ? <View className='at-actioninput__tip' onClick={this.handleClick.bind(this)}>
+            {this.showTipText()}
+            </View>
+          : null
+        }
+      </View>
+    </View>
+  }
+}
+AtActionInput.defaultProps = {
+  second: 60,
+  maxlength: 200,
+  placeholder: '',
+  actionName: '',
+  onClick: () => {},
+  onChange: () => {}
+}
+AtActionInput.propTypes = {
+  second: PropTypes.number,
+  maxlength: PropTypes.number,
+  placeholder: PropTypes.string,
+  actionName: PropTypes.string,
+  selectedList: PropTypes.array,
+  onClick: PropTypes.func,
+  onChange: PropTypes.func
+}
+export default AtActionInput
diff --git a/src/components/actionInput/index.scss b/src/components/actionInput/index.scss
@@ -0,0 +1,35 @@
+.at-actioninput {
+  margin:10px;
+  padding: 22px 0 22px 20px;
+  border-radius: 8px;
+  background-color: #f8f8f8;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  .at-actioninput__input {
+    display: inline-flex;
+    font-size: 28px;
+    min-width: 50%;
+    &--withoutaction {
+      width: 90%;
+    }
+  }
+  .at-actioninput__action {
+    display: inline-flex;
+    align-items: center;
+    justify-content: flex-end;
+    .at-actioninput__icon {
+      padding: 0 20px;
+    }
+    .at-actioninput__tip {
+      font-size: 24px;
+      display: inline-flex;
+      border-left: #e7e7e7 solid 1px;
+      padding: 0 20px;
+      color:#e93b3d;
+      &--disabled {
+        opacity: 0.5;
+      }
+    }
+  }
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -5,5 +5,5 @@ yarn.lock @@
     package-lock.json
     .temp
-    .vscode
+    .DS_Store
+    .vscode