react-vehicle-seatpicker
Version:
A flexible and customizable React component for vehicle seat selection (bus, minibus, etc.)
23 lines (22 loc) • 17.3 kB
JavaScript
(function(b,F){typeof exports=="object"&&typeof module<"u"?F(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],F):(b=typeof globalThis<"u"?globalThis:b||self,F(b.ReactVehicleSeatPicker={},b.React))})(this,function(b,F){"use strict";var G={exports:{}},$={};/**
* @license React
* react-jsx-runtime.production.js
*
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/var re;function _e(){if(re)return $;re=1;var n=Symbol.for("react.transitional.element"),c=Symbol.for("react.fragment");function o(r,a,d){var m=null;if(d!==void 0&&(m=""+d),a.key!==void 0&&(m=""+a.key),"key"in a){d={};for(var l in a)l!=="key"&&(d[l]=a[l])}else d=a;return a=d.ref,{$$typeof:n,type:r,key:m,ref:a!==void 0?a:null,props:d}}return $.Fragment=c,$.jsx=o,$.jsxs=o,$}var D={};/**
* @license React
* react-jsx-runtime.development.js
*
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/var ne;function fe(){return ne||(ne=1,process.env.NODE_ENV!=="production"&&function(){function n(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===W?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case C:return"Fragment";case K:return"Profiler";case Q:return"StrictMode";case v:return"Suspense";case T:return"SuspenseList";case w:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case ce:return"Portal";case x:return e.displayName||"Context";case j:return(e._context.displayName||"Context")+".Consumer";case k:var i=e.render;return e=e.displayName,e||(e=i.displayName||i.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case M:return i=e.displayName||null,i!==null?i:n(e.type)||"Memo";case O:i=e._payload,e=e._init;try{return n(e(i))}catch{}}return null}function c(e){return""+e}function o(e){try{c(e);var i=!1}catch{i=!0}if(i){i=console;var u=i.error,_=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return u.call(i,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",_),c(e)}}function r(e){if(e===C)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===O)return"<...>";try{var i=n(e);return i?"<"+i+">":"<...>"}catch{return"<...>"}}function a(){var e=L.A;return e===null?null:e.getOwner()}function d(){return Error("react-stack-top-frame")}function m(e){if(P.call(e,"key")){var i=Object.getOwnPropertyDescriptor(e,"key").get;if(i&&i.isReactWarning)return!1}return e.key!==void 0}function l(e,i){function u(){V||(V=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",i))}u.isReactWarning=!0,Object.defineProperty(e,"key",{get:u,configurable:!0})}function S(){var e=n(this.type);return z[e]||(z[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),e=this.props.ref,e!==void 0?e:null}function g(e,i,u,_,U,ee){var f=u.ref;return e={$$typeof:R,type:e,key:i,props:u,_owner:_},(f!==void 0?f:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:S}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:U}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:ee}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function h(e,i,u,_,U,ee){var f=i.children;if(f!==void 0)if(_)if(Y(f)){for(_=0;_<f.length;_++)p(f[_]);Object.freeze&&Object.freeze(f)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else p(f);if(P.call(i,"key")){f=n(e);var I=Object.keys(i).filter(function(ve){return ve!=="key"});_=0<I.length?"{key: someKey, "+I.join(": ..., ")+": ...}":"{key: someKey}",me[f+_]||(I=0<I.length?"{"+I.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
let props = %s;
<%s {...props} />
React keys must be passed directly to JSX without using spread:
let props = %s;
<%s key={someKey} {...props} />`,_,f,I,f),me[f+_]=!0)}if(f=null,u!==void 0&&(o(u),f=""+u),m(i)&&(o(i.key),f=""+i.key),"key"in i){u={};for(var te in i)te!=="key"&&(u[te]=i[te])}else u=i;return f&&l(u,typeof e=="function"?e.displayName||e.name||"Unknown":e),g(e,f,u,a(),U,ee)}function p(e){E(e)?e._store&&(e._store.validated=1):typeof e=="object"&&e!==null&&e.$$typeof===O&&(e._payload.status==="fulfilled"?E(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function E(e){return typeof e=="object"&&e!==null&&e.$$typeof===R}var N=F,R=Symbol.for("react.transitional.element"),ce=Symbol.for("react.portal"),C=Symbol.for("react.fragment"),Q=Symbol.for("react.strict_mode"),K=Symbol.for("react.profiler"),j=Symbol.for("react.consumer"),x=Symbol.for("react.context"),k=Symbol.for("react.forward_ref"),v=Symbol.for("react.suspense"),T=Symbol.for("react.suspense_list"),M=Symbol.for("react.memo"),O=Symbol.for("react.lazy"),w=Symbol.for("react.activity"),W=Symbol.for("react.client.reference"),L=N.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,P=Object.prototype.hasOwnProperty,Y=Array.isArray,B=console.createTask?console.createTask:function(){return null};N={react_stack_bottom_frame:function(e){return e()}};var V,z={},ue=N.react_stack_bottom_frame.bind(N,d)(),de=B(r(d)),me={};D.Fragment=C,D.jsx=function(e,i,u){var _=1e4>L.recentlyCreatedOwnerStacks++;return h(e,i,u,!1,_?Error("react-stack-top-frame"):ue,_?B(r(e)):de)},D.jsxs=function(e,i,u){var _=1e4>L.recentlyCreatedOwnerStacks++;return h(e,i,u,!0,_?Error("react-stack-top-frame"):ue,_?B(r(e)):de)}}()),D}process.env.NODE_ENV==="production"?G.exports=_e():G.exports=fe();var t=G.exports;const s={seatWrapper:"_seatWrapper_13mhc_1",seatButton:"_seatButton_13mhc_5",selected:"_selected_13mhc_28",reserved:"_reserved_13mhc_32",sleeperSeat:"_sleeperSeat_13mhc_36",vipSeat:"_vipSeat_13mhc_40",driverSeat:"_driverSeat_13mhc_65",seatNumber:"_seatNumber_13mhc_79",icon:"_icon_13mhc_121",seatContent:"_seatContent_13mhc_137",busFrame:"_busFrame_13mhc_156",busBack:"_busBack_13mhc_169",busBackText:"_busBackText_13mhc_184",busBackLight:"_busBackLight_13mhc_190",busBackLightLeft:"_busBackLightLeft_13mhc_200",busBackLightRight:"_busBackLightRight_13mhc_211",busFrameContent:"_busFrameContent_13mhc_222",busFront:"_busFront_13mhc_231",minibusFrame:"_minibusFrame_13mhc_247",frontText:"_frontText_13mhc_271",frontLight:"_frontLight_13mhc_277",frontLightLeft:"_frontLightLeft_13mhc_287",frontLightRight:"_frontLightRight_13mhc_298",legendContainer:"_legendContainer_13mhc_310",legendItem:"_legendItem_13mhc_320",legendSeat:"_legendSeat_13mhc_327",legendText:"_legendText_13mhc_338",legendReserved:"_legendReserved_13mhc_359",legendSelected:"_legendSelected_13mhc_370",legendAvailable:"_legendAvailable_13mhc_381",legendDriver:"_legendDriver_13mhc_392",legendSleeper:"_legendSleeper_13mhc_403",legendVip:"_legendVip_13mhc_414",content:"_content_13mhc_430",contentText:"_contentText_13mhc_435"},A=({size:n=16})=>t.jsxs("svg",{className:s.icon,width:n,height:n,viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",style:{transform:"rotate(180deg)"},children:[t.jsx("rect",{x:"2",y:"2",width:"12",height:"3",rx:"1",fill:"none",stroke:"currentColor",strokeWidth:"1.2"}),t.jsx("rect",{x:"3",y:"5",width:"10",height:"8",rx:"1",fill:"none",stroke:"currentColor",strokeWidth:"1.2"}),t.jsx("rect",{x:"1",y:"6",width:"2",height:"5",rx:"0.5",fill:"none",stroke:"currentColor",strokeWidth:"1"}),t.jsx("rect",{x:"13",y:"6",width:"2",height:"5",rx:"0.5",fill:"none",stroke:"currentColor",strokeWidth:"1"})]}),J=({size:n=18})=>t.jsxs("svg",{width:n,height:n+2,viewBox:"0 0 14 18",fill:"none",xmlns:"http://www.w3.org/2000/svg",style:{transform:"rotate(180deg)"},children:[t.jsx("rect",{x:"1",y:"3",width:"12",height:"14",rx:"0.5",fill:"none",stroke:"currentColor",strokeWidth:"1.2"}),t.jsx("rect",{x:"3",y:"1",width:"8",height:"4",rx:"0.5",fill:"none",stroke:"currentColor",strokeWidth:"1.2"}),t.jsx("path",{d:"M2 5 L8 5 L12 9 L12 15 L6 15 Z",fill:"none",stroke:"currentColor",strokeWidth:"1"})]}),q=({size:n=16})=>t.jsxs("svg",{width:n,height:n,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[t.jsx("circle",{cx:"12",cy:"12",r:"9",stroke:"currentColor",strokeWidth:"2",fill:"none"}),t.jsx("circle",{cx:"12",cy:"12",r:"3",fill:"currentColor"}),t.jsx("path",{d:"M12 3v6M12 15v6M3 12h6M15 12h6",stroke:"currentColor",strokeWidth:"2"})]}),se=({color:n})=>t.jsx("div",{className:s.driverSeat,style:n?{backgroundColor:n}:void 0,children:t.jsx(q,{size:14})}),ae=({seat:n,isReserved:c,isSelected:o,onClick:r,colors:a})=>{if(n.isDriver)return t.jsx(se,{color:a==null?void 0:a.driver});const d=()=>{const l=[s.seatButton];return c&&l.push(s.reserved),o&&l.push(s.selected),n.type==="sleeper"&&l.push(s.sleeperSeat),n.type==="vip"&&l.push(s.vipSeat),l.join(" ")},m=()=>{const l={};return a&&(c&&a.reserved?l.backgroundColor=a.reserved:o&&a.selected?l.backgroundColor=a.selected:n.type==="sleeper"&&a.sleeper?l.backgroundColor=a.sleeper:n.type==="vip"&&a.vip?l.backgroundColor=a.vip:a.available&&(l.backgroundColor=a.available)),l};return t.jsx("div",{className:s.seatWrapper,children:t.jsx("button",{type:"button",disabled:c||n.isDriver,onClick:r,className:d(),style:m(),title:n.number,"aria-label":`Seat ${n.number}`,children:t.jsx("span",{style:n.seatRotation?{display:"inline-block",transform:`rotate(${n.seatRotation}deg)`}:{},children:n.type==="sleeper"?t.jsx(J,{size:16}):t.jsxs("div",{className:s.seatContent,children:[t.jsx(A,{size:16}),t.jsx("span",{className:s.seatNumber,children:n.number})]})})})})},ie=({children:n,vehicleType:c})=>t.jsxs("div",{className:c==="bus"?s.busFrame:s.minibusFrame,children:[c==="bus"&&t.jsxs(t.Fragment,{children:[t.jsx("div",{className:s.busFront,children:t.jsx("span",{className:s.frontText,children:"Bus Front"})}),t.jsx("div",{className:s.frontLightLeft}),t.jsx("div",{className:s.frontLightRight}),t.jsx("div",{className:s.content,children:n}),t.jsx("div",{className:s.busBack,children:t.jsx("span",{className:s.busBackText,children:"Bus Rear"})}),t.jsx("div",{className:s.busBackLightLeft}),t.jsx("div",{className:s.busBackLightRight})]}),c!=="bus"&&t.jsx("div",{className:s.content,children:n})]}),le=({show:n=!0,items:c=["reserved","selected","available","driver","sleeper","vip"],labels:o={reserved:"Reserved",selected:"Selected",available:"Available",driver:"Driver",sleeper:"Sleeper",vip:"VIP"},colors:r})=>{if(!n)return null;const a={reserved:t.jsxs("div",{className:s.legendItem,children:[t.jsx("span",{className:s.legendReserved,style:r!=null&&r.reserved?{backgroundColor:r.reserved}:void 0,children:t.jsx(A,{size:14})}),t.jsx("span",{className:s.legendText,children:o.reserved})]}),selected:t.jsxs("div",{className:s.legendItem,children:[t.jsx("span",{className:s.legendSelected,style:r!=null&&r.selected?{backgroundColor:r.selected}:void 0,children:t.jsx(A,{size:14})}),t.jsx("span",{className:s.legendText,children:o.selected})]}),available:t.jsxs("div",{className:s.legendItem,children:[t.jsx("span",{className:s.legendAvailable,style:r!=null&&r.available?{backgroundColor:r.available}:void 0,children:t.jsx(A,{size:14})}),t.jsx("span",{className:s.legendText,children:o.available})]}),driver:t.jsxs("div",{className:s.legendItem,children:[t.jsx("span",{className:s.legendDriver,style:r!=null&&r.driver?{backgroundColor:r.driver}:void 0,children:t.jsx(q,{size:12})}),t.jsx("span",{className:s.legendText,children:o.driver})]}),sleeper:t.jsxs("div",{className:s.legendItem,children:[t.jsx("span",{className:s.legendSleeper,style:r!=null&&r.sleeper?{backgroundColor:r.sleeper}:void 0,children:t.jsx(J,{size:12})}),t.jsx("span",{className:s.legendText,children:o.sleeper})]}),vip:t.jsxs("div",{className:s.legendItem,children:[t.jsx("span",{className:s.legendVip,style:r!=null&&r.vip?{backgroundColor:r.vip}:void 0,children:t.jsx(A,{size:14})}),t.jsx("span",{className:s.legendText,children:o.vip})]})};return t.jsx("div",{className:s.legendContainer,children:c.map(d=>t.jsx(F.Fragment,{children:a[d]},d))})},X={tabContainer:"_tabContainer_11jfv_3",tab:"_tab_11jfv_3",active:"_active_11jfv_34"},oe=({tabs:n,active:c,onChange:o,className:r=""})=>t.jsx("div",{className:`${X.tabContainer} ${r}`,children:n.map(a=>t.jsx("button",{onClick:()=>o(a),className:`${X.tab} ${c===a?X.active:""}`,children:a.replace("floor-","Deck ")},a))}),y={container:"_container_b8hp8_1",title:"_title_b8hp8_8",seatContainer:"_seatContainer_b8hp8_17",seatRow:"_seatRow_b8hp8_25",aisle:"_aisle_b8hp8_33",selectedSeats:"_selectedSeats_b8hp8_38",busFrame:"_busFrame_b8hp8_49",busFront:"_busFront_b8hp8_56",spacingRow:"_spacingRow_b8hp8_71",legendItem:"_legendItem_b8hp8_95",floorContainer:"_floorContainer_b8hp8_103",floorSelector:"_floorSelector_b8hp8_125"};function Z(n,c=[4,4,4,4,4,4,4],o=!0,r,a="regular",d=!0,m=1){let l=m;const S=[];if(o){const g=[null,null,null,null,null,{id:"D",number:"Driver",isReserved:!0,isDriver:!0,type:"driver"}];S.push(g)}else if(!d){const g=[null,null,null,null,null,null];S.push(g)}return c.forEach(g=>{const h=[];for(let p=0;p<g;p++)h.push({id:l,number:String(l),isReserved:!1,type:(r==null?void 0:r[l])||a}),l++,p===Math.floor(g/2)-1&&g>1&&h.push(null);S.push(h)}),S}function H(n,c=[2,2,2,2],o=!0,r,a="regular",d=1){let m=d;const l=[],S=()=>({id:m++,number:String(m-1),isReserved:!1,type:(r==null?void 0:r[m-1])||a});return c.forEach((g,h)=>{const p=[];if(h===0&&o)p.push(S(),null,{id:"D",number:"Driver",isReserved:!0,isDriver:!0,type:"driver"});else{const E=Math.ceil(g/2),N=g-E;for(let R=0;R<E;R++)p.push(S());g>1&&p.push(null);for(let R=0;R<N;R++)p.push(S())}l.push(p)}),l}const he=({layout:n,reservedSeats:c=[],selectedSeats:o=[],onSelect:r,rowConfig:a,seatCount:d,withDriver:m=!0,vehicleType:l,seatTypes:S,defaultSeatType:g="regular",floorsConfig:h,selectedFloor:p,onFloorChange:E,legendConfig:N={show:!0,items:["reserved","selected","available","driver"],labels:{reserved:"Reserved",selected:"Selected",available:"Available",driver:"Driver",sleeper:"Sleeper",vip:"VIP"}},seatColors:R={reserved:"#E0E0E0",selected:"#4CAF50",available:"#FFFFFF",driver:"#2196F3",sleeper:"#9C27B0",vip:"#FFC107"}})=>{const C=a||{minibus:[2,2,2,2],bus:[4,4,4,4,4,4,4],elf:[1,2,2,2,1]}[l||"minibus"]||[2,2,2,2],Q=n||(()=>{if(h&&Object.keys(h).length>0){const x=p||"1",k=h[x];if(k){const v=k.row_config,T=k.seat_types||{},M=k.default_seat_type||g,O=v.reduce((L,P)=>L+P,0),w=x==="1";let W=1;if(!w){const L=Object.keys(h).map(Number).sort(),P=parseInt(x);for(const Y of L)if(Y<P){const B=h[Y.toString()];B&&(W+=B.row_config.reduce((V,z)=>V+z,0))}}return l==="bus"?Z(O,v,m&&w,T,M,w,W):H(O+(m&&w?1:0),v,m&&w,T,M,W)}}const j=d??C.reduce((x,k)=>x+k,0);return l==="bus"?Z(j,C,m,S,g,!0,1):H(j+(m?1:0),C,m,S,g,1)})(),K=j=>{if(j.isReserved||j.isDriver||!r)return;const x=String(j.id),v=o.map(String).includes(x)?o.filter(T=>String(T)!==x):[...o,x];r(v)};return t.jsxs("div",{className:y.container,children:[t.jsx(le,{show:N.show,items:N.items,labels:N.labels,colors:R}),h&&Object.keys(h).length>0&&t.jsx("div",{className:y.floorSelector,children:t.jsx(oe,{tabs:Object.keys(h).map(j=>`floor-${j}`),active:`floor-${p||"1"}`,onChange:j=>{const x=j.replace("floor-","");E==null||E(x)}})}),t.jsxs("h3",{className:y.title,children:["Select Seat ",h?`(Floor ${p||"1"})`:""]}),t.jsx(ie,{vehicleType:l,children:t.jsxs("div",{className:y.seatContainer,children:[Q.map((j,x)=>{const k=j.every(v=>v===null);return t.jsx("div",{className:`${y.seatRow} ${k?y.spacingRow:""}`,children:k?t.jsx("div",{className:"w-full h-6"}):j.map((v,T)=>v?t.jsx(ae,{seat:v,isReserved:c.includes(v.id)||c.includes(String(v.id))||v.isReserved,isSelected:o.map(String).includes(String(v.id)),onClick:()=>K(v),colors:R},v.id):t.jsx("div",{className:y.aisle},`aisle-${x}-${T}`))},x)}),l==="bus"&&t.jsx("div",{className:"flex items-center justify-center gap-1 mt-4 mb-2 text-xs text-gray-600"})]})}),t.jsxs("div",{className:y.selectedSeats,children:["Selected seats: ",t.jsx("span",{className:"font-bold",children:o.join(", ")||"No seat selected"})]})]})};b.BusFrame=ie,b.DriverSeat=se,b.RegularSeatIcon=A,b.SeatButton=ae,b.SeatLegend=le,b.SeatPickerComponent=he,b.SleeperSeatIcon=J,b.SteeringWheelIcon=q,b.ToggleTabs=oe,b.generateBusLayout=Z,b.generateMinibusLayout=H,Object.defineProperty(b,Symbol.toStringTag,{value:"Module"})});