✨ [feature] add InputGroup Component.

components/button/theme.css

@@ -173,7 +173,7 @@
 
   &.flat,
   &.toggle {
-     border: 1px solid var(--button-neutral-border-color);
+    border: 1px solid var(--button-neutral-border-color);
     color: var(--button-neutral-color-contrast);
 
     &:focus:not(:active) {

components/date_select/DateRangeSelect.js

@@ -19,7 +19,7 @@ const factory = (Trigger, SelectInput, DateRange) => {
       maxDate: PropTypes.object,
       onChange: PropTypes.func,
       ranges: PropTypes.arrayOf(
-        PropTypes.oneOf(['今日', '昨日', '近7日', '近30天', '近三个月', '近一年'])
+        PropTypes.oneOf(['今日', '昨日', '近7日', '近30日', '近三个月', '近一年'])
       ),
       theme: PropTypes.shape({
         DaySelected: PropTypes.object,
@@ -30,7 +30,7 @@ const factory = (Trigger, SelectInput, DateRange) => {
     static defaultProps = {
       minDate: moment('2016-03-01'),
       maxDate: moment(),
-      ranges: ['今日', '昨日', '近7日', '近30天', '近三个月', '近一年'],
+      ranges: ['今日', '昨日', '近7日', '近30日', '近三个月', '近一年'],
       onChange: () => void 0,
     }
 

components/identifiers.js

@@ -9,6 +9,7 @@ export const POPUP = 'CQPOPUP';
 export const OVERLAY = 'CQOVERLAY';
 export const DIALOG = 'CQDIALOG';
 export const INPUT = 'CQINPUT';
+export const INPUTGROUP = 'CQINPUTGROUP';
 export const AUTOCOMPLETE = 'CQAUTOCOMPLETE';
 export const TOOLTIP = 'CQTOOLTIP';
 export const LAYOUT = 'CQLAYOUT';

components/input/theme.css

@@ -19,6 +19,7 @@
     color: var(--input-color);
     box-sizing: border-box;
     font-size: inherit;
+    padding: 0 var(--input-field-padding);
     line-height: inherit;
     border: 0;
     outline: none;
@@ -33,6 +34,10 @@
     }
 }
 
+.icon {
+    font-size: var(--font-size-large);
+}
+
 .bar {
   display: block;
   position: absolute;

components/input_group/InputGroup.js

@@ -0,0 +1,53 @@
+import React, { PropTypes } from 'react'
+import anyPass from 'ramda/src/anyPass';
+import classnames from 'classnames';
+
+const factory = (Select, Input, Button) => {
+
+  const isSelect = child => child.type === Select;
+  const isInput = child => child.type === Input;
+  const isButton = child => child.type === Button;
+
+  class InputGroup extends React.Component {
+    static propTypes = {
+      children: PropTypes.node,
+      size: PropTypes.oneOf(['small', 'normal', 'large']),
+      theme: PropTypes.shape({
+        inputGroup: PropTypes.string,
+        input: PropTypes.string,
+      }),
+    }
+
+    static defaultProps = {
+      size: 'normal',
+    }
+
+    renderChildren = (children) => {
+      return React.Children.map(this.props.children, (item, index) =>
+        anyPass([isInput, isSelect, isButton])(item) && React.cloneElement(item, {
+          key: index,
+          theme: this.props.theme,
+        }));
+    }
+
+    render () {
+      const {
+        size,
+        theme,
+        children,
+      } = this.props;
+
+      const classes = classnames(theme.inputGroup, theme[size]);
+
+      return (
+        <div className={classes}>
+          {this.renderChildren(children)}
+        </div>
+      );
+    }
+  }
+
+  return InputGroup;
+}
+
+export {factory as inputGroupFactory};

components/input_group/index.js

@@ -0,0 +1,12 @@
+import {inputGroupFactory} from './InputGroup';
+import Button from '../button';
+import Input from '../input';
+import Select from '../select';
+import { themr } from 'react-css-themr';
+import { INPUTGROUP } from '../identifiers';
+import theme from './theme.css';
+
+const ThemedInputGroup = themr(INPUTGROUP, theme)(inputGroupFactory(Select, Input, Button));
+
+export default ThemedInputGroup;
+export {ThemedInputGroup as InputGroup};

components/input_group/theme.css

@@ -0,0 +1,68 @@
+@import "../colors.css";
+@import "../variables.css";
+
+:root {
+  --input-group-large-padding: calc(.8 * var(--unit));
+  --input-group-normal-padding: calc(.4 * var(--unit));
+  --input-text-border-color: color(var(--color-black) a(12%));
+}
+
+.inputGroup {
+  display: flex;
+
+  & > :first-child {
+    border-top-left-radius: 4px;
+    border-bottom-left-radius: 4px;
+  }
+
+  & > * {
+    border-radius: 0;
+  }
+
+  & > :last-child {
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 4px;
+  }
+
+  & .select_input {
+    min-width: auto;
+  }
+
+  & .input,
+  & .select_input,
+  & .neutral:not([disabled]).flat {
+    border-width: 1px 0 1px 1px;
+    border-style: solid;
+    border-color: var(--input-text-border-color);
+
+    &:last-child {
+      border-right-width: 1px;
+    }
+  }
+
+  & .input {
+    flex: 1;
+  }
+
+  & .bar {
+    display: none;
+  }
+}
+
+.small {
+  & .input {
+    padding: 0;
+  }
+}
+
+.normal {
+  & .input {
+    padding: var(--input-group-normal-padding);
+  }
+}
+
+.large {
+  & .input {
+    padding: var(--input-group-large-padding);
+  }
+}

components/ripple/index.js

@@ -1,4 +1,7 @@
 import rippleFactory from './Ripple';
 import theme from './theme.css';
 
+const ripple = rippleFactory({ theme });
+
 export default options => rippleFactory({ ...options, theme });
+export {ripple};

components/select/CascadeSelect.js

@@ -168,6 +168,7 @@ const factory = (Trigger, SelectInput, Menu, SubMenu, MenuItem) => {
           popupTheme={props.theme}
           popup={menu}>
           <SelectInput
+            theme={props.theme}
             selectedItem={selectedItem}
             isActive={state.open}
             onClick={this.handleSelectToggle} />

components/select/Select.js

@@ -125,6 +125,7 @@ const factory = (Trigger, SelectInput, Menu, MenuItem) => {
           popupTheme={props.theme}
           popup={menu}>
           <SelectInput
+            theme={props.theme}
             selectedItem={selectedItem}
             isActive={state.open}
             onClick={this.handleSelectToggle} />

components/select_input/SelectInput.js

@@ -1,48 +1,55 @@
 import React, { PropTypes } from 'react';
-import Button from '../button';
 import {CaretDownIcon} from '../font_icon';
 import classnames from 'classnames';
 
-class SelectInput extends React.Component {
-  static propTypes = {
-    // 选择的值
-    selectedItem: PropTypes.object,
-    // 下拉框激活
-    isActive: PropTypes.bool,
-    placeholder: PropTypes.string,
-    theme: PropTypes.object,
-    onClick: PropTypes.func,
+const factory = (ripple) => {
+  class SelectInput extends React.Component {
+    static propTypes = {
+      // 选择的值
+      selectedItem: PropTypes.object,
+      // 下拉框激活
+      isActive: PropTypes.bool,
+      placeholder: PropTypes.string,
+      theme: PropTypes.object,
+      onClick: PropTypes.func,
+    }
+
+    static defaultProps = {
+      isActive: false,
+      placeholder: '',
+    }
+
+    render () {
+      const {
+        selectedItem,
+        placeholder,
+        theme,
+        isActive,
+        onClick,
+        children,
+        ...other
+      } = this.props;
+
+      const iconClasses = classnames({
+        [theme.open]: isActive,
+      }, theme.arrow);
+
+      return (
+        <button
+          type="button"
+          data-react-toolbox="select_input"
+          onClick={onClick}
+          className={theme.select_input}
+          {...other}>
+          <div className={theme.value}>{selectedItem.label || placeholder}</div>
+          <CaretDownIcon className={iconClasses} />
+          {children}
+        </button>
+      );
+    }
   }
 
-  static defaultProps = {
-    isActive: false,
-    placeholder: '',
-  }
-
-  render () {
-    const {
-      selectedItem,
-      placeholder,
-      theme,
-      isActive,
-      onClick,
-    } = this.props;
-
-    const iconClasses = classnames({
-      [theme.open]: isActive,
-    }, theme.arrow);
-
-
-
-    return (
-      <Button
-        onClick={onClick}
-        className={theme.select_input}>
-        <div className={theme.value}>{selectedItem.label || placeholder}</div>
-        <CaretDownIcon className={iconClasses} />
-      </Button>
-    );
-  }
+  return ripple(SelectInput);
 }
 
-export default SelectInput;
+export {factory as selectInputFactory};

components/select_input/config.css

@@ -0,0 +1,7 @@
+:root {
+  --input-background-color: var(--color-white);
+  --input-border-color: var(--palette-grey-300);
+  --input-field-padding: calc(.8 * var(--unit));
+  --input-line-height: 26px;
+  --input-color: var(--palette-grey-900);
+}

components/select_input/index.js

@@ -1,9 +1,11 @@
-import SelectInput from './SelectInput';
-import theme from './theme.css';
 import { themr } from 'react-css-themr';
 import { SELECT_INPUT } from '../identifiers';
+import {selectInputFactory} from './SelectInput';
+import themedRippleFactory from '../ripple';
+import theme from './theme.css';
 
+const SelectInput = selectInputFactory(themedRippleFactory({centered: false }));
 const ThemedSelectInput = themr(SELECT_INPUT, theme)(SelectInput);
 
 export default ThemedSelectInput;
-export {ThemedSelectInput};
+export {ThemedSelectInput as SelectInput};