@shakthillc/components
Version:
React generic components for shakthi products
266 lines (227 loc) • 10.7 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
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; }; }();
var _react = require("react");
var _react2 = _interopRequireDefault(_react);
var _propTypes = require("prop-types");
var _propTypes2 = _interopRequireDefault(_propTypes);
var _DropDownSearchModule = require("./DropDownSearch.module.css");
var _DropDownSearchModule2 = _interopRequireDefault(_DropDownSearchModule);
var _Popup = require("./../Popup/Popup");
var _Popup2 = _interopRequireDefault(_Popup);
var _Icon = require("@material-ui/core/Icon");
var _Icon2 = _interopRequireDefault(_Icon);
var _InputText = require("../InputText/InputText");
var _InputText2 = _interopRequireDefault(_InputText);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
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; }
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; }
var DropDownSearch = function (_React$Component) {
_inherits(DropDownSearch, _React$Component);
function DropDownSearch(props) {
_classCallCheck(this, DropDownSearch);
var _this = _possibleConstructorReturn(this, (DropDownSearch.__proto__ || Object.getPrototypeOf(DropDownSearch)).call(this, props));
_this.state = {
selectedOption: _this.props.selectedOption || "",
isLoading: false,
searchValue: ""
};
_this.handleChange = _this.handleChange.bind(_this);
_this.handleScroll = _this.handleScroll.bind(_this);
_this.handleSearch = _this.handleSearch.bind(_this);
//this.dropdownList = React.createRef();
//this.debounce = this.debounce.bind(this);
return _this;
}
_createClass(DropDownSearch, [{
key: "componentDidUpdate",
value: function componentDidUpdate(prevProps, prevState) {
if (prevProps.options.length < this.props.options.length) {
this.setState({ isLoading: false });
}
}
}, {
key: "handleChange",
value: function handleChange(val) {
var onChange = this.props.onChange;
this.setState({ selectedOption: val, searchValue: "" });
onChange && onChange(val);
}
}, {
key: "handleScroll",
value: function handleScroll(_ref) {
var currentTarget = _ref.currentTarget;
var loadData = this.props.loadData;
// console.log(
// currentTarget.clientHeight,
// parseInt(currentTarget.scrollHeight-currentTarget.scrollTop)
// );
var percentValue = currentTarget.clientHeight / 100 * 80;
this.totaltableheight = currentTarget.scrollHeight;
if (parseInt(currentTarget.scrollHeight - currentTarget.scrollTop) + 1 == currentTarget.clientHeight) {
loadData && loadData();
}
}
}, {
key: "handleSearch",
value: function handleSearch(val) {
var onTextSearch = this.props.onTextSearch;
this.setState({ searchValue: val }, function () {
onTextSearch && onTextSearch(val);
});
}
// debounce = (func, delay) => {
// let inDebounce
// return function() {
// const context = this
// const args = arguments
// clearTimeout(inDebounce)
// console.log("in",func)
// inDebounce = setTimeout(() => func(), delay)
// }
// }
}, {
key: "render",
value: function render() {
var _this2 = this;
var _props = this.props,
isPopupOpen = _props.isPopupOpen,
togglePopup = _props.togglePopup,
_props$placeHolder = _props.placeHolder,
placeHolder = _props$placeHolder === undefined ? "Select any option" : _props$placeHolder,
removeClose = _props.removeClose,
_props$emptyState = _props.emptyState,
emptyState = _props$emptyState === undefined ? "No items found" : _props$emptyState,
disabled = _props.disabled,
help = _props.help,
_props$isMandatory = _props.isMandatory,
isMandatory = _props$isMandatory === undefined ? false : _props$isMandatory;
var options = this.props.options;
var borderStyle = isMandatory == true ? _DropDownSearchModule2.default["input-enableborder"] : "";
var _state = this.state,
_state$selectedOption = _state.selectedOption,
selectedOption = _state$selectedOption === undefined ? "" : _state$selectedOption,
searchValue = _state.searchValue;
var selectedLabel = null;
var altered_options = searchValue.length > 0 ? options.filter(function (m) {
return m.label.toLowerCase().includes(searchValue.toLowerCase());
}) : options;
var html = altered_options.map(function (obj, i) {
if (selectedOption === obj.value && selectedLabel === null) {
selectedLabel = obj.label;
}
return _react2.default.createElement(
"p",
{
key: i,
className: _DropDownSearchModule2.default["dropdown-list__item"],
onClick: _this2.handleChange.bind(_this2, obj.value)
},
obj.label
);
});
html.push(_react2.default.createElement(
"span",
{
style: { display: altered_options.length != 0 ? "none" : "" },
className: _DropDownSearchModule2.default.dropdownList__noitems
},
emptyState
));
return _react2.default.createElement(
"div",
{ className: _DropDownSearchModule2.default["dropdown"] },
_react2.default.createElement(
"div",
{
style: this.props.style,
className: disabled ? _DropDownSearchModule2.default["dropdown__sub--disabled"] : isPopupOpen ? _DropDownSearchModule2.default["dropdown__sub--open"] + " " + borderStyle : _DropDownSearchModule2.default["dropdown__sub"] + " " + borderStyle,
onClick: !disabled && togglePopup
},
_react2.default.createElement(
"div",
{ className: _DropDownSearchModule2.default["dropdown__textcontainer"] },
_react2.default.createElement(
"span",
{ className: _DropDownSearchModule2.default["textcontainer__selected-text"] },
selectedLabel === null ? _react2.default.createElement(
"span",
{ style: { color: "#777777" } },
placeHolder
) : selectedLabel
)
),
_react2.default.createElement(
"div",
{ className: _DropDownSearchModule2.default["textcontainer__arrow"] },
_react2.default.createElement(
_Icon2.default,
{ style: { color: "#777777", fontSize: 20 } },
"arrow_drop_down"
)
)
),
help && _react2.default.createElement(
"p",
{
className: isMandatory === true ? _DropDownSearchModule2.default["input-holder__helper--red"] : _DropDownSearchModule2.default["input-holder__helper"]
},
help
),
isPopupOpen ? _react2.default.createElement(
"div",
{
ref: "dropdownList",
onScroll: this.handleScroll,
className: _DropDownSearchModule2.default["dropdown__dropdown-list"],
style: this.props.style
},
_react2.default.createElement(
"div",
{ style: { position: "relative" }, onClick: removeClose },
_react2.default.createElement(_InputText2.default, {
icon: "search",
value: searchValue,
onKeyup: this.handleSearch,
placeHolder: "Enter text to search",
style: this.props.style
})
),
html
) : null
);
}
}], [{
key: "getDerivedStateFromProps",
value: function getDerivedStateFromProps(props, current_state) {
if (props.selectedOption != null && props.selectedOption != current_state.selectedOption) {
return { selectedOption: props.selectedOption };
} else {
return null;
}
}
}]);
return DropDownSearch;
}(_react2.default.Component);
DropDownSearch.defaultProps = {
options: [{
value: "a",
label: "Rick"
}, { value: "b", label: "Morty" }, { value: "c", label: "Mrofessor" }, { value: "d", label: "Micheal Scott" }, { value: "e", label: "Mngela" }, { value: "e", label: "Mevin mallone" }, { value: "b", label: "Morty" }, { value: "c", label: "Mrofessor" }, { value: "d", label: "Micheal Scott" }, { value: "e", label: "Mngela" }, { value: "e", label: "Mevin mallone" }, {
value: "1",
label: "Rick"
}, { value: "2", label: "Morty" }, { value: "3", label: "Mrofessor" }, { value: "4", label: "Micheal Scott" }, { value: "5", label: "Mngela" }, { value: "6", label: "Mevin mallone" }, { value: "7", label: "Morty" }, { value: "8", label: "Mrofessor" }, { value: "9", label: "Micheal Scott" }, { value: "10", label: "Mngela" }, { value: "11", label: "Mevin mallone" }],
disabled: false,
dataId: "dropdownComp"
};
DropDownSearch.propTypes = {
dataId: _propTypes2.default.string,
disabled: _propTypes2.default.bool,
onChange: _propTypes2.default.func,
options: _propTypes2.default.array,
selectedOption: _propTypes2.default.string
};
exports.default = (0, _Popup2.default)(DropDownSearch);