This repository was archived by the owner on Jul 30, 2025. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 2
Expand file tree
/
Copy pathdefault.js
More file actions
251 lines (251 loc) · 19.8 KB
/
default.js
File metadata and controls
251 lines (251 loc) · 19.8 KB
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
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
"use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var ej2_react_inputs_1 = require("@syncfusion/ej2-react-inputs");
var sample_base_1 = require("../common/sample-base");
require("./sample.css");
var Default = (function (_super) {
__extends(Default, _super);
function Default() {
return _super !== null && _super.apply(this, arguments) || this;
}
Default.prototype.floatFocus = function (args) {
args.target.parentElement.classList.add('e-input-focus');
};
Default.prototype.floatBlur = function (args) {
args.target.parentElement.classList.remove('e-input-focus');
};
Default.prototype.onIconClick = function (args) {
args.persist();
setTimeout(function () {
args.target.classList.add('e-input-btn-ripple');
}, 500);
};
Default.prototype.onIconUnClick = function (args) {
args.target.classList.remove('e-input-btn-ripple');
};
Default.prototype.render = function () {
return (React.createElement("div", { className: 'control-pane' },
React.createElement("div", { className: 'control-section input-content-wrapper' },
React.createElement("div", { className: "row custom-margin" },
React.createElement("div", { className: "col-xs-6 col-sm-6 col-lg-6 col-md-6" },
React.createElement("b", null, "Floating Label"))),
React.createElement("div", { className: "row custom-margin custom-padding-5" },
React.createElement("div", { className: "col-xs-6 col-sm-6 col-lg-6 col-md-6" },
React.createElement(ej2_react_inputs_1.TextBoxComponent, { placeholder: "First Name", floatLabelType: "Auto" })),
React.createElement("div", { className: "col-xs-6 col-sm-6 col-lg-6 col-md-6" },
React.createElement(ej2_react_inputs_1.TextBoxComponent, { placeholder: "Last Name", floatLabelType: "Auto", enableRtl: true }))),
React.createElement("div", { className: "row custom-margin custom-padding-5" },
React.createElement("div", { className: "col-xs-12 col-sm-12 col-lg-12 col-md-12" },
React.createElement("div", { className: "e-float-input e-input-group" },
React.createElement("input", { type: "text", onFocus: this.floatFocus, onBlur: this.floatBlur, required: true }),
React.createElement("span", { className: "e-float-line" }),
React.createElement("label", { className: "e-float-text" }, "Country"),
React.createElement("span", { className: "e-input-group-icon e-spin-down", onMouseDown: this.onIconClick, onMouseUp: this.onIconUnClick })))),
React.createElement("div", { className: "row custom-margin" },
React.createElement("div", { className: "col-xs-6 col-sm-6 col-lg-6 col-md-6" },
React.createElement("b", null, "Inputs"))),
React.createElement("div", { className: "row custom-margin" },
React.createElement("div", { className: "col-xs-6 col-sm-6 col-lg-6 col-md-6" },
React.createElement("div", { className: "e-input-group" },
React.createElement("input", { className: "e-input", type: "text", onFocus: this.floatFocus, onBlur: this.floatBlur, placeholder: "Enter Name" }))),
React.createElement("div", { className: "col-xs-6 col-sm-6 col-lg-6 col-md-6" },
React.createElement("div", { className: "e-input-group e-rtl" },
React.createElement("input", { className: "e-input", onFocus: this.floatFocus, onBlur: this.floatBlur, type: "text", placeholder: "Last Name" })))),
React.createElement("div", { className: "row custom-margin" },
React.createElement("div", { className: "col-xs-6 col-sm-6 col-lg-6 col-md-6" },
React.createElement("div", { className: "e-input-group" },
React.createElement("input", { className: "e-input", onFocus: this.floatFocus, onBlur: this.floatBlur, type: "password", placeholder: "Password", defaultValue: "password" }))),
React.createElement("div", { className: "col-xs-6 col-sm-6 col-lg-6 col-md-6" },
React.createElement("div", { className: "e-input-group" },
React.createElement("input", { className: "e-input", onFocus: this.floatFocus, onBlur: this.floatBlur, type: "email", placeholder: "Enter Email" })))),
React.createElement("div", { className: "row custom-margin" },
React.createElement("div", { className: "col-xs-6 col-sm-6 col-lg-6 col-md-6" },
React.createElement("div", { className: "e-input-group e-disabled" },
React.createElement("input", { className: "e-input", onFocus: this.floatFocus, onBlur: this.floatBlur, type: "text", placeholder: "Disabled", disabled: true }))),
React.createElement("div", { className: "col-xs-6 col-sm-6 col-lg-6 col-md-6" },
React.createElement("div", { className: "e-input-group" },
React.createElement("input", { className: "e-input", onFocus: this.floatFocus, onBlur: this.floatBlur, type: "text", placeholder: "Enter Name", value: "Readonly", readOnly: true })))),
React.createElement("div", { className: "row custom-margin" },
React.createElement("div", { className: "col-xs-6 col-sm-6 col-lg-6 col-md-6" },
React.createElement("b", null, "Validation States"))),
React.createElement("div", { className: "row custom-margin" },
React.createElement("div", { className: "col-xs-4 col-sm-4 col-lg-4 col-md-4" },
React.createElement("div", { className: "e-input-group e-success" },
React.createElement("input", { className: "e-input", onFocus: this.floatFocus, onBlur: this.floatBlur, type: "text", placeholder: "Success" }))),
React.createElement("div", { className: "col-xs-4 col-sm-4 col-lg-4 col-md-4" },
React.createElement("div", { className: "e-input-group e-warning" },
React.createElement("input", { className: "e-input", type: "text", onFocus: this.floatFocus, onBlur: this.floatBlur, placeholder: "Warning" }))),
React.createElement("div", { className: "col-xs-4 col-sm-4 col-lg-4 col-md-4" },
React.createElement("div", { className: "e-input-group e-error" },
React.createElement("input", { className: "e-input", onFocus: this.floatFocus, onBlur: this.floatBlur, type: "text", placeholder: "Error" })))),
React.createElement("div", { className: "row custom-margin" },
React.createElement("div", { className: "col-xs-6 col-sm-6 col-lg-6 col-md-6" },
React.createElement("b", null, "Sizing"))),
React.createElement("div", { className: "row custom-margin" },
React.createElement("div", { className: "col-xs-6 col-sm-6 col-lg-6 col-md-6" },
React.createElement("div", { className: "e-input-group e-small" },
React.createElement("input", { className: "e-input", onFocus: this.floatFocus, onBlur: this.floatBlur, type: "text", placeholder: "Small" }))),
React.createElement("div", { className: "col-xs-6 col-sm-6 col-lg-6 col-md-6" },
React.createElement("div", { className: "e-input-group" },
React.createElement("input", { className: "e-input", onFocus: this.floatFocus, onBlur: this.floatBlur, type: "text", placeholder: "Normal" })))),
React.createElement("div", { className: "row custom-margin" },
React.createElement("div", { className: "col-xs-6 col-sm-6 col-lg-6 col-md-6" },
React.createElement("b", null, "Input & Elements"))),
React.createElement("div", { className: "row custom-margin" },
React.createElement("div", { className: "col-xs-6 col-sm-6 col-lg-6 col-md-6" },
React.createElement("div", { className: "e-input-group" },
React.createElement("input", { className: "e-input", onFocus: this.floatFocus, onBlur: this.floatBlur, type: "text", placeholder: "Date of Birth" }),
React.createElement("span", { className: "e-input-group-icon e-input-calendar", onMouseDown: this.onIconClick, onMouseUp: this.onIconUnClick }))),
React.createElement("div", { className: "col-xs-6 col-sm-6 col-lg-6 col-md-6" },
React.createElement("div", { className: "e-input-group e-float-icon-left" },
React.createElement("span", { className: "e-input-group-icon e-input-picture", onMouseDown: this.onIconClick, onMouseUp: this.onIconUnClick }),
React.createElement("div", { className: "e-input-in-wrap" },
React.createElement("input", { className: "e-input", onFocus: this.floatFocus, onBlur: this.floatBlur, type: "text", placeholder: "Upload Picture" })))))),
React.createElement("div", { id: "action-description" },
React.createElement("p", null,
"This sample demonstrates the default functionalities of the ",
React.createElement("code", null, "TextBox"),
" component. Type a character in the TextBox element or focus-in to the TextBox for floating the label text. The label will be positioned back to TextBox on focus-out without value.")),
React.createElement("div", { id: "description" },
React.createElement("p", null, "A TextBoxes are an input element that allows to get input from the user. It allows the user either to edit or display the input values."),
React.createElement("br", null),
React.createElement("table", { className: "custom-width" },
React.createElement("tbody", null,
React.createElement("tr", null,
React.createElement("th", null, "Types"),
React.createElement("th", null, "Description")),
React.createElement("tr", null,
React.createElement("td", null, "Floating Label"),
React.createElement("td", null,
"You can render floating textbox with ",
React.createElement("b", null, "e-float-input"),
" class added and need to maintain the following structure of elements.",
React.createElement("ul", null,
React.createElement("li", null,
"Create group element with ",
React.createElement("b", null, "e-float-input"),
" class added."),
React.createElement("li", null,
"Input element with ",
React.createElement("b", null, "required"),
" attribute."),
React.createElement("li", null,
"Span element with ",
React.createElement("b", null, "e-float-line"),
" class."),
React.createElement("li", null,
"Label element with ",
React.createElement("b", null, "e-float-text"),
" class.")),
" ")),
React.createElement("tr", null,
React.createElement("td", null, "Floating Label & Elements"),
React.createElement("td", null,
"You can render floating textbox with icons added with in group element ",
React.createElement("b", null, "e-input-group"),
" and need to maintain the following structure of elements.",
React.createElement("ul", null,
React.createElement("li", null,
"Create group element with ",
React.createElement("b", null, "e-float-input"),
" class added."),
React.createElement("li", null,
"Input element with ",
React.createElement("b", null, "required"),
" attribute."),
React.createElement("li", null,
"Span element with ",
React.createElement("b", null, "e-float-line"),
" class."),
React.createElement("li", null,
"Label element with ",
React.createElement("b", null, "e-float-text"),
" class."),
React.createElement("li", null,
"Append or prepend the span element with class ",
React.createElement("b", null, "e-input-group-icon"),
" added.")))),
React.createElement("tr", null,
React.createElement("td", null, "Default TextBox"),
React.createElement("td", null,
React.createElement("div", { className: "custom-padding-bottom-10" },
" You can render textbox by adding class as ",
React.createElement("b", null, "e-input"),
".You can also render textbox as group by adding parent element with ",
React.createElement("b", null, "e-input-group"),
" class added."))),
React.createElement("tr", null,
React.createElement("td", null, "RTL TextBox"),
React.createElement("td", null,
React.createElement("div", { className: "custom-padding-bottom-10" },
"Set ",
React.createElement("b", null, "e-input"),
" and ",
React.createElement("b", null, "e-rtl"),
" classes to render textbox in right to left direction. For rendering group in RTL mode , class list will be like ",
React.createElement("b", null, "e-input-group e-rtl"),
"."))),
React.createElement("tr", null,
React.createElement("td", null, "Disabled TextBox"),
React.createElement("td", null,
React.createElement("div", { className: "custom-padding-bottom-10" },
"You set html disabled attribute to textbox. For parent group element , you can disable it by adding ",
React.createElement("b", null, "e-disabled"),
" class."))),
React.createElement("tr", null,
React.createElement("td", null, "Readonly TextBox"),
React.createElement("td", null,
React.createElement("div", { className: "custom-padding-bottom-10" }, "You set html readonly attribute to textbox."))),
React.createElement("tr", null,
React.createElement("td", null, "Validation states"),
React.createElement("td", null,
React.createElement("div", { className: "custom-padding-bottom-10" },
"You can apply validation states success, warning, error to the textbox with the corresponding classes added to the input element such as ",
React.createElement("b", null, "e-success"),
", ",
React.createElement("b", null, "e-warning"),
", ",
React.createElement("b", null, "e-error"),
"."))),
React.createElement("tr", null,
React.createElement("td", null, "Sizing"),
React.createElement("td", null,
React.createElement("div", { className: "custom-padding-bottom-10" },
"You can render small sizing textbox by adding ",
React.createElement("b", null, "e-small"),
" class to the input element. By default normal size considered."))),
React.createElement("tr", null,
React.createElement("td", null, "Input & elements"),
React.createElement("td", null,
"You can render textbox with icons in the below format,",
React.createElement("ul", null,
React.createElement("li", null,
"Create group element with ",
React.createElement("b", null, "e-input-group"),
" class added."),
React.createElement("li", null,
"Add input element with ",
React.createElement("b", null, "e-input"),
" and span element with ",
React.createElement("b", null, "e-input-group-icon"),
" inside the input group element."),
React.createElement("li", null,
"You can add the icon either before or after the textbox by placing ",
React.createElement("b", null, "e-input-group-icon"),
" class named element in specific place.")))))),
React.createElement("br", null))));
};
return Default;
}(sample_base_1.SampleBase));
exports.Default = Default;