Skip to content

Commit e8e7774

Browse files
author
WYNDHAMNT\sabidi
committed
Implementation of Text box using Fetch Api with the example usage
1 parent 0ea1645 commit e8e7774

16 files changed

+8875
-0
lines changed

‎.babelrc

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"presets": ["env", "react"]
3+
}

‎.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
node_modules/

‎.npmignore

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
# .npmignore
2+
src
3+
examples
4+
.babelrc
5+
.gitignore
6+
webpack.config.js

‎dist/ajax-loader.gif

8.58 KB
Loading

‎dist/index.js

+126
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
1+
'use strict';
2+
3+
Object.defineProperty(exports, "__esModule", {
4+
value: true
5+
});
6+
exports.FetchTextBox = undefined;
7+
8+
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
9+
10+
var _react = require('react');
11+
12+
var _react2 = _interopRequireDefault(_react);
13+
14+
require('./styles.css');
15+
16+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
17+
18+
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
19+
20+
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
21+
22+
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
23+
24+
// This component is contains the implementation of Fetch Texbox.
25+
26+
var FetchTextBox = exports.FetchTextBox = function (_Component) {
27+
_inherits(FetchTextBox, _Component);
28+
29+
function FetchTextBox(props) {
30+
_classCallCheck(this, FetchTextBox);
31+
32+
var _this = _possibleConstructorReturn(this, (FetchTextBox.__proto__ || Object.getPrototypeOf(FetchTextBox)).call(this, props));
33+
34+
_this.state = {
35+
data: [],
36+
isLoading: false,
37+
value: '',
38+
hideSuggestions: false
39+
};
40+
return _this;
41+
}
42+
43+
_createClass(FetchTextBox, [{
44+
key: 'logChange',
45+
value: function logChange(e) {
46+
this.setState({ value: e.target.value });
47+
if (this.state.value.length >= 2) this.fetchResults(e.target.value);
48+
try {
49+
this.sendTextBoxValue(e.target.value);
50+
} catch (ex) {}
51+
}
52+
}, {
53+
key: 'setTextboxValue',
54+
value: function setTextboxValue(e) {
55+
this.setState({ hideSuggestions: true, value: e.target.innerHTML });
56+
try {
57+
this.sendTextBoxValue(e.target.innerHTML);
58+
} catch (ex) {}
59+
}
60+
}, {
61+
key: 'sendTextBoxValue',
62+
value: function sendTextBoxValue(va) {
63+
this.props.sendData(va);
64+
}
65+
}, {
66+
key: 'fetchResults',
67+
value: function fetchResults(queryText) {
68+
var self = this;
69+
var header = new Headers({
70+
'Content-Type': 'application/json'
71+
});
72+
73+
this.setState({ isLoading: true, hideSuggestions: false });
74+
75+
fetch(this.props.url + queryText, {
76+
method: this.props.method
77+
}).then(function (response) {
78+
if (response.status >= 400) {
79+
throw new Error("Bad response from server");
80+
}
81+
return response.json();
82+
}).then(function (data) {
83+
self.setState({ data: data[self.props.jsonArrayKey] != null ? data[self.props.jsonArrayKey] : [], isLoading: false });
84+
}).catch(function (err) {
85+
console.log('Error occurred', err);
86+
});
87+
}
88+
}, {
89+
key: 'render',
90+
value: function render() {
91+
var _this2 = this;
92+
93+
var className = 'form-control';
94+
if (this.state.isLoading) {
95+
className += ' loading-state';
96+
}
97+
98+
var suggestionsButtonStyleClassName = 'list-group-item list-group-item-action custom-item';
99+
100+
if (this.state.hideSuggestions || this.state.value.length < 2) {
101+
suggestionsButtonStyleClassName = 'hidden';
102+
}
103+
104+
return _react2.default.createElement(
105+
'div',
106+
{ className: 'form-group' },
107+
_react2.default.createElement('input', { id: 'fetch-textbox', value: this.state.value, onChange: this.logChange.bind(this), placeholder: 'Enter Value', type: 'text', className: className }),
108+
_react2.default.createElement(
109+
'ul',
110+
{ className: 'list-group fetch-textbox-suggestions' },
111+
this.state.data.map(function (item, key) {
112+
return _react2.default.createElement(
113+
'li',
114+
{ key: key, onClick: _this2.setTextboxValue.bind(_this2), className: suggestionsButtonStyleClassName },
115+
item[_this2.props.fieldName]
116+
);
117+
})
118+
)
119+
);
120+
}
121+
}]);
122+
123+
return FetchTextBox;
124+
}(_react.Component);
125+
126+
exports.default = FetchTextBox;

‎dist/styles.css

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
.loading-state {
2+
background-color: #ffffff;
3+
background-image: url("./ajax-loader.gif");
4+
background-size: 25px 25px;
5+
background-position:right center;
6+
background-repeat: no-repeat;
7+
}
8+
9+
#fetch-textbox {
10+
padding: 10px;
11+
min-width: 100px;
12+
}
13+
14+
#fetch-textbox::-ms-clear {
15+
display: none;
16+
}
17+
18+
.fetch-textbox-suggestions {
19+
position: relative;
20+
min-width: 50px;
21+
margin-top: -3px;
22+
max-height: 300px;
23+
margin-bottom: 10px;
24+
margin-left: 2px;
25+
overflow-y:auto;
26+
-webkit-overflow-scrolling: touch;
27+
}
28+
29+
.hidden {
30+
display: none;
31+
}
32+
33+
html {
34+
overflow: scroll;
35+
overflow-x: hidden;
36+
}
37+
::-webkit-scrollbar {
38+
width: 0px; /* remove scrollbar space */
39+
background: transparent; /* optional: just make scrollbar invisible */
40+
}
41+
/* optional: show position indicator in red */
42+
::-webkit-scrollbar-thumb {
43+
background: #FF0000;
44+
}

‎examples/InAction.gif

98.1 KB
Loading

‎examples/src/index.html

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<html>
2+
<head>
3+
<title>Fetch Textbox Demo</title>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
6+
</head>
7+
<body>
8+
<noscript>
9+
You need to enable JavaScript to run this app.
10+
</noscript>
11+
<div id="root"></div>
12+
</body>
13+
</html>

‎examples/src/index.js

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import React from 'react';
2+
import { render} from 'react-dom';
3+
import FetchTextBox from '../../src';
4+
import './styles.css';
5+
import '../../node_modules/bootstrap/dist/css/bootstrap.min.css';
6+
7+
const App = () => {
8+
9+
var value = '';
10+
11+
function getData(val){
12+
//this.setState({value: val});
13+
value = val;
14+
}
15+
16+
function logData() {
17+
//console.log(this.state.value);
18+
console.log(value);
19+
}
20+
21+
return (
22+
<div>
23+
<div className="inputArea">
24+
<FetchTextBox url='https://www.thesportsdb.com/api/v1/json/1/searchplayers.php?p=' method='GET' jsonArrayKey='player' fieldName="strPlayer" sendData={getData.bind(this)} />
25+
</div>
26+
<div className="inputAreaBtn">
27+
<button onClick={logData.bind(this)} >Get Value</button>
28+
</div>
29+
</div>
30+
31+
);
32+
}
33+
34+
35+
render(<App />, document.getElementById("root"));

‎examples/src/styles.css

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
.inputArea {
2+
display: inline-block;
3+
width: 250px;
4+
margin: 5 10 10 10;
5+
}
6+
7+
.inputAreaBtn {
8+
display: inline-block;
9+
position: absolute;
10+
width: 250px;
11+
margin: 10px;
12+
}

0 commit comments

Comments
 (0)