react-base-guide/lib/components/textarea/base.js

react ui components

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.TextareaHidden = exports.TextareaBase = void 0;
const styled_components_1 = __importDefault(require("styled-components"));
const add_custom_style_1 = __importDefault(require("../../utils/add-custom-style"));
const getBase = (p) => `
  display: block;
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: ${p.autosize ? (p.height || "38px") : "38px"};
  min-height: ${p.minHeight || "38px"};
  padding: 8px 16px;
  padding-bottom: 6px;
  border-radius: ${p.theme.radius.element};
  outline: none;
  font-size: 14px;
  line-height: 22px;
  transition: height 0.1s, border 0.3s;
  white-space: pre-wrap;
  word-wrap: break-word;
`;
const TextareaBase = styled_components_1.default.textarea `
  ${p => getBase(p)}
  background: transparent;
  color: ${p => p.theme.palette.text.primary};
  overflow: ${p => p.autosize ? "hidden" : "auto"};
  resize: none;
  border: 1px solid transparent;

  &::placeholder {
    color: ${p => p.theme.palette.text.placeholder};
  }
    
  &:disabled {
    background: ${p => p.theme.palette.element.disabled};
    border-color: ${p => p.theme.palette.element.disabled};
    color: ${p => p.theme.palette.text.secondary};
    pointer-events: none;
  }
  
  ${p => (0, add_custom_style_1.default)(p.styled)}
`;
exports.TextareaBase = TextareaBase;
const TextareaHidden = styled_components_1.default.div `
  ${p => getBase(p)}
  border: 1px solid ${p => p.theme.palette.element.primary};
  position: absolute;
  pointer-events: none;
  height: auto;
  opacity: 0;
  top: 0;
  left: 0;
`;
exports.TextareaHidden = TextareaHidden;
//# sourceMappingURL=base.js.map