@anker-in/ui 0.1.11 → 0.1.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/demo-room.js +119 -101
- package/dist/demo-room.js.map +1 -1
- package/dist/demo-room.mjs +119 -101
- package/dist/demo-room.mjs.map +1 -1
- package/dist/index.d.mts +5 -1
- package/dist/index.d.ts +5 -1
- package/dist/index.js +299 -262
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +299 -262
- package/dist/index.mjs.map +1 -1
- package/package.json +3 -4
package/dist/demo-room.js
CHANGED
|
@@ -335,12 +335,14 @@ var StudioMap = ({
|
|
|
335
335
|
const lng = Number(location.lng);
|
|
336
336
|
const svgIcon = {
|
|
337
337
|
url: `data:image/svg+xml;charset=UTF-8,${encodeURIComponent(`
|
|
338
|
-
<svg
|
|
339
|
-
<
|
|
338
|
+
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
339
|
+
<circle cx="24" cy="24" r="22" fill="#00000010"/>
|
|
340
|
+
<circle cx="24" cy="24" r="10" fill="#000000"/>
|
|
341
|
+
<circle cx="24" cy="24" r="5" fill="#3ADB67"/>
|
|
340
342
|
</svg>
|
|
341
343
|
`)}`,
|
|
342
|
-
scaledSize: { width:
|
|
343
|
-
anchor: { x:
|
|
344
|
+
scaledSize: { width: 48, height: 48 },
|
|
345
|
+
anchor: { x: 24, y: 24 }
|
|
344
346
|
};
|
|
345
347
|
const marker = new google.maps.Marker({
|
|
346
348
|
position: { lat, lng },
|
|
@@ -528,7 +530,7 @@ var StudioMap = ({
|
|
|
528
530
|
"div",
|
|
529
531
|
{
|
|
530
532
|
className: cn(
|
|
531
|
-
"flex items-center justify-center bg-gray-100 rounded-
|
|
533
|
+
"flex items-center overflow-hidden justify-center bg-gray-100 rounded-[16px]",
|
|
532
534
|
className
|
|
533
535
|
),
|
|
534
536
|
style: { height: mapHeight },
|
|
@@ -540,7 +542,7 @@ var StudioMap = ({
|
|
|
540
542
|
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
541
543
|
"div",
|
|
542
544
|
{
|
|
543
|
-
className: cn("relative w-full rounded-
|
|
545
|
+
className: cn("relative w-full rounded-[16px] overflow-hidden", className),
|
|
544
546
|
...props,
|
|
545
547
|
children: [
|
|
546
548
|
/* @__PURE__ */ jsxRuntime.jsx("div", { ref: mapRef, style: { height: mapHeight } }),
|
|
@@ -749,6 +751,29 @@ var LocationFilter = ({
|
|
|
749
751
|
);
|
|
750
752
|
const showIndexBar = filteredItems.length >= 10;
|
|
751
753
|
const handleItemClick = (item) => {
|
|
754
|
+
if (item.code === "__all__") {
|
|
755
|
+
if (currentLevel === "country") {
|
|
756
|
+
onSelect?.({
|
|
757
|
+
level: "country"
|
|
758
|
+
});
|
|
759
|
+
onClose?.();
|
|
760
|
+
} else if (currentLevel === "state") {
|
|
761
|
+
onSelect?.({
|
|
762
|
+
level: "state",
|
|
763
|
+
country: selectedCountry
|
|
764
|
+
});
|
|
765
|
+
onClose?.();
|
|
766
|
+
} else if (currentLevel === "city") {
|
|
767
|
+
const parts = selectedState?.split("/") || [];
|
|
768
|
+
onSelect?.({
|
|
769
|
+
level: "city",
|
|
770
|
+
country: parts[0],
|
|
771
|
+
state: parts[1]
|
|
772
|
+
});
|
|
773
|
+
onClose?.();
|
|
774
|
+
}
|
|
775
|
+
return;
|
|
776
|
+
}
|
|
752
777
|
if (currentLevel === "country") {
|
|
753
778
|
setSelectedCountry(item.code);
|
|
754
779
|
setCurrentLevel("state");
|
|
@@ -779,87 +804,94 @@ var LocationFilter = ({
|
|
|
779
804
|
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
780
805
|
"div",
|
|
781
806
|
{
|
|
782
|
-
style: { height: "
|
|
807
|
+
style: { height: "724px" },
|
|
783
808
|
className: cn(
|
|
784
|
-
"w-full rounded-[12px] absolute z-10
|
|
809
|
+
"w-full rounded-b-[12px] absolute z-10 bottom-[-2px] left-0 bg-white border border-[#E4E5E6]",
|
|
785
810
|
RoomsList_default.antdMobileScope
|
|
786
811
|
),
|
|
787
812
|
children: [
|
|
788
|
-
/* @__PURE__ */ jsxRuntime.
|
|
813
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
789
814
|
"div",
|
|
790
815
|
{
|
|
791
816
|
style: { background: "#F8F8F8" },
|
|
792
|
-
className: "
|
|
793
|
-
children: [
|
|
794
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
817
|
+
className: "h-[76px] font-bold text-[14px] flex flex-col",
|
|
818
|
+
children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center text-[16px] px-[20px] gap-[16px] py-[24px]", children: [
|
|
819
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
795
820
|
"button",
|
|
796
821
|
{
|
|
797
|
-
onClick:
|
|
798
|
-
className:
|
|
799
|
-
|
|
800
|
-
"
|
|
801
|
-
|
|
802
|
-
|
|
803
|
-
width: "24",
|
|
804
|
-
height: "24",
|
|
805
|
-
viewBox: "0 0 24 24",
|
|
806
|
-
fill: "none",
|
|
807
|
-
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
808
|
-
"path",
|
|
809
|
-
{
|
|
810
|
-
d: "M6.4 19L5 17.6L10.6 12L5 6.4L6.4 5L12 10.6L17.6 5L19 6.4L13.4 12L19 17.6L17.6 19L12 13.4L6.4 19Z",
|
|
811
|
-
fill: "#1D1D1F"
|
|
812
|
-
}
|
|
813
|
-
)
|
|
814
|
-
}
|
|
815
|
-
)
|
|
822
|
+
onClick: () => handleTabClick("country"),
|
|
823
|
+
className: cn(
|
|
824
|
+
"pb-[4px] transition-colors",
|
|
825
|
+
currentLevel === "country" ? "text-[#080A0F] border-b-2 border-[#3ADB67]" : "text-[#080A0F]"
|
|
826
|
+
),
|
|
827
|
+
children: pageData.country
|
|
816
828
|
}
|
|
817
|
-
)
|
|
818
|
-
/* @__PURE__ */ jsxRuntime.
|
|
819
|
-
|
|
820
|
-
|
|
821
|
-
|
|
822
|
-
|
|
823
|
-
|
|
824
|
-
|
|
825
|
-
|
|
826
|
-
|
|
827
|
-
|
|
828
|
-
|
|
829
|
-
|
|
830
|
-
|
|
831
|
-
|
|
832
|
-
|
|
833
|
-
|
|
834
|
-
|
|
835
|
-
|
|
836
|
-
|
|
837
|
-
|
|
838
|
-
|
|
839
|
-
|
|
840
|
-
|
|
841
|
-
|
|
842
|
-
|
|
843
|
-
|
|
844
|
-
|
|
845
|
-
{
|
|
846
|
-
onClick: () => handleTabClick("city"),
|
|
847
|
-
disabled: !selectedState,
|
|
848
|
-
className: cn(
|
|
849
|
-
"pb-[4px] transition-colors",
|
|
850
|
-
currentLevel === "city" ? "text-[#080A0F] border-b-2 border-[#3ADB67]" : "text-[#080A0F]",
|
|
851
|
-
!selectedState && "opacity-50 cursor-not-allowed"
|
|
852
|
-
),
|
|
853
|
-
children: pageData.city
|
|
854
|
-
}
|
|
855
|
-
)
|
|
856
|
-
] })
|
|
857
|
-
]
|
|
829
|
+
),
|
|
830
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
831
|
+
"button",
|
|
832
|
+
{
|
|
833
|
+
onClick: () => handleTabClick("state"),
|
|
834
|
+
disabled: !selectedCountry,
|
|
835
|
+
className: cn(
|
|
836
|
+
"pb-[4px] transition-colors",
|
|
837
|
+
currentLevel === "state" ? "text-[#080A0F] border-b-2 border-[#3ADB67]" : "text-[#080A0F]",
|
|
838
|
+
!selectedCountry && "opacity-50 cursor-not-allowed"
|
|
839
|
+
),
|
|
840
|
+
children: pageData.state
|
|
841
|
+
}
|
|
842
|
+
),
|
|
843
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
844
|
+
"button",
|
|
845
|
+
{
|
|
846
|
+
onClick: () => handleTabClick("city"),
|
|
847
|
+
disabled: !selectedState,
|
|
848
|
+
className: cn(
|
|
849
|
+
"pb-[4px] transition-colors",
|
|
850
|
+
currentLevel === "city" ? "text-[#080A0F] border-b-2 border-[#3ADB67]" : "text-[#080A0F]",
|
|
851
|
+
!selectedState && "opacity-50 cursor-not-allowed"
|
|
852
|
+
),
|
|
853
|
+
children: pageData.city
|
|
854
|
+
}
|
|
855
|
+
)
|
|
856
|
+
] })
|
|
858
857
|
}
|
|
859
858
|
),
|
|
860
|
-
/* @__PURE__ */ jsxRuntime.jsx(AntdMobileIsolated, { style: { height: "calc(100% -
|
|
861
|
-
|
|
862
|
-
|
|
859
|
+
/* @__PURE__ */ jsxRuntime.jsx(AntdMobileIsolated, { style: { height: "calc(100% - 76px)" }, children: showIndexBar ? /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { height: "100%", display: "flex", flexDirection: "column" }, children: [
|
|
860
|
+
/* @__PURE__ */ jsxRuntime.jsx(List__default.default, { children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
861
|
+
List__default.default.Item,
|
|
862
|
+
{
|
|
863
|
+
onClick: () => handleItemClick({ code: "__all__", name: pageData.allLocations || "All", count: filteredItems.length }),
|
|
864
|
+
className: "text-[16px] !pl-[24px] font-bold",
|
|
865
|
+
style: { cursor: "pointer", borderBottom: "1px solid #E4E5E6" },
|
|
866
|
+
children: pageData.allLocations
|
|
867
|
+
},
|
|
868
|
+
"__all__"
|
|
869
|
+
) }),
|
|
870
|
+
/* @__PURE__ */ jsxRuntime.jsx(IndexBar__default.default, { style: { flex: 1 }, children: groupedItems.map((group) => {
|
|
871
|
+
const { title, items } = group;
|
|
872
|
+
return /* @__PURE__ */ jsxRuntime.jsx(IndexBar__default.default.Panel, { index: title, title, children: /* @__PURE__ */ jsxRuntime.jsx(List__default.default, { children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
873
|
+
List__default.default.Item,
|
|
874
|
+
{
|
|
875
|
+
onClick: () => handleItemClick(item),
|
|
876
|
+
className: "text-[16px] !pl-[24px]",
|
|
877
|
+
style: { cursor: "pointer" },
|
|
878
|
+
children: item.name
|
|
879
|
+
},
|
|
880
|
+
item.code
|
|
881
|
+
)) }) }, title);
|
|
882
|
+
}) })
|
|
883
|
+
] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { style: { height: "100%", overflow: "auto" }, children: /* @__PURE__ */ jsxRuntime.jsxs(List__default.default, { children: [
|
|
884
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
885
|
+
List__default.default.Item,
|
|
886
|
+
{
|
|
887
|
+
onClick: () => handleItemClick({ code: "__all__", name: pageData.allLocations || "All", count: filteredItems.length }),
|
|
888
|
+
className: "text-[16px] !pl-[24px] font-bold",
|
|
889
|
+
style: { cursor: "pointer", borderBottom: "1px solid #E4E5E6" },
|
|
890
|
+
children: pageData.allLocations
|
|
891
|
+
},
|
|
892
|
+
"__all__"
|
|
893
|
+
),
|
|
894
|
+
filteredItems.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
863
895
|
List__default.default.Item,
|
|
864
896
|
{
|
|
865
897
|
onClick: () => handleItemClick(item),
|
|
@@ -868,17 +900,8 @@ var LocationFilter = ({
|
|
|
868
900
|
children: item.name
|
|
869
901
|
},
|
|
870
902
|
item.code
|
|
871
|
-
))
|
|
872
|
-
}) })
|
|
873
|
-
List__default.default.Item,
|
|
874
|
-
{
|
|
875
|
-
onClick: () => handleItemClick(item),
|
|
876
|
-
className: "text-[16px] !pl-[24px]",
|
|
877
|
-
style: { cursor: "pointer" },
|
|
878
|
-
children: item.name
|
|
879
|
-
},
|
|
880
|
-
item.code
|
|
881
|
-
)) }) }) })
|
|
903
|
+
))
|
|
904
|
+
] }) }) })
|
|
882
905
|
]
|
|
883
906
|
}
|
|
884
907
|
);
|
|
@@ -1104,10 +1127,6 @@ var RoomsList = ({
|
|
|
1104
1127
|
setSelectedLocation(selection);
|
|
1105
1128
|
setShowLocationFilter(false);
|
|
1106
1129
|
};
|
|
1107
|
-
const handleClearFilter = () => {
|
|
1108
|
-
setSelectedLocation(void 0);
|
|
1109
|
-
};
|
|
1110
|
-
console.log(filteredStudioLocations);
|
|
1111
1130
|
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, ...props, children: [
|
|
1112
1131
|
/* @__PURE__ */ jsxRuntime.jsx(Title, { title: mergedPageData.title }),
|
|
1113
1132
|
loading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center h-[794px]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-center", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-lg font-medium", children: mergedPageData.loadingText }) }) }),
|
|
@@ -1122,12 +1141,15 @@ var RoomsList = ({
|
|
|
1122
1141
|
className: "flex-none relative w-[420px] l:!w-full",
|
|
1123
1142
|
style: { height: "794px" },
|
|
1124
1143
|
children: [
|
|
1125
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className:
|
|
1144
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(
|
|
1145
|
+
"mb-4 bg-white border border-[#E4E5E6] px-[20px] py-[16px]",
|
|
1146
|
+
showLocationFilter ? "rounded-t-[12px] rounded-b-none" : "rounded-[12px]"
|
|
1147
|
+
), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "h-[40px] font-bold text-[16px] l:text-[14px] gap-10 l:gap-4 flex items-center", children: [
|
|
1126
1148
|
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
1127
1149
|
"button",
|
|
1128
1150
|
{
|
|
1129
1151
|
className: "flex cursor-pointer items-center hover:text-[#3ADB67] transition-colors",
|
|
1130
|
-
onClick: () => setShowLocationFilter(
|
|
1152
|
+
onClick: () => setShowLocationFilter(!showLocationFilter),
|
|
1131
1153
|
children: [
|
|
1132
1154
|
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "mr-1", children: getSelectedLocationName() }),
|
|
1133
1155
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -1138,6 +1160,10 @@ var RoomsList = ({
|
|
|
1138
1160
|
height: "24",
|
|
1139
1161
|
viewBox: "0 0 24 24",
|
|
1140
1162
|
fill: "none",
|
|
1163
|
+
className: cn(
|
|
1164
|
+
"transition-transform duration-300",
|
|
1165
|
+
showLocationFilter && "rotate-180"
|
|
1166
|
+
),
|
|
1141
1167
|
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
1142
1168
|
"path",
|
|
1143
1169
|
{
|
|
@@ -1150,14 +1176,7 @@ var RoomsList = ({
|
|
|
1150
1176
|
]
|
|
1151
1177
|
}
|
|
1152
1178
|
),
|
|
1153
|
-
selectedLocation &&
|
|
1154
|
-
"button",
|
|
1155
|
-
{
|
|
1156
|
-
onClick: handleClearFilter,
|
|
1157
|
-
className: "ml-auto text-[14px] text-[#2E8B57] hover:underline",
|
|
1158
|
-
children: mergedPageData.locationFilter.clear
|
|
1159
|
-
}
|
|
1160
|
-
),
|
|
1179
|
+
selectedLocation && false,
|
|
1161
1180
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex text-[#767880] cursor-not-allowed", children: [
|
|
1162
1181
|
mergedPageData.machine,
|
|
1163
1182
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -1198,7 +1217,6 @@ var RoomsList = ({
|
|
|
1198
1217
|
euifyMakeModel: item?.euifyMakeModel || "",
|
|
1199
1218
|
onSchedule,
|
|
1200
1219
|
onMouseEnter: () => setHoveredRoomId(item.id),
|
|
1201
|
-
onMouseLeave: () => setHoveredRoomId(null),
|
|
1202
1220
|
pageData: {
|
|
1203
1221
|
...mergedPageData.studioCard,
|
|
1204
1222
|
noAvailableTime: mergedPageData?.noAvailableTime
|