Skip to content

Commit

Permalink
feat(search-bar): 按照设计稿修改
Browse files Browse the repository at this point in the history
  • Loading branch information
@jimczj
jimczj committed Sep 28, 2018
1 parent 8aad4c4 commit afca35f
Show file tree
Hide file tree
Showing 6 changed files with 45 additions and 62 deletions.
26 changes: 13 additions & 13 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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",
Expand Down
18 changes: 9 additions & 9 deletions src/components/search-bar/__snapshots__/index.test.js.snap
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,19 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`AtSearchBar Snap render AtSearchBar -- props actionName 1`] = `"<div class=\\"at-search-bar\\"><div class=\\"at-search-bar__container\\"><div style=\\"width:100%;\\" class=\\"at-search-bar__placeholder_wrap\\"><span style=\\"font-size:15px;color:#999;\\" class=\\"taro-text at-icon at-icon-search\\"></span><span style=\\"visibility: visible;\\" class=\\"taro-text at-search-bar__placeholder\\"></span></div><input value=\\"\\" maxlength=\\"120\\" class=\\"weui-input at-search-bar__input\\" type=\\"search\\"/><div style=\\"display: none;\\" class=\\"at-search-bar__clear\\"><span style=\\"font-size:15px;color:#999;\\" class=\\"taro-text at-icon at-icon-close-circle\\"></span></div></div><div style=\\"opacity:0;margin-right:-147px;\\" class=\\"at-search-bar__action\\">actionName</div></div>"`;
exports[`AtSearchBar Snap render AtSearchBar -- props actionName 1`] = `"<div class=\\"at-search-bar\\"><div class=\\"at-search-bar__container\\"><div style=\\"width:100%;\\" class=\\"at-search-bar__placeholder_wrap\\"><span style=\\"font-size:15px;color:#999;\\" class=\\"taro-text at-icon at-icon-search\\"></span><span style=\\"visibility: visible;\\" class=\\"taro-text at-search-bar__placeholder\\">搜索</span></div><input value=\\"\\" maxlength=\\"120\\" class=\\"weui-input at-search-bar__input\\" type=\\"search\\"/><div style=\\"display: none;\\" class=\\"at-search-bar__clear\\"><span style=\\"font-size:15px;color:#999;\\" class=\\"taro-text at-icon at-icon-close-circle\\"></span></div></div><div style=\\"opacity:0;margin-right:-161px;\\" class=\\"at-search-bar__action\\">actionName</div></div>"`;
exports[`AtSearchBar Snap render AtSearchBar -- props disabled 1`] = `"<div class=\\"at-search-bar at-search-bar--fixed\\"><div class=\\"at-search-bar__container\\"><div style=\\"width:100%;\\" class=\\"at-search-bar__placeholder_wrap\\"><span style=\\"font-size:15px;color:#999;\\" class=\\"taro-text at-icon at-icon-search\\"></span><span style=\\"visibility: visible;\\" class=\\"taro-text at-search-bar__placeholder\\"></span></div><input value=\\"\\" maxlength=\\"120\\" class=\\"weui-input at-search-bar__input\\" type=\\"search\\"/><div style=\\"display: none;\\" class=\\"at-search-bar__clear\\"><span style=\\"font-size:15px;color:#999;\\" class=\\"taro-text at-icon at-icon-close-circle\\"></span></div></div><div style=\\"opacity:0;margin-right:-35px;\\" class=\\"at-search-bar__action\\">取消</div></div>"`;
exports[`AtSearchBar Snap render AtSearchBar -- props disabled 1`] = `"<div class=\\"at-search-bar at-search-bar--fixed\\"><div class=\\"at-search-bar__container\\"><div style=\\"width:100%;\\" class=\\"at-search-bar__placeholder_wrap\\"><span style=\\"font-size:15px;color:#999;\\" class=\\"taro-text at-icon at-icon-search\\"></span><span style=\\"visibility: visible;\\" class=\\"taro-text at-search-bar__placeholder\\">搜索</span></div><input value=\\"\\" maxlength=\\"120\\" class=\\"weui-input at-search-bar__input\\" type=\\"search\\"/><div style=\\"display: none;\\" class=\\"at-search-bar__clear\\"><span style=\\"font-size:15px;color:#999;\\" class=\\"taro-text at-icon at-icon-close-circle\\"></span></div></div><div style=\\"opacity:0;margin-right:-49px;\\" class=\\"at-search-bar__action\\">搜索</div></div>"`;
exports[`AtSearchBar Snap render AtSearchBar -- props disabled 2`] = `"<div class=\\"at-search-bar\\"><div class=\\"at-search-bar__container\\"><div style=\\"width:100%;\\" class=\\"at-search-bar__placeholder_wrap\\"><span style=\\"font-size:15px;color:#999;\\" class=\\"taro-text at-icon at-icon-search\\"></span><span style=\\"visibility: visible;\\" class=\\"taro-text at-search-bar__placeholder\\"></span></div><input value=\\"\\" maxlength=\\"120\\" class=\\"weui-input at-search-bar__input\\" disabled type=\\"search\\"/><div style=\\"display: none;\\" class=\\"at-search-bar__clear\\"><span style=\\"font-size:15px;color:#999;\\" class=\\"taro-text at-icon at-icon-close-circle\\"></span></div></div><div style=\\"opacity:0;margin-right:-35px;\\" class=\\"at-search-bar__action\\">取消</div></div>"`;
exports[`AtSearchBar Snap render AtSearchBar -- props disabled 2`] = `"<div class=\\"at-search-bar\\"><div class=\\"at-search-bar__container\\"><div style=\\"width:100%;\\" class=\\"at-search-bar__placeholder_wrap\\"><span style=\\"font-size:15px;color:#999;\\" class=\\"taro-text at-icon at-icon-search\\"></span><span style=\\"visibility: visible;\\" class=\\"taro-text at-search-bar__placeholder\\">搜索</span></div><input value=\\"\\" maxlength=\\"120\\" class=\\"weui-input at-search-bar__input\\" disabled type=\\"search\\"/><div style=\\"display: none;\\" class=\\"at-search-bar__clear\\"><span style=\\"font-size:15px;color:#999;\\" class=\\"taro-text at-icon at-icon-close-circle\\"></span></div></div><div style=\\"opacity:0;margin-right:-49px;\\" class=\\"at-search-bar__action\\">搜索</div></div>"`;
exports[`AtSearchBar Snap render AtSearchBar -- props focus 1`] = `"<div class=\\"at-search-bar\\"><div class=\\"at-search-bar__container\\"><div style=\\"width:28px;\\" class=\\"at-search-bar__placeholder_wrap\\"><span style=\\"font-size:15px;color:#999;\\" class=\\"taro-text at-icon at-icon-search\\"></span><span style=\\"visibility: visible;\\" class=\\"taro-text at-search-bar__placeholder\\"></span></div><input value=\\"\\" focus maxlength=\\"120\\" class=\\"weui-input at-search-bar__input\\" type=\\"search\\"/><div style=\\"display: none;\\" class=\\"at-search-bar__clear\\"><span style=\\"font-size:15px;color:#999;\\" class=\\"taro-text at-icon at-icon-close-circle\\"></span></div></div><div style=\\"opacity:1;margin-right:0;\\" class=\\"at-search-bar__action\\">取消</div></div>"`;
exports[`AtSearchBar Snap render AtSearchBar -- props focus 1`] = `"<div class=\\"at-search-bar\\"><div class=\\"at-search-bar__container\\"><div style=\\"width:63px;\\" class=\\"at-search-bar__placeholder_wrap\\"><span style=\\"font-size:15px;color:#999;\\" class=\\"taro-text at-icon at-icon-search\\"></span><span style=\\"visibility: visible;\\" class=\\"taro-text at-search-bar__placeholder\\">搜索</span></div><input value=\\"\\" focus maxlength=\\"120\\" class=\\"weui-input at-search-bar__input\\" type=\\"search\\"/><div style=\\"display: none;\\" class=\\"at-search-bar__clear\\"><span style=\\"font-size:15px;color:#999;\\" class=\\"taro-text at-icon at-icon-close-circle\\"></span></div></div><div style=\\"opacity:1;margin-right:0;\\" class=\\"at-search-bar__action\\">搜索</div></div>"`;
exports[`AtSearchBar Snap render AtSearchBar -- props maxlength 1`] = `"<div class=\\"at-search-bar\\"><div class=\\"at-search-bar__container\\"><div style=\\"width:100%;\\" class=\\"at-search-bar__placeholder_wrap\\"><span style=\\"font-size:15px;color:#999;\\" class=\\"taro-text at-icon at-icon-search\\"></span><span style=\\"visibility: visible;\\" class=\\"taro-text at-search-bar__placeholder\\"></span></div><input value=\\"\\" maxlength=\\"120\\" class=\\"weui-input at-search-bar__input\\" type=\\"search\\"/><div style=\\"display: none;\\" class=\\"at-search-bar__clear\\"><span style=\\"font-size:15px;color:#999;\\" class=\\"taro-text at-icon at-icon-close-circle\\"></span></div></div><div style=\\"opacity:0;margin-right:-35px;\\" class=\\"at-search-bar__action\\">取消</div></div>"`;
exports[`AtSearchBar Snap render AtSearchBar -- props maxlength 1`] = `"<div class=\\"at-search-bar\\"><div class=\\"at-search-bar__container\\"><div style=\\"width:100%;\\" class=\\"at-search-bar__placeholder_wrap\\"><span style=\\"font-size:15px;color:#999;\\" class=\\"taro-text at-icon at-icon-search\\"></span><span style=\\"visibility: visible;\\" class=\\"taro-text at-search-bar__placeholder\\">搜索</span></div><input value=\\"\\" maxlength=\\"120\\" class=\\"weui-input at-search-bar__input\\" type=\\"search\\"/><div style=\\"display: none;\\" class=\\"at-search-bar__clear\\"><span style=\\"font-size:15px;color:#999;\\" class=\\"taro-text at-icon at-icon-close-circle\\"></span></div></div><div style=\\"opacity:0;margin-right:-49px;\\" class=\\"at-search-bar__action\\">搜索</div></div>"`;
exports[`AtSearchBar Snap render AtSearchBar -- props placeholder 1`] = `"<div class=\\"at-search-bar\\"><div class=\\"at-search-bar__container\\"><div style=\\"width:100%;\\" class=\\"at-search-bar__placeholder_wrap\\"><span style=\\"font-size:15px;color:#999;\\" class=\\"taro-text at-icon at-icon-search\\"></span><span style=\\"visibility: visible;\\" class=\\"taro-text at-search-bar__placeholder\\">placeholder</span></div><input value=\\"\\" maxlength=\\"120\\" class=\\"weui-input at-search-bar__input\\" type=\\"search\\"/><div style=\\"display: none;\\" class=\\"at-search-bar__clear\\"><span style=\\"font-size:15px;color:#999;\\" class=\\"taro-text at-icon at-icon-close-circle\\"></span></div></div><div style=\\"opacity:0;margin-right:-35px;\\" class=\\"at-search-bar__action\\">取消</div></div>"`;
exports[`AtSearchBar Snap render AtSearchBar -- props placeholder 1`] = `"<div class=\\"at-search-bar\\"><div class=\\"at-search-bar__container\\"><div style=\\"width:100%;\\" class=\\"at-search-bar__placeholder_wrap\\"><span style=\\"font-size:15px;color:#999;\\" class=\\"taro-text at-icon at-icon-search\\"></span><span style=\\"visibility: visible;\\" class=\\"taro-text at-search-bar__placeholder\\">placeholder</span></div><input value=\\"\\" maxlength=\\"120\\" class=\\"weui-input at-search-bar__input\\" type=\\"search\\"/><div style=\\"display: none;\\" class=\\"at-search-bar__clear\\"><span style=\\"font-size:15px;color:#999;\\" class=\\"taro-text at-icon at-icon-close-circle\\"></span></div></div><div style=\\"opacity:0;margin-right:-49px;\\" class=\\"at-search-bar__action\\">搜索</div></div>"`;
exports[`AtSearchBar Snap render AtSearchBar -- props showActionButton 1`] = `"<div class=\\"at-search-bar\\"><div class=\\"at-search-bar__container\\"><div style=\\"width:100%;\\" class=\\"at-search-bar__placeholder_wrap\\"><span style=\\"font-size:15px;color:#999;\\" class=\\"taro-text at-icon at-icon-search\\"></span><span style=\\"visibility: visible;\\" class=\\"taro-text at-search-bar__placeholder\\"></span></div><input value=\\"\\" maxlength=\\"120\\" class=\\"weui-input at-search-bar__input\\" type=\\"search\\"/><div style=\\"display: none;\\" class=\\"at-search-bar__clear\\"><span style=\\"font-size:15px;color:#999;\\" class=\\"taro-text at-icon at-icon-close-circle\\"></span></div></div><div style=\\"opacity:1;margin-right:0;\\" class=\\"at-search-bar__action\\">取消</div></div>"`;
exports[`AtSearchBar Snap render AtSearchBar -- props showActionButton 1`] = `"<div class=\\"at-search-bar\\"><div class=\\"at-search-bar__container\\"><div style=\\"width:100%;\\" class=\\"at-search-bar__placeholder_wrap\\"><span style=\\"font-size:15px;color:#999;\\" class=\\"taro-text at-icon at-icon-search\\"></span><span style=\\"visibility: visible;\\" class=\\"taro-text at-search-bar__placeholder\\">搜索</span></div><input value=\\"\\" maxlength=\\"120\\" class=\\"weui-input at-search-bar__input\\" type=\\"search\\"/><div style=\\"display: none;\\" class=\\"at-search-bar__clear\\"><span style=\\"font-size:15px;color:#999;\\" class=\\"taro-text at-icon at-icon-close-circle\\"></span></div></div><div style=\\"opacity:1;margin-right:0;\\" class=\\"at-search-bar__action\\">搜索</div></div>"`;
exports[`AtSearchBar Snap render AtSearchBar -- props value 1`] = `"<div class=\\"at-search-bar\\"><div class=\\"at-search-bar__container\\"><div style=\\"width:28px;\\" class=\\"at-search-bar__placeholder_wrap\\"><span style=\\"font-size:15px;color:#999;\\" class=\\"taro-text at-icon at-icon-search\\"></span><span style=\\"visibility: hidden;\\" class=\\"taro-text at-search-bar__placeholder\\"></span></div><input value=\\"value\\" maxlength=\\"120\\" class=\\"weui-input at-search-bar__input\\" type=\\"search\\"/><div style=\\"display: flex;\\" class=\\"at-search-bar__clear\\"><span style=\\"font-size:15px;color:#999;\\" class=\\"taro-text at-icon at-icon-close-circle\\"></span></div></div><div style=\\"opacity:1;margin-right:0;\\" class=\\"at-search-bar__action\\">取消</div></div>"`;
exports[`AtSearchBar Snap render AtSearchBar -- props value 1`] = `"<div class=\\"at-search-bar\\"><div class=\\"at-search-bar__container\\"><div style=\\"width:63px;\\" class=\\"at-search-bar__placeholder_wrap\\"><span style=\\"font-size:15px;color:#999;\\" class=\\"taro-text at-icon at-icon-search\\"></span><span style=\\"visibility: hidden;\\" class=\\"taro-text at-search-bar__placeholder\\">搜索</span></div><input value=\\"value\\" maxlength=\\"120\\" class=\\"weui-input at-search-bar__input\\" type=\\"search\\"/><div style=\\"display: flex;\\" class=\\"at-search-bar__clear\\"><span style=\\"font-size:15px;color:#999;\\" class=\\"taro-text at-icon at-icon-close-circle\\"></span></div></div><div style=\\"opacity:1;margin-right:0;\\" class=\\"at-search-bar__action\\">搜索</div></div>"`;
exports[`AtSearchBar Snap render initial AtSwitch 1`] = `"<div class=\\"at-search-bar\\"><div class=\\"at-search-bar__container\\"><div style=\\"width:100%;\\" class=\\"at-search-bar__placeholder_wrap\\"><span style=\\"font-size:15px;color:#999;\\" class=\\"taro-text at-icon at-icon-search\\"></span><span style=\\"visibility: visible;\\" class=\\"taro-text at-search-bar__placeholder\\"></span></div><input value=\\"\\" maxlength=\\"120\\" class=\\"weui-input at-search-bar__input\\" type=\\"search\\"/><div style=\\"display: none;\\" class=\\"at-search-bar__clear\\"><span style=\\"font-size:15px;color:#999;\\" class=\\"taro-text at-icon at-icon-close-circle\\"></span></div></div><div style=\\"opacity:0;margin-right:-35px;\\" class=\\"at-search-bar__action\\">取消</div></div>"`;
exports[`AtSearchBar Snap render initial AtSwitch 1`] = `"<div class=\\"at-search-bar\\"><div class=\\"at-search-bar__container\\"><div style=\\"width:100%;\\" class=\\"at-search-bar__placeholder_wrap\\"><span style=\\"font-size:15px;color:#999;\\" class=\\"taro-text at-icon at-icon-search\\"></span><span style=\\"visibility: visible;\\" class=\\"taro-text at-search-bar__placeholder\\">搜索</span></div><input value=\\"\\" maxlength=\\"120\\" class=\\"weui-input at-search-bar__input\\" type=\\"search\\"/><div style=\\"display: none;\\" class=\\"at-search-bar__clear\\"><span style=\\"font-size:15px;color:#999;\\" class=\\"taro-text at-icon at-icon-close-circle\\"></span></div></div><div style=\\"opacity:0;margin-right:-49px;\\" class=\\"at-search-bar__action\\">搜索</div></div>"`;
18 changes: 6 additions & 12 deletions src/components/search-bar/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand Down Expand Up @@ -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 () {
Expand All @@ -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
Expand Down
24 changes: 15 additions & 9 deletions src/components/search-bar/index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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;
}
Expand All @@ -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;
Expand All @@ -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;
Expand All @@ -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;
}

Expand Down
14 changes: 1 addition & 13 deletions src/components/search-bar/index.test.js
View file
Original file line number Diff line number Diff line change
@@ -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'

Expand Down Expand Up @@ -50,14 +49,3 @@ describe('AtSearchBar Snap', () => {
expect(componet1).toMatchSnapshot()
})
})

describe('AtSearchBar Event', () => {
it('AtSearchBar onChange', () => {
const fn = jest.fn()
const component = renderIntoDocument(<AtSearchBar onChange={fn} />)
const items = findDOMNode(component, 'at-search-bar').querySelectorAll('.at-search-bar__input')
const item0 = items[0]
Simulate.change(item0)
expect(fn).toBeCalled()
})
})
Loading

0 comments on commit afca35f

Please sign in to comment.