/
Textarea.purs
112 lines (105 loc) · 3.26 KB
/
Textarea.purs
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
module Lumi.Components.Textarea where
import Prelude
import Data.Maybe (Maybe(..))
import Data.Nullable (Nullable, toNullable)
import Effect.Uncurried (mkEffectFn1)
import JSS (JSS, jss)
import Lumi.Components.Input (lumiInputDisabledStyles, lumiInputFocusInvalidStyles, lumiInputFocusStyles, lumiInputHoverStyles, lumiInputInvalidStyles, lumiInputPlaceholderStyles, lumiInputStyles)
import React.Basic (Component, JSX, createComponent, element, makeStateless)
import React.Basic.DOM (CSS, css, unsafeCreateDOMComponent)
import React.Basic.Events (EventHandler)
type TextareaProps
= { autoComplete :: String
, disabled :: Boolean
, lines :: Int
, maxLength :: Nullable Number
, minLength :: Nullable Number
, name :: String
, onBlur :: Nullable EventHandler
, onChange :: EventHandler
, onFocus :: Nullable EventHandler
, placeholder :: String
, readOnly :: Boolean
, required :: Boolean
, resizable :: Boolean
, style :: CSS
, testId :: Nullable String
, value :: String
}
component :: Component TextareaProps
component = createComponent "Textarea"
textarea :: TextareaProps -> JSX
textarea = makeStateless component render
where
render props =
element (unsafeCreateDOMComponent "textarea")
{ "data-testid": props.testId
, "data-disable-resize": not props.resizable
, autoComplete: props.autoComplete
, className: "lumi"
, disabled: props.disabled
, maxLength: props.maxLength
, minLength: props.minLength
, name: props.name
, onBlur: props.onBlur
, onChange: props.onChange
, onFocus: props.onFocus
, placeholder: props.placeholder
, required: props.required
, readOnly: props.readOnly
, rows: props.lines
, style: props.style
, value: props.value
}
defaults :: TextareaProps
defaults =
{ autoComplete: "on"
, disabled: false
, lines: 2
, maxLength: toNullable Nothing
, minLength: toNullable Nothing
, name: ""
, onBlur: toNullable Nothing
, onChange: mkEffectFn1 $ pure <<< const unit
, onFocus: toNullable Nothing
, placeholder: ""
, required: false
, readOnly: false
, resizable: true
, style: css {}
, testId: toNullable Nothing
, value: ""
}
styles :: JSS
styles =
jss
{ "@global":
{ "textarea.lumi":
{ fontFamily: "inherit"
, fontSize: "14px"
, lineHeight: "20px"
, touchAction: "manipulation"
, boxSizing: "border-box"
, resize: "vertical"
, extend: lumiInputStyles
, minHeight: "40px"
, height: "unset"
, "@media (min-width: 860px)":
{ minHeight: "32px"
, height: "unset"
}
, "&:hover": lumiInputHoverStyles
, "&:invalid": lumiInputInvalidStyles
, "&:focus":
{ extend: lumiInputFocusStyles
, "&:invalid": lumiInputFocusInvalidStyles
}
, "&:disabled": lumiInputDisabledStyles
, "&::-webkit-input-placeholder": lumiInputPlaceholderStyles
, "&::-moz-placeholder": lumiInputPlaceholderStyles
, "&:-ms-input-placeholder": lumiInputPlaceholderStyles
, "&::placeholder": lumiInputPlaceholderStyles
, "&[data-disable-resize=\"true\"]": { resize: "none" }
}
}
}