diff --git a/components/constants.styl b/components/constants.styl deleted file mode 100644 index 2dc6b1e9..00000000 --- a/components/constants.styl +++ /dev/null @@ -1,59 +0,0 @@ -// -- Colors - -PRIMARY = #E91E63 -PRIMARY_DARK = darken(PRIMARY, 25%) -PRIMARY_LIGHT = lighten(PRIMARY, 25%) -ACCENT = #03A9F4 - -TEXT = #212121 -TEXT_ACCENT = #727272 - -DIVIDER = lighten(#B6B6B6, 75%) -BACKGROUND = #ffffff -WHITE = #ffffff -SUCCESS = #4CAF50 -CANCEL = #F44336 -WARNING = #FFC107 - -// -- Fonts -FONT_FAMILY = "Roboto", "Helvetica Neue", "Helvetica", "sans-serif" -FONT_SIZE = 16px -FONT_SIZE_TINY = 80% -FONT_SIZE_SMALL = 90% -FONT_SIZE_NORMAL = 100% -FONT_SIZE_BIG = 120% -FONT_WEIGHT_THIN = 300 -FONT_WEIGHT_NORMAL = 400 -FONT_WEIGHT_BOLD = 700 - -// -- Sizes -UNIT = 4rem -SPACE = (UNIT * 0.29) -OFFSET = (SPACE * 1.75) -MENU_WIDTH = (3.85 * UNIT) -HEADER_HEIGHT = (1.65 * UNIT) -INPUT_HEIGHT = (2 * SPACE) -BUTTON_HEIGHT = (2.5 * SPACE) -BUTTON_CIRCLE_HEIGHT = (2.75 * SPACE) -BUTTON_CIRCLE_MINI_HEIGHT = (2 * SPACE) -LOADING_HEIGHT = (1.5 * UNIT) -PROGRESS_BAR_HEIGHT = (SPACE / 4) - -// -- Shadows -ZDEPTH_SHADOW_1 = 0 1px 6px rgba(0,0,0,0.12), 0 1px 4px rgba(0,0,0,0.24) -ZDEPTH_SHADOW_2 = 0 3px 10px rgba(0,0,0,0.16), 0 3px 10px rgba(0,0,0,0.23) -ZDEPTH_SHADOW_3 = 0 10px 30px rgba(0,0,0,0.19), 0 6px 10px rgba(0,0,0,0.23) -ZDEPTH_SHADOW_4 = 0 14px 45px rgba(0,0,0,0.25), 0 10px 18px rgba(0,0,0,0.22) -ZDEPTH_SHADOW_5 = 0 19px 60px rgba(0,0,0,0.30), 0 15px 20px rgba(0,0,0,0.22) - -// -- Animations -ANIMATION_DURATION = 450ms -ANIMATION_EASE = cubic-bezier(.55,0,.1,1) -ANIMATION_DELAY = (ANIMATION_DURATION / 5) - -// -- Z Indexes -Z_INDEX_HIGHER = 200 -Z_INDEX_HIGH = 100 -Z_INDEX_NORMAL = 1 -Z_INDEX_LOW = -100 -Z_INDEX_LOWER = -200 diff --git a/components/list/index.jsx b/components/list/index.jsx index 1232c35f..c1534d9d 100644 --- a/components/list/index.jsx +++ b/components/list/index.jsx @@ -1,5 +1,4 @@ import React from 'react'; - import PureRenderMixin from 'react-addons-pure-render-mixin'; import style from './style'; @@ -11,7 +10,7 @@ export default React.createClass({ propTypes: { className: React.PropTypes.string, dataSource: React.PropTypes.array, - ItemFactory: React.PropTypes.func, + template: React.PropTypes.func, onClick: React.PropTypes.func, type: React.PropTypes.string }, @@ -38,7 +37,7 @@ export default React.createClass({ const items = this.props.dataSource.map((data, index) => { return (
  • - {this.props.itemFactory(data, index)} + {this.props.template(data, index)}
    • ); }); diff --git a/components/list/style.scss b/components/list/style.scss new file mode 100644 index 00000000..3128e2b3 --- /dev/null +++ b/components/list/style.scss @@ -0,0 +1,25 @@ +@import "../variables"; + +$list-color: unquote("rgb(#{$color-black})") !default; +$list-background: unquote("rgb(#{$color-white})") !default; + +.root { + list-style: none; + + &, a { + color: $list-color; + } + + > li { + overflow: hidden; + background-color: $list-background; + box-shadow: $zdepth-shadow-1; + transition-timing-function: $animation-curve-default; + transition-duration: $animation-duration; + transition-property: box-shadow; + + &:hover { + box-shadow: $zdepth-shadow-2; + } + } +} diff --git a/components/list/style.styl b/components/list/style.styl deleted file mode 100644 index f879d94a..00000000 --- a/components/list/style.styl +++ /dev/null @@ -1,15 +0,0 @@ -@import '../constants' - -:local(.root) - list-style : none - &, a - color : TEXT - > li - overflow : hidden - background-color : WHITE - box-shadow : ZDEPTH_SHADOW_1 - transition-property : box-shadow - transition-duration : ANIMATION_DURATION - transition-timing-function : ANIMATION_EASE - &:hover - box-shadow : ZDEPTH_SHADOW_2 diff --git a/spec/components/list.jsx b/spec/components/list.jsx new file mode 100644 index 00000000..1a57ba74 --- /dev/null +++ b/spec/components/list.jsx @@ -0,0 +1,52 @@ +import React from 'react'; +import List from '../../components/list'; + +export default React.createClass({ + displayName: 'ListTest', + + getInitialState () { + return { + countries: [ + { value: 'ES-es', label: 'Spain', img: 'http://' }, + { value: 'TH-th', label: 'Thailand', img: 'http://' }, + { value: 'EN-gb', label: 'England', img: 'http://' }, + { value: 'EN-en', label: 'USA', img: 'http://' }, + { value: 'FR-fr', label: 'France', img: 'http://' } + ], + selected: 'TH-th' + }; + }, + + onChange (dropdown) { + console.log('[DROPDOWN]', dropdown.getValue()); + }, + + customDropdownItem (data) { + const style = { + width: 32, + height: 32, + backgroundColor: '#ccc', + marginRight: 8 + }; + + return ( +
    + +
    + {data.label} + {data.value} +
    +
    + ); + }, + + render () { + return ( +
    +
    List
    +

    lorem ipsum...

    + +
    + ); + } +}); diff --git a/spec/index.jsx b/spec/index.jsx index 18c38009..5d2f89e7 100644 --- a/spec/index.jsx +++ b/spec/index.jsx @@ -16,9 +16,6 @@ import Slider from './components/slider'; import Switch from './components/switch'; import Tabs from './components/tabs'; -// import FontIcon from './components/font_icon'; -// import Form from './components/form'; - const Test = React.createClass({ displayName: 'App',