ClearableLabeledInput.js 7.4 KB

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