maverick/flex-template-web
1
0
Fork 0
mirror of https://github.com/kingomarnajjar/flex-template-web.git synced 2026-07-27 09:13:14 +10:00
Code Issues Projects Releases Packages Wiki Activity Actions

Use Select component in BirthdayInput

Browse source
This commit is contained in:
Kimmo Puputti 2017-05-11 14:21:20 +03:00
parent 34b6873e18
commit dde84cb3be
2 changed files with 7 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/components/BirthdayInput/BirthdayInput.css
View file

@ -5,28 +5,12 @@
.dropdown {
display: inline-block;
flex: 1;
appearance: none;
/* Font */
font-size: 16px;
letter-spacing: -0.4px;
/* Border */
border: 1px solid #979797;
border-left-width: 0;
border-radius: 0;
&:first-child {
border-left-width: 1px;
}
/* Dimensions */
padding-left: 18px;
padding-right: 18px;
height: 50px;
/* Background */
background-image: url('data:image/svg+xml;utf8,<svg width="16" height="10" viewBox="0 0 16 10" xmlns="http://www.w3.org/2000/svg"><path d="M15.027 2.5a.577.577 0 0 0 0-.813L13.545.214a.566.566 0 0 0-.804 0L8 4.955 3.259.215a.566.566 0 0 0-.804 0L.973 1.686a.577.577 0 0 0 0 .813l6.625 6.616c.223.223.58.223.804 0L15.027 2.5z" fill="#4A4A4A" fill-rule="evenodd"/></svg>');
background-size: 16px 16px;
background-position: center right 10px;
}

13
src/components/BirthdayInput/BirthdayInput.js
View file

@ -1,6 +1,7 @@
import React, { Component, PropTypes } from 'react';
import classNames from 'classnames';
import { range } from 'lodash';
import { Select } from '../../components';
import css from './BirthdayInput.css';
@ -126,7 +127,7 @@ class BirthdayInput extends Component {
return (
<div className={classes}>
<select
<Select
value={selectedValue(this.state.selected.day)}
className={css.dropdown}
onFocus={() => this.handleSelectFocus()}
@ -135,8 +136,8 @@ class BirthdayInput extends Component {
>
<option />
{days.map(d => <option key={d} value={d}>{pad(d)}</option>)}
</select>
<select
</Select>
<Select
value={selectedValue(this.state.selected.month)}
className={css.dropdown}
onFocus={() => this.handleSelectFocus()}
@ -145,8 +146,8 @@ class BirthdayInput extends Component {
>
<option />
{months.map(m => <option key={m} value={m}>{pad(m)}</option>)}
</select>
<select
</Select>
<Select
value={selectedValue(this.state.selected.year)}
className={css.dropdown}
onFocus={() => this.handleSelectFocus()}
@ -155,7 +156,7 @@ class BirthdayInput extends Component {
>
<option />
{years.map(y => <option key={y} value={y}>{y}</option>)}
</select>
</Select>
</div>
);
}