kupos-ui-components-lib
Version:
A reusable UI components package
238 lines (237 loc) • 12.7 kB
JavaScript
import React from "react";
import commonService from "../../utils/CommonService";
let SEAT_ORDER = [
"Ejecutivo",
"Semi Cama",
"Semi Cama Low",
"Salón Cama",
"Salón Cama (I)",
"Salón Cama Low",
"Premium",
"Premium (I)",
];
class ServiceFilter extends React.Component {
constructor(props) {
var _a, _b, _c, _d, _e, _f, _g;
super(props);
this.state = {
showOperators: ((_a = props.initialOpenFilters) === null || _a === void 0 ? void 0 : _a.includes("operator")) || false,
showTimeOptions: ((_b = props.initialOpenFilters) === null || _b === void 0 ? void 0 : _b.includes("time")) || false,
showSeatOptions: ((_c = props.initialOpenFilters) === null || _c === void 0 ? void 0 : _c.includes("seat_types")) || false,
showTypeOptions: ((_d = props.initialOpenFilters) === null || _d === void 0 ? void 0 : _d.includes("tipo")) || false,
showSpecialDeparture: ((_e = props.initialOpenFilters) === null || _e === void 0 ? void 0 : _e.includes("special_departure")) || false,
showTrainType: ((_f = props.initialOpenFilters) === null || _f === void 0 ? void 0 : _f.includes("train_type")) || false,
addMargin: false,
showAmenities: ((_g = props.initialOpenFilters) === null || _g === void 0 ? void 0 : _g.includes("amenities")) || false,
sortedFilters: this.sortFilters(props.filtersArray),
};
this.handleScroll = this.handleScroll.bind(this);
this.clearFilter = this.clearFilter.bind(this);
}
componentDidMount() {
window.addEventListener("scroll", this.handleScroll);
this.clearFilter();
}
componentWillUnmount() {
window.removeEventListener("scroll", this.handleScroll);
}
componentDidUpdate(prevProps) {
if (prevProps.showReturnTripModal !== this.props.showReturnTripModal) {
this.clearFilter();
}
if (prevProps.filtersArray !== this.props.filtersArray) {
this.setState({
sortedFilters: this.sortFilters(this.props.filtersArray),
});
}
}
handleScroll() {
this.setState({ addMargin: window.scrollY > 0 });
}
sortFilters(filtersArray) {
let newArr = [];
filtersArray.forEach((val) => {
if (val.type === "seat_types") {
let newSeatOrder = val.options.sort((a, b) => SEAT_ORDER.indexOf(a.label) - SEAT_ORDER.indexOf(b.label));
newArr.push(Object.assign(Object.assign({}, val), { options: newSeatOrder }));
}
else {
newArr.push(val);
}
});
return newArr;
}
clearFilter() {
let filters = commonService.copyObject(this.props.filtersArray);
for (let f of filters) {
for (let o of f.options) {
o.active = false;
}
}
this.props.onFilterClear(filters);
}
showClearFilter() {
for (let f of this.props.filtersArray) {
for (let o of f.options) {
if (o.active) {
return true;
}
}
}
return false;
}
toggleFilter(type) {
this.setState((prevState) => {
return Object.assign(Object.assign({}, prevState), { showOperators: type === "operator"
? !prevState.showOperators
: prevState.showOperators, showTimeOptions: type === "time"
? !prevState.showTimeOptions
: prevState.showTimeOptions, showSeatOptions: type === "seat_types"
? !prevState.showSeatOptions
: prevState.showSeatOptions, showTypeOptions: type === "tipo"
? !prevState.showTypeOptions
: prevState.showTypeOptions, showSpecialDeparture: type === "special_departure"
? !prevState.showSpecialDeparture
: prevState.showSpecialDeparture, showTrainType: type === "train_type"
? !prevState.showTrainType
: prevState.showTrainType, showAmenities: type === "amenities"
? !prevState.showAmenities
: prevState.showAmenities });
});
}
renderFilterItem(option, onClick, key) {
const { showOperators, showTimeOptions, showSeatOptions, showTypeOptions, showSpecialDeparture, showTrainType, showAmenities, } = this.state;
const isOpen = (option.type === "operator" && showOperators) ||
(option.type === "time" && showTimeOptions) ||
(option.type === "seat_types" && showSeatOptions) ||
(option.type === "tipo" && showTypeOptions) ||
(option.type === "special_departure" && showSpecialDeparture) ||
(option.type === "train_type" && showTrainType) ||
(option.type === "amenities" && showAmenities);
// Return null for train_type if not a train
if ((option === null || option === void 0 ? void 0 : option.type) === "train_type" && !this.props.isTrain) {
return null;
}
// For trains, only show time, tipo, and train_type filters
if (this.props.isTrain &&
!["time", "tipo", "train_type"].includes(option === null || option === void 0 ? void 0 : option.type)) {
return null;
}
// This logic is similar to the functional component's conditional rendering
// Only show certain filter types for trains, similar to the functional component
const shouldShowHeader = (option === null || option === void 0 ? void 0 : option.type) === "time" ||
((option === null || option === void 0 ? void 0 : option.type) === "train_type" && this.props.isTrain) ||
((option === null || option === void 0 ? void 0 : option.type) === "tipo" && this.props.isTrain) ||
!this.props.isTrain;
return (React.createElement("div", { key: key },
shouldShowHeader && (React.createElement("div", { onClick: () => this.toggleFilter(option.type), className: "bold-text flex items-center justify-between mt-[16px]" },
this.props.t("RESULTS_PAGE." + option.title),
React.createElement("img", { src: this.props.icons.downArrow, alt: "downArrow", className: `${isOpen ? "rotate-180" : ""} w-[auto] h-[9px] transition-all duration-300 cursor-pointer` }))),
(isOpen ||
(!this.props.isTrain &&
option.type !== "operator" &&
option.type !== "time" &&
option.type !== "seat_types" &&
option.type !== "tipo" &&
option.type !== "special_departure" &&
option.type !== "train_type")) &&
option.options.map((val, i) => {
var _a, _b, _c, _d, _e, _f, _g;
let iconKey = "";
if (val.icon === "sunrise") {
iconKey = val.active
? this.props.icons.iconSunriseOrange
: this.props.icons.iconSunrise;
}
else if (val.icon === "morning") {
iconKey = val.active
? this.props.icons.iconMorningOrange
: this.props.icons.iconMorning;
}
else if (val.icon === "sunset") {
iconKey = val.active
? this.props.icons.iconSunsetOrange
: this.props.icons.iconSunset;
}
else if (val.icon === "night") {
iconKey = val.active
? this.props.icons.iconNightOrange
: this.props.icons.iconNight;
}
let label = "";
if (val.icon === "night") {
label = (_a = this.props.translation) === null || _a === void 0 ? void 0 : _a.night;
}
else if (val.icon === "morning") {
label = (_b = this.props.translation) === null || _b === void 0 ? void 0 : _b.morning;
}
else if (val.icon === "sunset") {
label = (_c = this.props.translation) === null || _c === void 0 ? void 0 : _c.sunset;
}
else if (val.icon === "sunrise") {
label = (_d = this.props.translation) === null || _d === void 0 ? void 0 : _d.sunrise;
}
else if (val.label === "DIRECT_FILTER") {
label = (_e = this.props.translation) === null || _e === void 0 ? void 0 : _e.directService;
}
else if (val.label === "tipo") {
label = (_f = this.props.translation) === null || _f === void 0 ? void 0 : _f.tipo;
}
else if (val.label === "FLEXIBLE") {
label = (_g = this.props.translation) === null || _g === void 0 ? void 0 : _g.flexible;
}
else if (val.label === "Regular") {
label = "Tren regular";
}
else if (val.label === "Expreso") {
label = "Tren express";
}
else {
// Use translation if available, otherwise use the label
label = val.trText
? val.trText
: val.spText
? val.spText
: val.label;
}
return (React.createElement("div", { key: i, onClick: () => onClick(i), style: {
margin: "3px 0",
backgroundColor: val.active
? this.props.colors.selectedColor
: "",
padding: "2px 6px",
paddingLeft: val.active ? "11px" : "",
marginLeft: val.active ? "-10px" : "",
}, className: `flex items-center h-[24px] rounded-[15px] cursor-pointer pt-[4px] ${val.active
? `text-[${this.props.colors.selectedTextColor}]`
: ""} ${val.active ? "bold-text" : ""}` },
val.icon && this.props.icons && (React.createElement("img", { src: iconKey, alt: val.icon, className: "w-[20px] h-[20px] mr-[10px]" })),
label));
})));
}
render() {
var _a, _b;
const { onFilterSelected } = this.props;
const { sortedFilters } = this.state;
// console.log(this.props, "sortedFilters");
return (React.createElement("div", null,
React.createElement("div", { style: {
overflowY: "scroll",
scrollbarWidth: "none",
boxShadow: "none",
border: "1px solid #ddd",
zIndex: "9",
}, className: "p-[16px_20px] relative mb-[30px] max-h-[66vh] rounded-[20px] bg-[#fff]" },
React.createElement("span", { className: "text-[17.33px] bold-text flex justify-center mt-[20px]" }, (_a = this.props.translation) === null || _a === void 0 ? void 0 : _a.filterHeader),
React.createElement("div", { className: "text-[13.33px] pb-[10px]" }, sortedFilters === null || sortedFilters === void 0 ? void 0 : sortedFilters.map((val, key) => {
var _a;
return ((_a = val.options) === null || _a === void 0 ? void 0 : _a.length)
? this.renderFilterItem(val, (i) => onFilterSelected(val, key, i), key)
: null;
}))),
this.showClearFilter() && (React.createElement("div", { onClick: this.clearFilter, className: "text-[13.33px] bold-text items-center cursor-pointer absolute flex justify-center bg-[#eaeaea] pt-[35px] pb-[7px] w-full left-0 z-[1] -bottom-[1px] rounded-b-[10px]" },
React.createElement("img", { src: this.props.icons.removeFilterIcon, alt: "removeFilterIcon", className: "w-[16px] h-[16px] mr-[10px]" }), (_b = this.props.translation) === null || _b === void 0 ? void 0 :
_b.removeFilters))));
}
}
export default ServiceFilter;