@skalfa/skalfa-component 1.0.5 → 1.0.6

package/dist/index.d.ts

@@ -17,7 +17,6 @@ export * from "./input/InputDate.component";
 export * from "./input/InputDatetime.component";
 export * from "./input/InputDocument.component";
 export * from "./input/InputImage.component";
-export * from "./input/InputMap.component";
 export * from "./input/InputNumber.component";
 export * from "./input/InputOtp.component";
 export * from "./input/InputPassword.component";

package/dist/index.js

@@ -74,10 +74,6 @@ exports.InputDocumentComponent = require("./input/InputDocument.component").Inpu
 exports.InputImageComponent = require("./input/InputImage.component").InputImageComponent;
 exports.CanvasCropper = require("./input/InputImage.component").CanvasCropper;
 
-// Static export for ./input/InputMap.component
-exports.InputMapPickerComponent = require("./input/InputMap.component").InputMapPickerComponent;
-exports.InputMapComponent = require("./input/InputMap.component").InputMapComponent;
-
 // Static export for ./input/InputNumber.component
 exports.InputNumberComponent = require("./input/InputNumber.component").InputNumberComponent;
 

package/dist/supervision/FormSupervision.component.d.ts

@@ -12,7 +12,6 @@ import { SelectProps } from "../input/Select.component";
 import { InputTimeProps } from "../input/InputTime.component";
 import { InputImageProps } from "../input/InputImage.component";
 import { InputDateTimeProps } from "../input/InputDatetime.component";
