ClearableLabeledInput.js 6.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192
  1. import _defineProperty from 'babel-runtime/helpers/defineProperty';
  2. import classNames from 'classnames';
  3. import Icon from '../icon';
  4. import { getInputClassName } from './Input';
  5. import PropTypes from '../_util/vue-types';
  6. import { cloneElement } from '../_util/vnode';
  7. import { getComponentFromProp } from '../_util/props-util';
  8. export function hasPrefixSuffix(instance) {
  9. return !!(getComponentFromProp(instance, 'prefix') || getComponentFromProp(instance, 'suffix') || instance.$props.allowClear);
  10. }
  11. var ClearableInputType = ['text', 'input'];
  12. var ClearableLabeledInput = {
  13. props: {
  14. prefixCls: PropTypes.string,
  15. inputType: PropTypes.oneOf(ClearableInputType),
  16. value: PropTypes.any,
  17. defaultValue: PropTypes.any,
  18. allowClear: PropTypes.bool,
  19. element: PropTypes.any,
  20. handleReset: PropTypes.func,
  21. disabled: PropTypes.bool,
  22. size: PropTypes.oneOf(['small', 'large', 'default']),
  23. suffix: PropTypes.any,
  24. prefix: PropTypes.any,
  25. addonBefore: PropTypes.any,
  26. addonAfter: PropTypes.any,
  27. className: PropTypes.string,
  28. readOnly: PropTypes.bool
  29. },
  30. methods: {
  31. renderClearIcon: function renderClearIcon(prefixCls) {
  32. var h = this.$createElement;
  33. var _$props = this.$props,
  34. allowClear = _$props.allowClear,
  35. value = _$props.value,
  36. disabled = _$props.disabled,
  37. readOnly = _$props.readOnly,
  38. inputType = _$props.inputType,
  39. handleReset = _$props.handleReset;
  40. if (!allowClear || disabled || readOnly || value === undefined || value === null || value === '') {
  41. return null;
  42. }
  43. var className = inputType === ClearableInputType[0] ? prefixCls + '-textarea-clear-icon' : prefixCls + '-clear-icon';
  44. return h(Icon, {
  45. attrs: {
  46. type: 'close-circle',
  47. theme: 'filled',
  48. role: 'button'
  49. },
  50. on: {
  51. 'click': handleReset
  52. },
  53. 'class': className });
  54. },
  55. renderSuffix: function renderSuffix(prefixCls) {
  56. var h = this.$createElement;
  57. var _$props2 = this.$props,
  58. suffix = _$props2.suffix,
  59. allowClear = _$props2.allowClear;
  60. if (suffix || allowClear) {
  61. return h(
  62. 'span',
  63. { 'class': prefixCls + '-suffix' },
  64. [this.renderClearIcon(prefixCls), suffix]
  65. );
  66. }
  67. return null;
  68. },
  69. renderLabeledIcon: function renderLabeledIcon(prefixCls, element) {
  70. var _classNames;
  71. var h = this.$createElement;
  72. var props = this.$props;
  73. var suffix = this.renderSuffix(prefixCls);
  74. if (!hasPrefixSuffix(this)) {
  75. return cloneElement(element, {
  76. props: { value: props.value }
  77. });
  78. }
  79. var prefix = props.prefix ? h(
  80. 'span',
  81. { 'class': prefixCls + '-prefix' },
  82. [props.prefix]
  83. ) : null;
  84. var affixWrapperCls = classNames(props.className, prefixCls + '-affix-wrapper', (_classNames = {}, _defineProperty(_classNames, prefixCls + '-affix-wrapper-sm', props.size === 'small'), _defineProperty(_classNames, prefixCls + '-affix-wrapper-lg', props.size === 'large'), _defineProperty(_classNames, prefixCls + '-affix-wrapper-input-with-clear-btn', props.suffix && props.allowClear && this.$props.value), _classNames));
  85. return h(
  86. 'span',
  87. { 'class': affixWrapperCls, style: props.style },
  88. [prefix, cloneElement(element, {
  89. style: null,
  90. props: { value: props.value },
  91. 'class': getInputClassName(prefixCls, props.size, props.disabled)
  92. }), suffix]
  93. );
  94. },
  95. renderInputWithLabel: function renderInputWithLabel(prefixCls, labeledElement) {
  96. var _classNames3;
  97. var h = this.$createElement;
  98. var _$props3 = this.$props,
  99. addonBefore = _$props3.addonBefore,
  100. addonAfter = _$props3.addonAfter,
  101. style = _$props3.style,
  102. size = _$props3.size,
  103. className = _$props3.className;
  104. // Not wrap when there is not addons
  105. if (!addonBefore && !addonAfter) {
  106. return labeledElement;
  107. }
  108. var wrapperClassName = prefixCls + '-group';
  109. var addonClassName = wrapperClassName + '-addon';
  110. var addonBeforeNode = addonBefore ? h(
  111. 'span',
  112. { 'class': addonClassName },
  113. [addonBefore]
  114. ) : null;
  115. var addonAfterNode = addonAfter ? h(
  116. 'span',
  117. { 'class': addonClassName },
  118. [addonAfter]
  119. ) : null;
  120. var mergedWrapperClassName = classNames(prefixCls + '-wrapper', _defineProperty({}, wrapperClassName, addonBefore || addonAfter));
  121. var mergedGroupClassName = classNames(className, prefixCls + '-group-wrapper', (_classNames3 = {}, _defineProperty(_classNames3, prefixCls + '-group-wrapper-sm', size === 'small'), _defineProperty(_classNames3, prefixCls + '-group-wrapper-lg', size === 'large'), _classNames3));
  122. // Need another wrapper for changing display:table to display:inline-block
  123. // and put style prop in wrapper
  124. return h(
  125. 'span',
  126. { 'class': mergedGroupClassName, style: style },
  127. [h(
  128. 'span',
  129. { 'class': mergedWrapperClassName },
  130. [addonBeforeNode, cloneElement(labeledElement, { style: null }), addonAfterNode]
  131. )]
  132. );
  133. },
  134. renderTextAreaWithClearIcon: function renderTextAreaWithClearIcon(prefixCls, element) {
  135. var h = this.$createElement;
  136. var _$props4 = this.$props,
  137. value = _$props4.value,
  138. allowClear = _$props4.allowClear,
  139. className = _$props4.className,
  140. style = _$props4.style;
  141. if (!allowClear) {
  142. return cloneElement(element, {
  143. props: { value: value }
  144. });
  145. }
  146. var affixWrapperCls = classNames(className, prefixCls + '-affix-wrapper', prefixCls + '-affix-wrapper-textarea-with-clear-btn');
  147. return h(
  148. 'span',
  149. { 'class': affixWrapperCls, style: style },
  150. [cloneElement(element, {
  151. style: null,
  152. props: { value: value }
  153. }), this.renderClearIcon(prefixCls)]
  154. );
  155. },
  156. renderClearableLabeledInput: function renderClearableLabeledInput() {
  157. var _$props5 = this.$props,
  158. prefixCls = _$props5.prefixCls,
  159. inputType = _$props5.inputType,
  160. element = _$props5.element;
  161. if (inputType === ClearableInputType[0]) {
  162. return this.renderTextAreaWithClearIcon(prefixCls, element);
  163. }
  164. return this.renderInputWithLabel(prefixCls, this.renderLabeledIcon(prefixCls, element));
  165. }
  166. },
  167. render: function render() {
  168. return this.renderClearableLabeledInput();
  169. }
  170. };
  171. export default ClearableLabeledInput;