textarea.js 3.3 KB

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