shineout 1.8.3 → 1.9.0-rc.3

package/css/Button/Button.js

@@ -83,7 +83,7 @@ function (_PureComponent) {
       disabled: disabled
     }), this.props.className);
 
-    if (href) {
+    if (href && !disabled) {
       return _react.default.createElement("a", (0, _extends2.default)({
         href: href
       }, others, {

package/css/DatePicker/Container.js

@@ -55,6 +55,10 @@ var _locale = require("../locale");
 
 var _config = require("../config");
 
+var _InputTitle = _interopRequireDefault(require("../InputTitle"));
+
+var _styles3 = require("../InputTitle/styles");
+
 var FadeList = (0, _AnimationList.default)(['fade'], 'fast');
 var OptionList = (0, _AbsoluteList.default)(function (_ref) {
   var focus = _ref.focus,
@@ -324,14 +328,15 @@ function (_PureComponent) {
     }
   };
 
-  _proto.handleTextChange = function handleTextChange(date, index) {
+  _proto.handleTextChange = function handleTextChange(date, index, e) {
     var _this4 = this;
 
     var format = this.getFormat();
     var val = date ? _utils.default.format(date, format) : '';
 
     if (!this.props.range) {
-      this.props.onChange(val, this.triggerValueBlur.bind(this, this.handleBlur));
+      var close = !(e && e.target && this.element.contains(e.target));
+      this.props.onChange(val, close ? this.triggerValueBlur.bind(this, this.handleBlur) : undefined);
       return;
     }
 
@@ -416,7 +421,7 @@ function (_PureComponent) {
     var className = (0, _classnames.default)((0, _styles.datepickerClass)('txt', this.state["picker" + key] && 'text-focus'), _utils.default.isInvalid(date) && (0, _styles2.inputClass)('placeholder'));
     var resultFormat = formatResult || this.getFormat();
     return _react.default.createElement(_Text.default, {
-      key: key,
+      key: key || 'single',
       onTextSpanRef: this.bindTextSpan,
       focusElement: this.textSpan,
       className: className,
@@ -433,22 +438,36 @@ function (_PureComponent) {
   };
 
   _proto.renderResult = function renderResult() {
+    var _this6 = this;
+
     var _this$props4 = this.props,
         disabled = _this$props4.disabled,
         range = _this$props4.range,
         placeholder = _this$props4.placeholder,
-        type = _this$props4.type;
+        type = _this$props4.type,
+        innerTitle = _this$props4.innerTitle,
+        inputable = _this$props4.inputable;
     var value = this.props.value;
-    if (!value && range) value = [];
-    var isEmpty = !value || value.length === 0;
+    if (!value && range) value = []; // const isEmpty = !value || value.length === 0
+
     var clearable = this.props.clearable;
     if (disabled === true) clearable = false;
+    var isEmpty = (range ? value : [value]).reduce(function (result, str) {
+      var date = _this6.parseDate(str);
+
+      return result && _utils.default.isInvalid(date);
+    }, true);
     return _react.default.createElement("div", {
       className: (0, _styles.datepickerClass)('result')
+    }, _react.default.createElement(_InputTitle.default, {
+      className: (0, _styles.datepickerClass)('title-box'),
+      contentClass: (0, _styles3.inputTitleClass)('hidable'),
+      innerTitle: innerTitle,
+      open: !isEmpty || inputable && this.state.focus
     }, range ? [this.renderText(value[0], placeholder[0], 0), _react.default.createElement("span", {
       key: "-",
       className: (0, _styles.datepickerClass)('separate')
-    }, "~"), this.renderText(value[1], placeholder[1], 1)] : this.renderText(value, placeholder), _react.default.createElement(_Icon.default, {
+    }, "~"), this.renderText(value[1], placeholder[1], 1)] : this.renderText(value, placeholder)), _react.default.createElement(_Icon.default, {
       className: isEmpty || !clearable ? '' : 'indecator',
       name: type === 'time' ? 'Clock' : 'Calendar'
     }), !isEmpty && clearable && _react.default.createElement(_Icon.default, {
@@ -488,7 +507,7 @@ function (_PureComponent) {
   };
 
   _proto.renderPicker = function renderPicker() {
-    var _this6 = this;
+    var _this7 = this;
 
     if (!this.firstRender) return undefined;
     var _this$props6 = this.props,
@@ -517,7 +536,7 @@ function (_PureComponent) {
       range: range,
       quicks: quicks,
       value: range ? (value || []).map(function (v) {
-        return _this6.parseDate(v);
+        return _this7.parseDate(v);
       }) : this.parseDate(value),
       showTimePicker: !!value,
       allowSingle: allowSingle,
@@ -536,10 +555,11 @@ function (_PureComponent) {
         range = _this$props7.range,
         size = _this$props7.size,
         disabled = _this$props7.disabled,
-        align = _this$props7.align;
+        align = _this$props7.align,
+        innerTitle = _this$props7.innerTitle;
     var focus = this.state.focus;
     var rtl = (0, _config.isRTL)();
-    var className = (0, _styles.datepickerClass)('inner', range && 'range', size && "size-" + size, focus && 'focus', disabled === true && 'disabled', align && "align-" + align, getCurrentPosition(this.state.position), rtl && 'rtl');
+    var className = (0, _styles.datepickerClass)('inner', range && 'range', size && "size-" + size, focus && 'focus', disabled === true && 'disabled', align && "align-" + align, getCurrentPosition(this.state.position), rtl && 'rtl', innerTitle && 'inner-title');
     return _react.default.createElement("div", {
       // eslint-disable-next-line
       tabIndex: disabled === true ? -1 : 0,
@@ -587,7 +607,8 @@ Container.propTypes = {
   onPickerChange: _propTypes.default.func,
   disabledTime: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.func]),
   align: _propTypes.default.oneOf(['left', 'right', 'center']),
-  clearWithUndefined: _propTypes.default.bool
+  clearWithUndefined: _propTypes.default.bool,
+  innerTitle: _propTypes.default.string
 };
 Container.defaultProps = {
   clearable: true,

package/css/DatePicker/Text.js

@@ -46,7 +46,7 @@ function (_PureComponent) {
   var _proto = Text.prototype;
 
   _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
-    if (prevProps.focus !== this.props.focus && this.props.focus && this.element && this.props.focusElement === this.element) {
+    if (prevProps.focus !== this.props.focus && this.props.focus && this.element && (this.props.focusElement === this.element || !this.props.focusElement)) {
       _element.focusElement.end(this.element);
     }
   };
@@ -68,7 +68,7 @@ function (_PureComponent) {
     if (txt === value) return;
 
     if (txt.trim().length === 0) {
-      onChange(undefined, index);
+      onChange(undefined, index, e);
     } else {
       var newValue = _utils.default.toDateWithFormat(txt, format, undefined); // if translate fail, clear
 
@@ -77,7 +77,7 @@ function (_PureComponent) {
         this.element.innerText = null;
       }
 
-      onChange(newValue, index);
+      onChange(newValue, index, e);
     }
   };
 

package/css/DatePicker/index.d.ts

@@ -251,6 +251,15 @@ FormItemStandardProps<T>,
    * default: none
    */
   onPickerChange?: (value: DatePickerValue, quickSelect: QuickSelect | void, areaType: AreaType) => void;
+
+  /**
+   * inner title
+   *
+   * 内嵌标题
+   *
+   * default: -
+   */
+  innerTitle?: string;
 }
 
 declare class DatePicker extends React.Component<DatePickerProps, {}> {

package/css/DatePicker/styles/datepicker.css

@@ -26,6 +26,15 @@ label.so-datepicker-r-time {
   padding: 0 0 8px 0;
   text-align: center;
 }
+.so-datepicker-title-box > .so-input-title-box-content {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+}
+.so-datepicker-range .so-datepicker-title-box .so-datepicker-txt:not(.so-datepicker-text-focus) {
+  background: var(--primary-color-fade-10, rgba(51, 153, 255, 0.1));
+  border-radius: 50px;
+}
 .so-datepicker-inner {
   width: 100%;
   padding: 6px 24px 6px 12px;
@@ -38,6 +47,15 @@ label.so-datepicker-r-time {
 .so-datepicker-size-large.so-datepicker-inner {
   padding: 8px 28px 8px 16px;
 }
+.so-datepicker-inner-title {
+  padding: 4px 20px 4px 8px;
+}
+.so-datepicker-size-small.so-datepicker-inner-title {
+  padding: 2px 20px 2px 8px;
+}
+.so-datepicker-size-large.so-datepicker-inner-title {
+  padding: 4px 20px 4px 8px;
+}
 .so-datepicker-result {
   position: relative;
   display: -webkit-box;
@@ -86,7 +104,7 @@ label.so-datepicker-r-time {
 .so-datepicker-separate {
   margin: 0 8px;
 }
-.so-datepicker-text-focus {
+.so-datepicker-txt.so-datepicker-text-focus {
   background: var(--primary-color, #3399ff);
   color: #fff;
   border-radius: 50px;
@@ -492,6 +510,15 @@ label.so-datepicker-r-time {
   margin-right: 0;
   margin-left: -16px;
 }
+.so-datepicker-rtl.so-datepicker-inner-title {
+  padding: 4px 8px 4px 20px;
+}
+.so-datepicker-rtl.so-datepicker-size-small.so-datepicker-inner-title {
+  padding: 2px 8px 2px 20px;
+}
+.so-datepicker-rtl.so-datepicker-size-large.so-datepicker-inner-title {
+  padding: 4px 8px 4px 20px;
+}
 .so-datepicker-rtl .so-datepicker-picker .so-datepicker-header .so-datepicker-left,
 .so-datepicker-rtl .so-datepicker-picker .so-datepicker-header .so-datepicker-right {
   -webkit-transform: rotate(180deg);

package/css/EditableArea/EditableArea.js

@@ -5,6 +5,8 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports.default = void 0;
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
 
 var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
@@ -27,6 +29,14 @@ var _icons = _interopRequireDefault(require("../icons"));
 
 var _element = require("../utils/dom/element");
 
+var _styles2 = require("../Input/styles");
+
+var _InputTitle = _interopRequireDefault(require("../InputTitle"));
+
+var _styles3 = require("../InputTitle/styles");
+
+var noop = function noop() {};
+
 function formatShowValue(value) {
   if (!value && value !== 0) return '';
   var arr = String(value).split('\n');
@@ -50,6 +60,7 @@ function (_React$PureComponent) {
     _this.bindContainer = _this.bindElement.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), 'container');
     _this.bindInput = _this.bindElement.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), 'input');
     _this.renderInput = _this.renderInput.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
+    _this.renderPlace = _this.renderPlace.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
     _this.renderTextarea = _this.renderTextarea.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
     _this.onChange = _this.onChange.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
     _this.onBlur = _this.onBlur.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
@@ -82,6 +93,12 @@ function (_React$PureComponent) {
     if (typeof onBlur === 'function') onBlur(e);
   };
 
+  _proto.getErrorProps = function getErrorProps() {
+    var p = {};
+    if ('error' in this.props) p.error = this.props.error;
+    return p;
+  };
+
   _proto.updateShowTextarea = function updateShowTextarea(flag) {
     if (flag && this.input) {
       this.width = (0, _element.getParent)(this.input, "." + (0, _styles.editableAreaClass)('input')).offsetWidth;
@@ -90,6 +107,10 @@ function (_React$PureComponent) {
     this.setState({
       showTextarea: flag
     });
+
+    if (this.props.onShowTextareaChange) {
+      this.props.onShowTextareaChange(flag);
+    }
   };
 
   _proto.handleFocus = function handleFocus(e) {
@@ -110,52 +131,98 @@ function (_React$PureComponent) {
   _proto.renderTextarea = function renderTextarea() {
     var showTextarea = this.state.showTextarea;
     var _this$props = this.props,
-        delay = _this$props.delay,
         placeholder = _this$props.placeholder,
         maxHeight = _this$props.maxHeight,
-        value = _this$props.value;
+        value = _this$props.value,
+        innerTitle = _this$props.innerTitle,
+        placeTitle = _this$props.placeTitle,
+        renderFooter = _this$props.renderFooter;
     if (!showTextarea) return null;
     return _react.default.createElement("div", {
       ref: this.bindContainer
-    }, _react.default.createElement(_Textarea.default, {
+    }, _react.default.createElement(_Textarea.default, (0, _extends2.default)({
       className: (0, _styles.editableAreaClass)('text-area'),
       autosize: true,
+      innerTitle: innerTitle,
+      placeTitle: placeTitle,
       value: value,
       rows: 1,
-      delay: delay,
+      delay: 0,
       onChange: this.onChange,
       onBlur: this.onBlur,
       onFocus: this.handleFocus,
       placeholder: placeholder,
-      maxHeight: maxHeight
-    }));
+      maxHeight: maxHeight,
+      renderFooter: renderFooter
+    }, this.getErrorProps())));
   };
 
-  _proto.renderInput = function renderInput() {
+  _proto.renderResult = function renderResult() {
     var _this$props2 = this.props,
         placeholder = _this$props2.placeholder,
         disabled = _this$props2.disabled,
-        value = _this$props2.value;
-    return _react.default.createElement(_Input.default, {
+        value = _this$props2.value,
+        renderResult = _this$props2.renderResult,
+        placeTitle = _this$props2.placeTitle,
+        innerTitle = _this$props2.innerTitle,
+        error = _this$props2.error;
+    var result = renderResult(value);
+    return _react.default.createElement("div", {
+      tabIndex: disabled ? -1 : 0,
+      className: (0, _classnames.default)((0, _styles.editableAreaClass)('input'), (0, _styles2.inputClass)('_', error && 'invalid')),
+      onFocus: this.showPop
+    }, _react.default.createElement(_InputTitle.default, {
+      placeTitle: placeTitle,
+      innerTitle: innerTitle,
+      open: !!value
+    }, _react.default.createElement("div", {
+      className: (0, _classnames.default)((0, _styles2.inputClass)('spare'), innerTitle && (0, _styles3.inputTitleClass)('hidable')),
+      ref: this.bindInput
+    }, result || _react.default.createElement("div", {
+      className: (0, _styles2.inputClass)('placeholder')
+    }, placeholder || _react.default.createElement("br", null)))));
+  };
+
+  _proto.renderInput = function renderInput() {
+    var _this$props3 = this.props,
+        placeholder = _this$props3.placeholder,
+        disabled = _this$props3.disabled,
+        value = _this$props3.value,
+        innerTitle = _this$props3.innerTitle,
+        placeTitle = _this$props3.placeTitle;
+    return _react.default.createElement(_Input.default, (0, _extends2.default)({
+      innerTitle: innerTitle,
+      placeTitle: placeTitle,
       forwardedRef: this.bindInput,
       placeholder: placeholder,
       value: formatShowValue(value),
+      onChange: noop,
       className: (0, _styles.editableAreaClass)('input'),
       onFocus: this.showPop,
       disabled: disabled
-    });
+    }, this.getErrorProps()));
+  };
+
+  _proto.renderPlace = function renderPlace() {
+    var renderResult = this.props.renderResult;
+
+    if (renderResult && typeof renderResult === 'function') {
+      return this.renderResult();
+    }
+
+    return this.renderInput();
   };
 
   _proto.render = function render() {
     var showTextarea = this.state.showTextarea;
-    var _this$props3 = this.props,
-        width = _this$props3.width,
-        style = _this$props3.style,
-        className = _this$props3.className,
-        bordered = _this$props3.bordered,
-        clearable = _this$props3.clearable,
-        getPopupContainer = _this$props3.getPopupContainer,
-        value = _this$props3.value;
+    var _this$props4 = this.props,
+        width = _this$props4.width,
+        style = _this$props4.style,
+        className = _this$props4.className,
+        bordered = _this$props4.bordered,
+        clearable = _this$props4.clearable,
+        getPopupContainer = _this$props4.getPopupContainer,
+        value = _this$props4.value;
     var cls = (0, _classnames.default)(className, (0, _styles.editableAreaClass)('_', !bordered && 'none-bordered'));
     var ms = Object.assign({
       width: width
@@ -166,7 +233,7 @@ function (_React$PureComponent) {
     return _react.default.createElement("div", {
       className: cls,
       style: ms
-    }, this.renderInput(), _react.default.createElement(_Popover.default, {
+    }, this.renderPlace(), _react.default.createElement(_Popover.default, {
       visible: showTextarea,
       showArrow: false,
       className: (0, _styles.editableAreaClass)('popover'),
@@ -191,7 +258,6 @@ Editable.propTypes = {
   value: _propTypes.default.string,
   style: _propTypes.default.object,
   className: _propTypes.default.string,
-  delay: _propTypes.default.number,
   bordered: _propTypes.default.bool,
   placeholder: _propTypes.default.string,
   onFocus: _propTypes.default.func,
@@ -199,7 +265,13 @@ Editable.propTypes = {
   clearable: _propTypes.default.bool,
   getPopupContainer: _propTypes.default.func,
   maxHeight: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
-  width: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])
+  width: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+  innerTitle: _propTypes.default.node,
+  placeTitle: _propTypes.default.node,
+  renderFooter: _propTypes.default.func,
+  renderResult: _propTypes.default.func,
+  onShowTextareaChange: _propTypes.default.func,
+  error: _propTypes.default.object
 };
 var _default = Editable;
 exports.default = _default;

package/css/EditableArea/index.d.ts

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { ReactNode } from "react"
 import {StandardProps, FormItemStandardProps} from '../@types/common'
 
 export interface EditableAreaProps extends StandardProps, FormItemStandardProps<string> {
@@ -92,6 +92,42 @@ export interface EditableAreaProps extends StandardProps, FormItemStandardProps<
    * default: none
    */
   width?: number | string;
+
+  /**
+   * inner title
+   *
+   * 内嵌标题
+   *
+   * default: -
+   */
+  innerTitle?: ReactNode,
+
+  /**
+   * Placeholder title, which needs to be used together with innerTitle
+   *
+   * 占位标题，需要配合 innerTitle 一起使用
+   *
+   * default: -
+   */
+  placeTitle?: ReactNode,
+
+  /**
+   * render textarea footer
+   *
+   * 渲染 textarea footer
+   *
+   * default: -
+   */
+  renderFooter?: (value: string)=> ReactNode,
+
+  /**
+   * Customize display results
+   *
+   * 自定义显示结果
+   *
+   * default: -
+   */
+  renderResult?: (value: string)=> ReactNode,
 }
 
 declare class EditableArea extends React.PureComponent<EditableAreaProps, any>{}

package/css/Form/styles/form.css

@@ -594,7 +594,8 @@
   overflow: hidden;
 }
 .so-input input,
-.so-input textarea {
+.so-input textarea,
+.so-input-spare {
   display: block;
   width: 100%;
   padding: 6px 12px;
@@ -642,12 +643,32 @@
   line-height: var(--common-line-height, 1.42857143);
   resize: none;
 }
-.so-input input.so-input-number {
+.so-input input.so-input-number:not(.so-input-rtl *) {
+  padding-right: 22px;
+}
+.so-input input.so-input-number + .so-input-clear-wrapper .so-input-clear:not(.so-input-rtl *) {
+  right: 22px;
+}
+.so-input-rtl input.so-input-number {
+  padding-left: 22px;
+}
+.so-input-rtl input.so-input-number + .so-input-clear-wrapper .so-input-clear {
+  left: 22px;
+  right: auto;
+}
+.so-input:not(.so-input-rtl) .so-input-number-title-box .so-input-title-box-title {
   padding-right: 22px;
 }
-.so-input input.so-input-number + .so-input-clear-wrapper .so-input-clear {
+.so-input-rtl .so-input-number-title-box .so-input-title-box-title {
+  padding-left: 22px;
+}
+.so-input:not(.so-input-rtl) .so-input-number-title-box + .so-input-clear-wrapper .so-input-clear {
   right: 22px;
 }
+.so-input-rtl .so-input-number-title-box + .so-input-clear-wrapper .so-input-clear {
+  left: 22px;
+  right: auto;
+}
 textarea.so-input-shadow {
   position: absolute;
   z-index: 0;
@@ -661,19 +682,55 @@ textarea.so-input-auto-size {
 textarea.so-input-textarea-resize {
   resize: vertical;
 }
+.so-input-with-footer {
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+}
+.so-input-with-footer .so-input-footer {
+  padding: 12px 6px;
+  border-top: 1px solid var(--input-border-color, #ced4da);
+}
 .so-input-small {
   font-size: var(--font-size-small, 12px);
   line-height: 1.5;
 }
-.so-input-small input {
+.so-input-small input,
+.so-input-small .so-input-spare {
   padding: 5px 10px;
 }
+.so-input-small ::-webkit-input-placeholder,
+.so-input-small .so-input-placeholder {
+  font-size: var(--font-size-small, 12px);
+}
+.so-input-small ::-ms-input-placeholder,
+.so-input-small .so-input-placeholder {
+  font-size: var(--font-size-small, 12px);
+}
+.so-input-small ::placeholder,
+.so-input-small .so-input-placeholder {
+  font-size: var(--font-size-small, 12px);
+}
 .so-input-large {
   font-size: var(--font-size-large, 18px);
 }
-.so-input-large input {
+.so-input-large input,
+.so-input-large .so-input-spare {
   padding: 8px 12px;
 }
+.so-input-large ::-webkit-input-placeholder,
+.so-input-large .so-input-placeholder {
+  font-size: var(--font-size-large, 18px);
+}
+.so-input-large ::-ms-input-placeholder,
+.so-input-large .so-input-placeholder {
+  font-size: var(--font-size-large, 18px);
+}
+.so-input-large ::placeholder,
+.so-input-large .so-input-placeholder {
+  font-size: var(--font-size-large, 18px);
+}
 .so-input.so-input-rtl {
   direction: rtl;
 }

package/css/Input/Group.js

@@ -16,7 +16,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 function Group(props) {
   var children = props.children,
       style = props.style,
-      other = (0, _objectWithoutPropertiesLoose2.default)(props, ["children", "style"]);
+      inputFocus = props.inputFocus,
+      other = (0, _objectWithoutPropertiesLoose2.default)(props, ["children", "style", "inputFocus"]);
   return _react.Children.toArray(children).map(function (child, i) {
     if (typeof child === 'string') {
       return _react.default.createElement("span", {

package/css/Input/Input.js

@@ -23,11 +23,15 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
+var _styles = require("../InputTitle/styles");
+
 var _cleanProps = _interopRequireDefault(require("../utils/cleanProps"));
 
 var _clear = _interopRequireDefault(require("./clear"));
 
-var _styles = require("./styles");
+var _styles2 = require("./styles");
+
+var _InputTitle = _interopRequireDefault(require("../InputTitle"));
 
 var Input =
 /*#__PURE__*/
@@ -155,7 +159,7 @@ function (_PureComponent) {
       style: {
         minWidth: 'auto'
       },
-      className: (0, _styles.inputClass)('bottom-right', isError ? 'error' : 'tip')
+      className: (0, _styles2.inputClass)('bottom-right', isError ? 'error' : 'tip')
     }, text);
   };
 
@@ -170,11 +174,19 @@ function (_PureComponent) {
         forceChange = _this$props5.forceChange,
         onEnterPress = _this$props5.onEnterPress,
         forwardedRef = _this$props5.forwardedRef,
-        other = (0, _objectWithoutPropertiesLoose2.default)(_this$props5, ["type", "defaultValue", "digits", "className", "clearable", "htmlName", "forceChange", "onEnterPress", "forwardedRef"]);
+        innerTitle = _this$props5.innerTitle,
+        inputFocus = _this$props5.inputFocus,
+        other = (0, _objectWithoutPropertiesLoose2.default)(_this$props5, ["type", "defaultValue", "digits", "className", "clearable", "htmlName", "forceChange", "onEnterPress", "forwardedRef", "innerTitle", "inputFocus"]);
     var value = this.props.value == null ? '' : this.props.value;
     var showClear = !other.disabled && clearable && value !== '';
-    var mc = (0, _classnames.default)(className, showClear && (0, _styles.inputClass)('clearable'));
-    return [_react.default.createElement("input", (0, _extends2.default)({}, (0, _cleanProps.default)(other), {
+    var mc = (0, _classnames.default)(className, showClear && (0, _styles2.inputClass)('clearable'), innerTitle && (0, _styles.inputTitleClass)('hidable'));
+    var isNumber = className && className.indexOf((0, _styles2.inputClass)('number')) > -1;
+    return [_react.default.createElement(_InputTitle.default, {
+      className: isNumber ? (0, _styles2.inputClass)('number-title-box') : undefined,
+      key: "input",
+      innerTitle: innerTitle,
+      open: !!inputFocus || !!value
+    }, _react.default.createElement("input", (0, _extends2.default)({}, (0, _cleanProps.default)(other), {
       className: mc || undefined,
       name: other.name || htmlName,
       type: type === 'password' ? type : 'text',
@@ -185,7 +197,7 @@ function (_PureComponent) {
       onKeyDown: this.handleKeyDown,
       onKeyUp: this.handleKeyUp,
       onBlur: this.handleBlur
-    })), showClear && _react.default.createElement(_clear.default, {
+    }))), showClear && _react.default.createElement(_clear.default, {
       onClick: this.handleChange,
       key: "close"
     }), this.renderInfo()];
@@ -210,7 +222,9 @@ Input.propTypes = {
   info: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.number]),
   forwardedRef: _propTypes.default.func,
   onKeyDown: _propTypes.default.func,
-  onKeyUp: _propTypes.default.func
+  onKeyUp: _propTypes.default.func,
+  innerTitle: _propTypes.default.string,
+  inputFocus: _propTypes.default.bool
 };
 Input.defaultProps = {
   type: 'text'