-import { InputMapProps } from "../input/InputMap.component";
 type formCustomConstructionProps = ({ formControl, values, setValues, setRegister, errors, setErrors, }: {
     formControl: (name: string) => {
         register: (regName: string, regValidations?: ValidationRules | undefined) => void;
@@ -55,7 +54,6 @@ type ConstructionMap = {
     select: SelectProps;
     "enter-password": InputPasswordProps;
     otp: InputOtpProps;
-    map: InputMapProps;
     custom: formCustomConstructionProps;
 };
 type TypeKeys = keyof ConstructionMap;

package/dist/supervision/FormSupervision.component.js

@@ -21,7 +21,6 @@ const Toast_component_1 = require("../modal/Toast.component");
 const InputTime_component_1 = require("../input/InputTime.component");
 const InputImage_component_1 = require("../input/InputImage.component");
 const InputDatetime_component_1 = require("../input/InputDatetime.component");
-const InputMap_component_1 = require("../input/InputMap.component");
 function FormSupervisionComponent({ title, fields, submitControl, confirmation, defaultValue, onSuccess, onError, footerControl, payload, className = "", }) {
     const [modal, setModal] = (0, react_1.useState)(false);
     const [fresh, setFresh] = (0, react_1.useState)(true);
@@ -149,7 +148,6 @@ function FormSupervisionComponent({ title, fields, submitControl, confirmation,
         "enter-password": InputPassword_component_1.InputPasswordComponent,
         otp: InputOtp_component_1.InputOtpComponent,
         image: InputImage_component_1.InputImageComponent,
-        map: InputMap_component_1.InputMapComponent,
         cluster: () => null,
         custom: () => null,
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skalfa/skalfa-component",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "description": "Reusable UI components for Skalfa App.",
   "license": "MIT",
   "keywords": ["skalfa", "skalfa-app", "skalfa-component", "next-framework", "next-template"],

package/dist/input/InputMap.component.d.ts

@@ -1,25 +0,0 @@
-import { ValidationRules } from "@utils";
-export interface ValueMapProps {
-    lat: number | null;
-    lng: number | null;
-    address?: string;
-}
-export interface InputMapProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange"> {
-    label?: string;
-    tip?: string | React.ReactNode;
-    leftIcon?: any;
-    rightIcon?: any;
-    value?: any;
-    invalid?: string;
-    validations?: ValidationRules;
-    onChange?: (value: any) => any;
-    register?: (name: string, validations?: ValidationRules) => void;
-    unregister?: (name: string) => void;
-    className?: string;
-}
-export declare function InputMapComponent({ label, tip, leftIcon, rightIcon, value, invalid, validations, register, unregister, onChange, className, ...props }: InputMapProps): import("@types/react").JSX.Element;
-export interface MapPickerProps {
-    value?: any;
-    onChange?: (value: any) => any;
-}
-export declare const InputMapPickerComponent: React.FC<MapPickerProps>;

package/dist/input/InputMap.component.js

@@ -1,105 +0,0 @@
-"use client";
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.InputMapPickerComponent = void 0;
-exports.InputMapComponent = InputMapComponent;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const axios_1 = __importDefault(require("axios"));
-const react_fontawesome_1 = require("@fortawesome/react-fontawesome");
-const free_solid_svg_icons_1 = require("@fortawesome/free-solid-svg-icons");
-const api_1 = require("@react-google-maps/api");
-const LoadScriptComponent = api_1.LoadScript;
-const GoogleMapComponent = api_1.GoogleMap;
-const _utils_1 = require("@utils");
-const BottomSheet_component_1 = require("../modal/BottomSheet.component");
-const Button_component_1 = require("../button/Button.component");
-const OutsideClick_component_1 = require("../wrap/OutsideClick.component");
-function InputMapComponent({ label, tip, leftIcon, rightIcon, value, invalid, validations, register, unregister, onChange, className = "", ...props }) {
-    const { isSm } = (0, _utils_1.useResponsive)();
-    // =========================>
-    // ## Invalid handler
-    // =========================>
-    const inputHandler = (0, _utils_1.useInputHandler)(props.name, value, validations, register, unregister, false);
-    const randomId = (0, _utils_1.useInputRandomId)();
-    // =========================>
-    // ## Invalid handler
-    // =========================>
-    const [invalidMessage] = (0, _utils_1.useValidation)(inputHandler.value, validations, invalid, inputHandler.idle);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "input-container", children: [label && ((0, jsx_runtime_1.jsxs)("label", { htmlFor: randomId, className: (0, _utils_1.cn)("input-label", props.disabled && "input-label-disabled", inputHandler.focus && "input-label-focus", !!invalidMessage && "input-label-error", (0, _utils_1.pcn)(className, "label")), children: [label, validations && _utils_1.validation.hasRules(validations, "required") && (0, jsx_runtime_1.jsx)("span", { className: "text-danger ml-1", children: "*" })] })), tip && ((0, jsx_runtime_1.jsx)("small", { className: (0, _utils_1.cn)("input-tip", props.disabled && "input-tip-disabled", (0, _utils_1.pcn)(className, "tip")), children: tip })), (0, jsx_runtime_1.jsx)(OutsideClick_component_1.OutsideClickComponent, { onOutsideClick: !isSm ? () => inputHandler.setFocus(false) : undefined, children: (0, jsx_runtime_1.jsxs)("div", { className: "relative", children: [(0, jsx_runtime_1.jsx)("input", { ...props, id: randomId, className: (0, _utils_1.cn)("input", leftIcon && "input-with-left-icon", rightIcon && "input-with-right-icon", (0, _utils_1.pcn)(className, "input"), !!invalidMessage && "input-error"), value: inputHandler.value?.address || "", readOnly: true, onFocus: (e) => {
-                                        props.onFocus?.(e);
-                                        inputHandler.setFocus(true);
-                                        inputHandler.setIdle(false);
-                                    }, autoComplete: "off" }), leftIcon && ((0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { className: (0, _utils_1.cn)("input-icon", "input-icon-left", props.disabled && "input-icon-disabled", inputHandler.focus && "input-icon-focus", (0, _utils_1.pcn)(className, "icon")), icon: leftIcon })), rightIcon && ((0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { className: (0, _utils_1.cn)("input-icon", "input-icon-right", props.disabled && "input-icon-disabled", inputHandler.focus && "input-icon-focus", (0, _utils_1.pcn)(className, "icon")), icon: rightIcon })), !isSm && inputHandler.focus && ((0, jsx_runtime_1.jsx)("div", { className: "input-map-suggest-container", style: { height: 300 }, children: (0, jsx_runtime_1.jsx)(exports.InputMapPickerComponent, { value: inputHandler.value, onChange: (e) => {
-                                            inputHandler.setValue(e);
-                                            onChange?.(e);
-                                        } }) }))] }) }), invalidMessage && ((0, jsx_runtime_1.jsx)("small", { className: (0, _utils_1.cn)("input-error-message", (0, _utils_1.pcn)(className, "error")), children: invalidMessage }))] }), isSm && ((0, jsx_runtime_1.jsx)(BottomSheet_component_1.BottomSheetComponent, { show: inputHandler.focus, onClose: () => inputHandler.setFocus(false), size: 450, footer: (0, jsx_runtime_1.jsx)("div", { className: "p-4", children: (0, jsx_runtime_1.jsx)(Button_component_1.ButtonComponent, { label: "Selesai", variant: "outline", onClick: () => inputHandler.setFocus(false), block: true }) }), children: (0, jsx_runtime_1.jsx)("div", { className: "p-4", children: (0, jsx_runtime_1.jsx)(exports.InputMapPickerComponent, { onChange: (e) => {
-                            inputHandler.setValue(e);
-                            onChange?.(e);
-                        } }) }) }))] }));
-}
-const InputMapPickerComponent = ({ onChange, value }) => {
-    const mapRef = (0, react_1.useRef)(null);
-    const [addressLoading, setAddressLoading] = (0, react_1.useState)(false);
-    const [drag, setDrag] = (0, react_1.useState)(false);
-    // =========================>
-    // ## Map Events
-    // =========================>
-    const setCurrentPosition = () => {
-        if (navigator.geolocation) {
-            navigator.geolocation.getCurrentPosition((pos) => {
-                const newPos = {
-                    lat: pos.coords.latitude,
-                    lng: pos.coords.longitude,
-                    address: "",
-                };
-                onChange?.(newPos);
-                mapRef.current?.panTo(new google.maps.LatLng(newPos.lat, newPos.lng));
-            });
-        }
-    };
-    const handleDragEnd = (0, react_1.useCallback)(() => {
-        if (mapRef.current) {
-            const center = mapRef.current.getCenter();
-            if (center) {
-                onChange?.({
-                    lat: center.lat(),
-                    lng: center.lng(),
-                    address: "",
-                });
-            }
-            setDrag(false);
-        }
-    }, []);
-    // =========================>
-    // ## Reverse Geocode
-    // =========================>
-    (0, react_1.useEffect)(() => {
-        if (value?.lat && value?.lng) {
-            setAddressLoading(true);
-            onChange?.((prev) => ({ ...prev, address: "" }));
-            axios_1.default.get(`https://api.geoapify.com/v1/geocode/reverse?lat=${value?.lat}&lon=${value?.lng}&apiKey=${process.env.NEXT_PUBLIC_GEOAPIFY_KEY}`)
-                .then((res) => {
-                if (res.status === 200 && !res.data.error) {
-                    const data = res.data.features?.at(0)?.properties;
-                    const address = (data?.address_line1 || "") + " " + (data?.address_line2 || "");
-                    onChange?.((prev) => ({ ...prev, address }));
-                    onChange?.({ ...value, address });
-                }
-            })
-                .finally(() => setAddressLoading(false));
-        }
-    }, [value?.lat, value?.lng]);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "relative w-full", children: [(0, jsx_runtime_1.jsx)(LoadScriptComponent, { googleMapsApiKey: process.env.NEXT_PUBLIC_MAP_KEY || "", children: (0, jsx_runtime_1.jsx)(GoogleMapComponent, { mapContainerStyle: { width: "100%", height: "100%" }, center: {
-                        lat: value?.lat || -6.208,
-                        lng: value?.lng || 106.689,
-                    }, zoom: 18, options: {
-                        streetViewControl: false,
-                        mapTypeControl: false,
-                        fullscreenControl: false,
-                    }, onLoad: (map) => { mapRef.current = map; }, onDrag: () => setDrag(true), onDragEnd: handleDragEnd }) }), (0, jsx_runtime_1.jsx)("div", { className: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 pointer-events-none", children: (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faLocationDot, className: (0, _utils_1.cn)("input-map-marker", drag && "input-map-marker-drag") }) }), (0, jsx_runtime_1.jsx)("div", { className: "input-map-badge-left", children: addressLoading && !value?.address ? ((0, jsx_runtime_1.jsx)("div", { className: "py-4 w-[200px]" })) : ((0, jsx_runtime_1.jsx)("span", { className: "text-sm", children: value?.address })) }), (0, jsx_runtime_1.jsx)("div", { className: "input-map-badge-right", onClick: () => setCurrentPosition(), children: (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faLocationCrosshairs, className: "text-lg" }) })] }));
-};
-exports.InputMapPickerComponent = InputMapPickerComponent;