فهرست منبع

Implement new `TextArea` component

This component will be used for pasting Azure Stack JSON configuration.
Sergiu Miclea 8 سال پیش
والد
کامیت
1e41d22d34
1فایلهای تغییر یافته به همراه69 افزوده شده و 0 حذف شده
  1. 69 0
      src/components/atoms/TextArea/TextArea.jsx

+ 69 - 0
src/components/atoms/TextArea/TextArea.jsx

@@ -0,0 +1,69 @@
+/*
+Copyright (C) 2017  Cloudbase Solutions SRL
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+You should have received a copy of the GNU Affero General Public License
+along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+import React from 'react'
+import styled from 'styled-components'
+import Palette from '../../styleUtils/Palette'
+import StyleProps from '../../styleUtils/StyleProps'
+
+const getInputWidth = props => {
+  if (props.width) {
+    return props.width
+  }
+
+  if (props.large) {
+    return `${StyleProps.inputSizes.large.width}px`
+  }
+
+  return `${StyleProps.inputSizes.regular.width}px`
+}
+
+const Input = styled.textarea`
+  width: ${props => getInputWidth(props)};
+  height: ${props => props.height || `${StyleProps.inputSizes.regular.height * 2}px`};
+  border-radius: ${StyleProps.borderRadius};
+  background-color: #FFF;
+  border: 1px solid ${props => props.highlight ? Palette.alert : Palette.grayscale[3]};
+  color: ${Palette.black};
+  padding: 8px;
+  font-size: inherit;
+  transition: all ${StyleProps.animations.swift};
+  box-sizing: border-box;
+  font-family: monospace;
+  &:hover {
+    border-color: ${props => props.highlight ? Palette.alert : Palette.primary};
+  }
+  &:focus {
+    border-color: ${props => props.highlight ? Palette.alert : Palette.primary};
+    outline: none;
+  }
+  &:disabled {
+    color: ${Palette.grayscale[3]};
+    border-color: ${Palette.grayscale[0]};
+    background-color: ${Palette.grayscale[0]};
+  }
+  &::placeholder {
+    color: ${Palette.grayscale[3]};
+  }
+`
+
+class TextArea extends React.Component {
+  render() {
+    return (
+      <Input {...this.props} />
+    )
+  }
+}
+
+export default TextArea