Skip to content
This repository was archived by the owner on Feb 10, 2023. It is now read-only.

Commit ee3fd0f

Browse files
cquirozcquiroz
committed
FormTextArea facade
Signed-off-by: Carlos Quiroz <carlos.m.quiroz@gmail.com>
1 parent 52e12e4 commit ee3fd0f

File tree

4 files changed

+225
-2
lines changed

4 files changed

+225
-2
lines changed

‎CHANGELOG.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
## 0.4.12
44

55
* Add TextArea facade
6+
* Add FormTextArea facade
67

78
## 0.4.11
89

‎facade/src/main/scala/react/semanticui/addons/textarea/TextArea.scala

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,8 +26,8 @@ final case class TextArea(
2626
}
2727

2828
object TextArea {
29-
type Event = (Form.ReactFormEvent, TextAreaProps) => Callback
30-
private type RawEvent = js.Function2[Form.ReactFormEvent, TextAreaProps, Unit]
29+
type Event = (Form.ReactFormEvent, TextAreaProps) => Callback
30+
type RawEvent = js.Function2[Form.ReactFormEvent, TextAreaProps, Unit]
3131

3232
@js.native
3333
@JSImport("semantic-ui-react", "TextArea")

‎facade/src/main/scala/react/semanticui/collections/form/FormTextArea.scala

Lines changed: 184 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,184 @@
1+
package react.semanticui.collections.form
2+
3+
import scala.scalajs.js
4+
import scala.scalajs.js.|
5+
import js.annotation._
6+
import japgolly.scalajs.react._
7+
import react.common.style._
8+
import react.common._
9+
import react.semanticui._
10+
import react.semanticui.elements.label.Label
11+
import react.semanticui.{ raw => suiraw }
12+
import react.semanticui.addons.textarea.TextArea
13+
import japgolly.scalajs.react.vdom.TagMod
14+
import japgolly.scalajs.react.raw.JsNumber
15+
import japgolly.scalajs.react.vdom.VdomNode
16+
17+
final case class FormTextArea(
18+
as: js.UndefOr[AsC] = js.undefined,
19+
className: js.UndefOr[String] = js.undefined,
20+
clazz: js.UndefOr[Css] = js.undefined,
21+
content: js.UndefOr[ShorthandS[VdomNode]] = js.undefined,
22+
control: js.UndefOr[String] = js.undefined,
23+
disabled: js.UndefOr[Boolean] = js.undefined,
24+
error: js.UndefOr[ShorthandB[Label]] = js.undefined,
25+
inline: js.UndefOr[Boolean] = js.undefined,
26+
label: js.UndefOr[ShorthandS[Label]] = js.undefined,
27+
onChange: js.UndefOr[Callback] = js.undefined,
28+
onChangeE: js.UndefOr[TextArea.Event] = js.undefined,
29+
onInput: js.UndefOr[Callback] = js.undefined,
30+
onInputE: js.UndefOr[TextArea.Event] = js.undefined,
31+
required: js.UndefOr[Boolean] = js.undefined,
32+
rows: js.UndefOr[Int | String] = js.undefined,
33+
tpe: js.UndefOr[String] = js.undefined,
34+
value: js.UndefOr[String | JsNumber] = js.undefined,
35+
width: js.UndefOr[SemanticWidth] = js.undefined,
36+
override val modifiers: Seq[TagMod] = Seq.empty
37+
) extends GenericComponentPA[FormTextArea.FormFieldProps, FormTextArea] {
38+
override protected def cprops = FormTextArea.props(this)
39+
override protected val component = FormTextArea.component
40+
override def addModifiers(modifiers: Seq[TagMod]) = copy(modifiers = this.modifiers ++ modifiers)
41+
}
42+
43+
object FormTextArea {
44+
45+
@js.native
46+
@JSImport("semantic-ui-react", "FormTextArea")
47+
object RawComponent extends js.Object
48+
49+
@js.native
50+
trait FormFieldProps extends js.Object {
51+
@JSBracketAccess
52+
def apply(key: String): js.Any = js.native
53+
54+
@JSBracketAccess
55+
def update(key: String, v: js.Any): Unit = js.native
56+
57+
/** An element type to render as (string or function). */
58+
var as: js.UndefOr[AsT] = js.native
59+
60+
/** Additional classes. */
61+
var className: js.UndefOr[String] = js.native
62+
63+
/** Shorthand for primary content. */
64+
var content: js.UndefOr[suiraw.SemanticShorthandContent] =
65+
js.undefined
66+
67+
/**
68+
* A form control component (i.e. Dropdown) or HTML tagName (i.e. 'input').
69+
* Extra FormTextArea props are passed to the control component.
70+
* Mutually exclusive with children.
71+
*/
72+
var control: js.UndefOr[String]
73+
74+
/** Individual fields may be disabled. */
75+
var disabled: js.UndefOr[Boolean] = js.native
76+
77+
/** Individual fields may display an error state along with a message. */
78+
var error: js.UndefOr[suiraw.SemanticShorthandItemB[Label.LabelProps]] = js.native
79+
80+
/** A field can have its label next to instead of above it. */
81+
var inline: js.UndefOr[Boolean] = js.native
82+
83+
/** Mutually exclusive with children. */
84+
var label: js.UndefOr[suiraw.SemanticShorthandItemS[Label.LabelProps]] = js.native
85+
86+
/** A field can show that input is mandatory. Requires a label. */
87+
var required: js.UndefOr[Boolean] = js.native
88+
89+
/** Passed to the control component (i.e. <input type='password' />) */
90+
var `type`: js.UndefOr[String] = js.native
91+
92+
/** A field can specify its width in grid columns */
93+
var width: js.UndefOr[suiraw.SemanticWIDTHS] = js.native // | 'equal'
94+
95+
/**
96+
* Called on change.
97+
*
98+
* @param {SyntheticEvent} event - The React SyntheticEvent object
99+
* @param {object} data - All props and the event value.
100+
*/
101+
var onChange: js.UndefOr[TextArea.RawEvent] = js.undefined
102+
103+
/**
104+
* Called on input.
105+
*
106+
* @param {SyntheticEvent} event - The React SyntheticEvent object
107+
* @param {object} data - All props and the event value.
108+
*/
109+
var onInput: js.UndefOr[TextArea.RawEvent] = js.undefined
110+
111+
/** Indicates row count for a TextArea. */
112+
var rows: js.UndefOr[JsNumber | String] = js.undefined
113+
114+
/** The value of the textarea. */
115+
var value: js.UndefOr[JsNumber | String] = js.undefined
116+
}
117+
118+
def props(q: FormTextArea): FormFieldProps =
119+
rawprops(
120+
q.as,
121+
q.className,
122+
q.clazz,
123+
q.content,
124+
q.control,
125+
q.disabled,
126+
q.error,
127+
q.inline,
128+
q.label,
129+
q.onChange,
130+
q.onChangeE,
131+
q.onInput,
132+
q.onInputE,
133+
q.required,
134+
q.rows,
135+
q.tpe,
136+
q.value,
137+
q.width
138+
)
139+
140+
def rawprops(
141+
as: js.UndefOr[AsC] = js.undefined,
142+
className: js.UndefOr[String] = js.undefined,
143+
clazz: js.UndefOr[Css] = js.undefined,
144+
content: js.UndefOr[ShorthandS[VdomNode]] = js.undefined,
145+
control: js.UndefOr[String] = js.undefined,
146+
disabled: js.UndefOr[Boolean] = js.undefined,
147+
error: js.UndefOr[ShorthandB[Label]] = js.undefined,
148+
inline: js.UndefOr[Boolean] = js.undefined,
149+
label: js.UndefOr[ShorthandS[Label]] = js.undefined,
150+
onChange: js.UndefOr[Callback] = js.undefined,
151+
onChangeE: js.UndefOr[TextArea.Event] = js.undefined,
152+
onInput: js.UndefOr[Callback] = js.undefined,
153+
onInputE: js.UndefOr[TextArea.Event] = js.undefined,
154+
required: js.UndefOr[Boolean] = js.undefined,
155+
rows: js.UndefOr[Int | String] = js.undefined,
156+
tpe: js.UndefOr[String] = js.undefined,
157+
value: js.UndefOr[String | JsNumber] = js.undefined,
158+
width: js.UndefOr[SemanticWidth] = js.undefined
159+
): FormFieldProps = {
160+
val p = as.toJsObject[FormFieldProps]
161+
as.toJs.foreach(v => p.as = v)
162+
(className, clazz).toJs.foreach(v => p.className = v)
163+
content.toJs.foreach(v => p.content = v)
164+
control.foreach(v => p.control = v)
165+
disabled.foreach(v => p.disabled = v)
166+
error.toJs.foreach(v => p.error = v)
167+
inline.foreach(v => p.inline = v)
168+
label.toJs.foreach(v => p.label = v)
169+
required.foreach(v => p.required = v)
170+
p.`type` = tpe
171+
width.toJs.foreach(v => p.width = v)
172+
(onChangeE, onChange).toJs.foreach(v => p.onChange = v)
173+
(onInputE, onInput).toJs.foreach(v => p.onInput = v)
174+
rows.foreach(v => p.rows = v)
175+
value.foreach(v => p.value = v)
176+
p
177+
}
178+
179+
private val component =
180+
JsComponent[FormFieldProps, Children.None, Null](RawComponent)
181+
182+
def apply(modifiers: TagMod*): FormTextArea =
183+
FormTextArea(modifiers = modifiers)
184+
}

‎facade/src/test/scala/react/semanticui/collections/form/FormTextAreaTests.scala

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
package react.semanticui.collections.form
2+
3+
import utest._
4+
import japgolly.scalajs.react.test._
5+
import japgolly.scalajs.react.vdom.html_<^._
6+
import react.semanticui.widths._
7+
8+
object FormTextAreaTests extends TestSuite {
9+
val tests = Tests {
10+
test("render") {
11+
val form = FormTextArea()
12+
ReactTestUtils.withNewBodyElement { mountNode =>
13+
form.renderIntoDOM(mountNode)
14+
assert(
15+
mountNode.innerHTML == """<div class="field"><textarea rows="3"></textarea></div>"""
16+
)
17+
}
18+
}
19+
test("width") {
20+
val form = FormTextArea(width = Two)
21+
ReactTestUtils.withNewBodyElement { mountNode =>
22+
form.renderIntoDOM(mountNode)
23+
assert(
24+
mountNode.innerHTML == """<div class="two wide field"><textarea rows="3"></textarea></div>"""
25+
)
26+
}
27+
}
28+
test("value") {
29+
val form = FormTextArea(width = Two, value = "test")
30+
ReactTestUtils.withNewBodyElement { mountNode =>
31+
form.renderIntoDOM(mountNode)
32+
assert(
33+
mountNode.innerHTML == """<div class="two wide field"><textarea rows="3">test</textarea></div>"""
34+
)
35+
}
36+
}
37+
}
38+
}

0 commit comments

Comments
 (0)