From bd83b22686c5326faf965ebe1267160015859a49 Mon Sep 17 00:00:00 2001 From: jaywcjlove <398188662@qq.com> Date: Tue, 16 May 2017 02:43:29 +0800 Subject: [PATCH] Add a filter menu. --- src/components/Root.js | 4 +- src/components/filter.js | 56 ++++++++++++++++++++++++++ src/components/icon.js | 86 ++++++++++++++++++++++++++++++++++++++-- src/index.less | 16 ++++++++ 4 files changed, 157 insertions(+), 5 deletions(-) create mode 100644 src/components/filter.js diff --git a/src/components/Root.js b/src/components/Root.js index ce82cfe..00336cf 100644 --- a/src/components/Root.js +++ b/src/components/Root.js @@ -1,6 +1,7 @@ import React,{Component} from 'react' import menuSource from "../data/" import Menu from "./menu" +import Filter from "./filter" export default class Root extends Component{ @@ -21,13 +22,12 @@ export default class Root extends Component{ }else{ source = []; } - console.log("--->",e,"---2>",key) this.setState({contentSource:source}) }} />
- header menu +
diff --git a/src/components/filter.js b/src/components/filter.js new file mode 100644 index 0000000..58e2bca --- /dev/null +++ b/src/components/filter.js @@ -0,0 +1,56 @@ +import React,{Component} from 'react' +import {Icons} from './icon' + +export default class Filter extends Component { + static defaultProps = { + dataSource:[], + onClick:new Function + } + constructor(props){ + super(props) + this.state = { + dataSource:{ + "free":{}, + "hot":{}, + "recommended":{}, + "must-have":{}, + "app-store":{}, + "open-source":{}, + }, + onClick:this.props.onClick, + selector:"", + } + } + renderListItem(source,onClick){ + let elms = []; + for(let i in source){ + elms.push( +
  • { + }}> + +
    • + ) + } + return elms + } + render(){ + return ( + + ) + } + componentDidMount(){ + this.setState({dataSource:this.state.dataSource}) + } +} + + +var styles = { + active:{ + backgroundColor:"rgba(255, 255, 255, 0.11)" + }, + cancel:{ + backgroundColor:"transparent" + } +} \ No newline at end of file diff --git a/src/components/icon.js b/src/components/icon.js index 64e0b75..b7eb066 100644 --- a/src/components/icon.js +++ b/src/components/icon.js @@ -16,15 +16,95 @@ class Icons extends Component { let tp = this.props.type if(!tp) return (); + if(tp === 'free') return ( + + + + + + + + + + + + ) + if(tp === 'hot') return ( + + + + + + + + + + + + ) + if(tp === 'recommended') return ( + + + + + + + + + + + + ) + if(tp === 'must-have') return ( + + + + + + + + + + + + ) + if(tp === 'app-store') return ( + + + + + + + + + + + + ) + if(tp === 'open-source') return ( + + + + + + + + + + + + ) + if(tp === 'editors-and-ide') return ( - + - - + + + diff --git a/src/index.less b/src/index.less index 4393c14..50ed351 100644 --- a/src/index.less +++ b/src/index.less @@ -40,6 +40,7 @@ li,ul{ flex-direction:column; .header{ height: 43px; + overflow: hidden; -webkit-app-region: drag; user-select: none; background-image: linear-gradient(-180deg, #E8E6E8 0%, #D6D4D6 98%); @@ -73,6 +74,21 @@ li,ul{ } i{ padding: 0 5px 0 0; + vertical-align: middle; + display: inline-block; + position: relative; + top: -1px; + } + } +} + +.menu-filter{ + padding: 0 0 0 7px; + li{ + display: inline-block; + margin: 12px 5px; + &:hover{ + background-color:rgba(255, 255, 255, 0.11) } } } \ No newline at end of file