textarea.js 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125
  1. "use strict";
  2. Object.defineProperty(exports, "__esModule", {
  3. value: true
  4. });
  5. exports.default = void 0;
  6. Object.defineProperty(exports, "initComponentToken", {
  7. enumerable: true,
  8. get: function () {
  9. return _token.initComponentToken;
  10. }
  11. });
  12. Object.defineProperty(exports, "initInputToken", {
  13. enumerable: true,
  14. get: function () {
  15. return _token.initInputToken;
  16. }
  17. });
  18. var _internal = require("../../theme/internal");
  19. var _token = require("./token");
  20. const genTextAreaStyle = token => {
  21. const {
  22. componentCls,
  23. paddingLG
  24. } = token;
  25. const textareaPrefixCls = `${componentCls}-textarea`;
  26. return {
  27. // Raw Textarea
  28. [`textarea${componentCls}`]: {
  29. maxWidth: '100%',
  30. // prevent textarea resize from coming out of its container
  31. height: 'auto',
  32. minHeight: token.controlHeight,
  33. lineHeight: token.lineHeight,
  34. verticalAlign: 'bottom',
  35. transition: `all ${token.motionDurationSlow}`,
  36. resize: 'vertical',
  37. [`&${componentCls}-mouse-active`]: {
  38. transition: `all ${token.motionDurationSlow}, height 0s, width 0s`
  39. }
  40. },
  41. // Wrapper for resize
  42. [`${componentCls}-textarea-affix-wrapper-resize-dirty`]: {
  43. width: 'auto'
  44. },
  45. [textareaPrefixCls]: {
  46. position: 'relative',
  47. '&-show-count': {
  48. [`${componentCls}-data-count`]: {
  49. position: 'absolute',
  50. bottom: token.calc(token.fontSize).mul(token.lineHeight).mul(-1).equal(),
  51. insetInlineEnd: 0,
  52. color: token.colorTextDescription,
  53. whiteSpace: 'nowrap',
  54. pointerEvents: 'none'
  55. }
  56. },
  57. [`
  58. &-allow-clear > ${componentCls},
  59. &-affix-wrapper${textareaPrefixCls}-has-feedback ${componentCls}
  60. `]: {
  61. paddingInlineEnd: paddingLG
  62. },
  63. [`&-affix-wrapper${componentCls}-affix-wrapper`]: {
  64. padding: 0,
  65. [`> textarea${componentCls}`]: {
  66. fontSize: 'inherit',
  67. border: 'none',
  68. outline: 'none',
  69. background: 'transparent',
  70. minHeight: token.calc(token.controlHeight).sub(token.calc(token.lineWidth).mul(2)).equal(),
  71. '&:focus': {
  72. boxShadow: 'none !important'
  73. }
  74. },
  75. [`${componentCls}-suffix`]: {
  76. margin: 0,
  77. '> *:not(:last-child)': {
  78. marginInline: 0
  79. },
  80. // Clear Icon
  81. [`${componentCls}-clear-icon`]: {
  82. position: 'absolute',
  83. insetInlineEnd: token.paddingInline,
  84. insetBlockStart: token.paddingXS
  85. },
  86. // Feedback Icon
  87. [`${textareaPrefixCls}-suffix`]: {
  88. position: 'absolute',
  89. top: 0,
  90. insetInlineEnd: token.paddingInline,
  91. bottom: 0,
  92. zIndex: 1,
  93. display: 'inline-flex',
  94. alignItems: 'center',
  95. margin: 'auto',
  96. pointerEvents: 'none'
  97. }
  98. }
  99. },
  100. [`&-affix-wrapper${componentCls}-affix-wrapper-rtl`]: {
  101. [`${componentCls}-suffix`]: {
  102. [`${componentCls}-data-count`]: {
  103. direction: 'ltr',
  104. insetInlineStart: 0
  105. }
  106. }
  107. },
  108. [`&-affix-wrapper${componentCls}-affix-wrapper-sm`]: {
  109. [`${componentCls}-suffix`]: {
  110. [`${componentCls}-clear-icon`]: {
  111. insetInlineEnd: token.paddingInlineSM
  112. }
  113. }
  114. }
  115. }
  116. };
  117. };
  118. // ============================== Export ==============================
  119. var _default = exports.default = (0, _internal.genStyleHooks)(['Input', 'TextArea'], token => {
  120. const inputToken = (0, _internal.mergeToken)(token, (0, _token.initInputToken)(token));
  121. return genTextAreaStyle(inputToken);
  122. }, _token.initComponentToken, {
  123. resetFont: false
  124. });