skyquake/plugins/composer/src/src/components/CatalogFilter.js

   1
   2 /*
   3  *
   4  *   Copyright 2016 RIFT.IO Inc
   5  *
   6  *   Licensed under the Apache License, Version 2.0 (the "License");
   7  *   you may not use this file except in compliance with the License.
   8  *   You may obtain a copy of the License at
   9  *
  10  *       http://www.apache.org/licenses/LICENSE-2.0
  11  *
  12  *   Unless required by applicable law or agreed to in writing, software
  13  *   distributed under the License is distributed on an "AS IS" BASIS,
  14  *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  15  *   See the License for the specific language governing permissions and
  16  *   limitations under the License.
  17  *
  18  */
  19 /**
  20  * Created by onvelocity on 12/2/15.
  21  */
  22 'use strict';
  23
  24 import React from 'react'
  25 import ClassNames from 'classnames'
  26 import PureRenderMixin from 'react-addons-pure-render-mixin'
  27 import CatalogFilterActions from '../actions/CatalogFilterActions'
  28 import NSDicon from '../../../node_modules/open-iconic/svg/map.svg'
  29 import VNFDicon from '../../../node_modules/open-iconic/svg/map-marker.svg'
  30 import Isvg from 'react-inlinesvg';
  31 import '../styles/CatalogFilter.scss'
  32
  33 const CatalogFilter = React.createClass({
  34         mixins: [PureRenderMixin],
  35         getInitialState: function () {
  36                 return {};
  37         },
  38         getDefaultProps: function () {
  39                 return {filterByType: 'nsd'};
  40         },
  41         componentWillMount: function () {
  42         },
  43         componentDidMount: function () {
  44         },
  45         componentDidUpdate: function () {
  46         },
  47         componentWillUnmount: function () {
  48         },
  49         render() {
  50                 const clickFilterByType = function (event) {
  51                         CatalogFilterActions.filterByType(event.currentTarget.value);
  52                 };
  53
  54                 return (
  55                         <div className="CatalogFilter">
  56                                 <button className={ClassNames('CatalogFilterNSD', {'-selected': this.props.filterByType === 'nsd'})}
  57                                                 value="nsd" onClick={clickFilterByType}><svg width="8" height="8" viewBox="0 0 8 8"><path  transform="scale(0.018) translate(-50,5)" d='M325.55,87.34c0,34.54-27.71,62.55-61.89,62.55s-61.89-28-61.89-62.55S229.48,24.8,263.66,24.8,325.55,52.8,325.55,87.34Zm-220.1,96.09c-34.18,0-61.89,28-61.89,62.55s27.71,62.55,61.89,62.55,61.89-28,61.89-62.55S139.63,183.43,105.45,183.43ZM259,235.18c-34.18,0-61.89,28-61.89,62.55s27.71,62.55,61.89,62.55,61.89-28,61.89-62.55S293.23,235.18,259,235.18Zm153.6-51.74c-34.18,0-61.89,28-61.89,62.55s27.71,62.55,61.89,62.55,61.89-28,61.89-62.55S446.83,183.43,412.64,183.43ZM213,127.14l-66,80.5m116.59-57.75v85.29m42.76-104.42,64,64.68'></path></svg>NSD
  58                                 </button>
  59                                 <button className={ClassNames('CatalogFilterVNFD', {'-selected': this.props.filterByType === 'vnfd'})}
  60                                                 value="vnfd" onClick={clickFilterByType}><svg><circle cx="50%" cy="50%" r="6" /></svg>VNFD
  61                                 </button>
  62                         </div>
  63                 );
  64         }
  65 });
  66
  67 export default CatalogFilter;