filters

src/components/FilterItem/FilterItem.js

@@ -0,0 +1,29 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import styles from './FilterItem.less'
+
+const FilterItem = ({
+  label = '',
+  children,
+}) => {
+  const labelArray = label.split('')
+  return (
+    <div className={styles.filterItem}>
+      {labelArray.length > 0
+        ? <div className={styles.labelWrap}>
+            {labelArray.map((item, index) => <span className="labelText" key={index}>{item}</span>)}
+          </div>
+        : ''}
+      <div className={styles.item}>
+        {children}
+      </div>
+    </div>
+  )
+}
+
+FilterItem.propTypes = {
+  label: PropTypes.string,
+  children: PropTypes.element.isRequired,
+}
+
+export default FilterItem

src/components/FilterItem/FilterItem.less

@@ -0,0 +1,17 @@
+.filterItem {
+  display: flex;
+  justify-content: space-between;
+
+  .labelWrap {
+    width: 64px;
+    line-height: 28px;
+    margin-right: 12px;
+    justify-content: space-between;
+    display: flex;
+    overflow: hidden;
+  }
+
+  .item {
+    flex: 1;
+  }
+}

src/components/FilterItem/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "FilterItem",
+  "version": "0.0.0",
+  "private": true,
+  "main": "./FilterItem.js"
+}

src/components/index.js

@@ -3,6 +3,7 @@ import DropOption from './DropOption'
 import Iconfont from './Iconfont'
 import Search from './Search'
 import Editor from './Editor'
+import FilterItem from './FilterItem'
 import * as Layout from './Layout/index.js'
 
 import layer from './layer'
@@ -14,5 +15,6 @@ export {
   Iconfont,
   Search,
   Editor,
+  FilterItem,
   layer,
  }