From afca35fe2d19cd54d1c9bceda52bd9c209d83c3e Mon Sep 17 00:00:00 2001 From: jimczj Date: Fri, 28 Sep 2018 19:01:16 +0800 Subject: [PATCH] =?UTF-8?q?feat(search-bar):=20=E6=8C=89=E7=85=A7=E8=AE=BE?= =?UTF-8?q?=E8=AE=A1=E7=A8=BF=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 26 +++++++++---------- .../__snapshots__/index.test.js.snap | 18 ++++++------- src/components/search-bar/index.js | 18 +++++-------- src/components/search-bar/index.scss | 24 ++++++++++------- src/components/search-bar/index.test.js | 14 +--------- src/pages/form/search-bar/index.js | 7 +---- 6 files changed, 45 insertions(+), 62 deletions(-) diff --git a/package.json b/package.json index 9c633e0e1..b1647444e 100644 --- a/package.json +++ b/package.json @@ -65,17 +65,17 @@ "@commitlint/cli": "^7.0.0", "@commitlint/config-conventional": "^7.0.1", "@mapbox/jsxtreme-markdown-loader": "^0.8.3", - "@tarojs/cli": "1.0.2", - "@tarojs/components": "1.0.2", - "@tarojs/plugin-babel": "1.0.2", - "@tarojs/plugin-csso": "1.0.2", - "@tarojs/plugin-sass": "1.0.2", - "@tarojs/plugin-uglifyjs": "1.0.2", - "@tarojs/router": "1.0.2", - "@tarojs/taro": "1.0.2", - "@tarojs/taro-h5": "1.0.2", - "@tarojs/taro-weapp": "1.0.2", - "@tarojs/webpack-runner": "1.0.2", + "@tarojs/cli": "1.0.5", + "@tarojs/components": "1.0.5", + "@tarojs/plugin-babel": "1.0.5", + "@tarojs/plugin-csso": "1.0.5", + "@tarojs/plugin-sass": "1.0.5", + "@tarojs/plugin-uglifyjs": "1.0.5", + "@tarojs/router": "1.0.5", + "@tarojs/taro": "1.0.5", + "@tarojs/taro-h5": "1.0.5", + "@tarojs/taro-weapp": "1.0.5", + "@tarojs/webpack-runner": "1.0.5", "at-ui-style": "^1.5.1", "autoprefixer": "^9.0.2", "babel-core": "^7.0.0-0", @@ -95,11 +95,11 @@ "css-loader": "^1.0.0", "eslint": "^4.19.1", "eslint-config-o2team": "^0.1.6", - "eslint-config-taro": "1.0.2", + "eslint-config-taro": "1.0.5", "eslint-plugin-import": "^2.12.0", "eslint-plugin-jest": "^21.21.0", "eslint-plugin-react": "^7.8.2", - "eslint-plugin-taro": "1.0.2", + "eslint-plugin-taro": "1.0.5", "favicons-webpack-plugin": "0.0.9", "file-loader": "^1.1.11", "front-matter": "^2.3.0", diff --git a/src/components/search-bar/__snapshots__/index.test.js.snap b/src/components/search-bar/__snapshots__/index.test.js.snap index 455951a21..9306cdb28 100644 --- a/src/components/search-bar/__snapshots__/index.test.js.snap +++ b/src/components/search-bar/__snapshots__/index.test.js.snap @@ -1,19 +1,19 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`AtSearchBar Snap render AtSearchBar -- props actionName 1`] = `"
actionName
"`; +exports[`AtSearchBar Snap render AtSearchBar -- props actionName 1`] = `"
搜索
actionName
"`; -exports[`AtSearchBar Snap render AtSearchBar -- props disabled 1`] = `"
取消
"`; +exports[`AtSearchBar Snap render AtSearchBar -- props disabled 1`] = `"
搜索
搜索
"`; -exports[`AtSearchBar Snap render AtSearchBar -- props disabled 2`] = `"
取消
"`; +exports[`AtSearchBar Snap render AtSearchBar -- props disabled 2`] = `"
搜索
搜索
"`; -exports[`AtSearchBar Snap render AtSearchBar -- props focus 1`] = `"
取消
"`; +exports[`AtSearchBar Snap render AtSearchBar -- props focus 1`] = `"
搜索
搜索
"`; -exports[`AtSearchBar Snap render AtSearchBar -- props maxlength 1`] = `"
取消
"`; +exports[`AtSearchBar Snap render AtSearchBar -- props maxlength 1`] = `"
搜索
搜索
"`; -exports[`AtSearchBar Snap render AtSearchBar -- props placeholder 1`] = `"
placeholder
取消
"`; +exports[`AtSearchBar Snap render AtSearchBar -- props placeholder 1`] = `"
placeholder
搜索
"`; -exports[`AtSearchBar Snap render AtSearchBar -- props showActionButton 1`] = `"
取消
"`; +exports[`AtSearchBar Snap render AtSearchBar -- props showActionButton 1`] = `"
搜索
搜索
"`; -exports[`AtSearchBar Snap render AtSearchBar -- props value 1`] = `"
取消
"`; +exports[`AtSearchBar Snap render AtSearchBar -- props value 1`] = `"
搜索
搜索
"`; -exports[`AtSearchBar Snap render initial AtSwitch 1`] = `"
取消
"`; +exports[`AtSearchBar Snap render initial AtSwitch 1`] = `"
搜索
搜索
"`; diff --git a/src/components/search-bar/index.js b/src/components/search-bar/index.js index 1c45345ea..6eb82cba0 100644 --- a/src/components/search-bar/index.js +++ b/src/components/search-bar/index.js @@ -19,17 +19,18 @@ export default class AtSearchBar extends AtComponent { static defaultProps = { value: '', - placeholder: '', + placeholder: '搜索', maxlength: 120, fixed: false, focus: false, disabled: false, showActionButton: false, - actionName: '取消', + actionName: '搜索', onChange: defaultFunc, onFocus: defaultFunc, onBlur: defaultFunc, onConfirm: defaultFunc, + onActionClick: defaultFunc } static propTypes = { @@ -75,14 +76,7 @@ export default class AtSearchBar extends AtComponent { } handleActionClick (e) { - if (!this.props.onActionClick) { - this.setState({ - isFocus: false - }) - this.handleClear(e) - } else { - this.props.onActionClick(e) - } + this.props.onActionClick(e) } render () { @@ -101,13 +95,13 @@ export default class AtSearchBar extends AtComponent { const placeholderStyle = {} const actionStyle = {} if (isFocus || (!isFocus && value)) { - placeholderStyle.width = `${(placeholder.length + 2) * 14}px` + placeholderStyle.width = `${(placeholder.length + 2.5) * 14}px` actionStyle.opacity = 1 actionStyle.marginRight = `0` } else if (!isFocus && !value) { placeholderStyle.width = '100%' actionStyle.opacity = 0 - actionStyle.marginRight = `-${((actionName.length) * 14) + 7}px` + actionStyle.marginRight = `-${((actionName.length + 1) * 14) + 7}px` } if (showActionButton) { actionStyle.opacity = 1 diff --git a/src/components/search-bar/index.scss b/src/components/search-bar/index.scss index 072c7bff0..ac7c21e9e 100644 --- a/src/components/search-bar/index.scss +++ b/src/components/search-bar/index.scss @@ -3,23 +3,25 @@ $height: 28PX; $inputPadding: 25PX; $fontSize: 14PX; +$placeholderPadding: 5PX; .at-search-bar { display: flex; align-items: center; height: $height; - padding: $spacing-v-sm 0; + padding: $fontSize / 2; box-sizing: content-box; - background-color: $color-border-lighter; + background-color: $color-bg; + @include border-thin-bottom; &__container { position: relative; flex: 1; overflow: hidden; width: 100%; - margin: 0 $fontSize / 2; height: $height; - background-color: #fff; + background-color: $color-bg-grey; + border-radius: 13PX; } &__placeholder_wrap { @@ -36,11 +38,12 @@ $fontSize: 14PX; width: 100%; height: $height; line-height: 0; + padding: 0 $placeholderPadding; transition: width 0.3s; } &__placeholder { - margin-left: 10px; + margin-left: $placeholderPadding; color: $color-grey-2; font-size: $fontSize; } @@ -53,7 +56,7 @@ $fontSize: 14PX; left: 0; display: block; font-size: $fontSize; - padding: 5PX $inputPadding; + padding: 5PX $inputPadding + $placeholderPadding; z-index: $zindex-form; transition: width 0.3s; text-align: left; @@ -68,7 +71,7 @@ $fontSize: 14PX; align-items: center; justify-content: center; top: 0; - right: 0; + right: $placeholderPadding; z-index: $zindex-form; height: $height; width: $inputPadding; @@ -79,13 +82,16 @@ $fontSize: 14PX; &__action { display: block; flex: none; + background-color: #6190E8; opacity: 0; height: $height; line-height: $height; font-size: $fontSize; - padding-right: $fontSize / 2; - color: $color-brand-dark; + padding: 0 $fontSize / 2; + margin-left: $fontSize / 2; + color: #fff; text-align: right; + border-radius: 5PX; transition: margin-right 0.3s, opacity 0.3s; } diff --git a/src/components/search-bar/index.test.js b/src/components/search-bar/index.test.js index 7d04a93ce..a4822512e 100644 --- a/src/components/search-bar/index.test.js +++ b/src/components/search-bar/index.test.js @@ -1,6 +1,5 @@ -import Nerv, { findDOMNode } from 'nervjs' +import Nerv from 'nervjs' import { renderToString } from 'nerv-server' -import { Simulate, renderIntoDocument } from 'nerv-test-utils' import AtSearchBar from '../../../.temp/components/search-bar/index' @@ -50,14 +49,3 @@ describe('AtSearchBar Snap', () => { expect(componet1).toMatchSnapshot() }) }) - -describe('AtSearchBar Event', () => { - it('AtSearchBar onChange', () => { - const fn = jest.fn() - const component = renderIntoDocument() - const items = findDOMNode(component, 'at-search-bar').querySelectorAll('.at-search-bar__input') - const item0 = items[0] - Simulate.change(item0) - expect(fn).toBeCalled() - }) -}) diff --git a/src/pages/form/search-bar/index.js b/src/pages/form/search-bar/index.js index 2473444b9..eca336266 100644 --- a/src/pages/form/search-bar/index.js +++ b/src/pages/form/search-bar/index.js @@ -19,7 +19,6 @@ export default class Index extends Taro.Component { } } onChange (stateName, value) { - console.log(stateName, value) this.setState({ [stateName]: value }) @@ -47,7 +46,6 @@ export default class Index extends Taro.Component { @@ -61,8 +59,7 @@ export default class Index extends Taro.Component {