digipin-reactjs
Version:
React hooks and components for integrating DIGIPIN (Indian Postal Digital PIN) geocoding into React apps. Includes hooks, prebuilt UI, and helpers for seamless integration.
183 lines (174 loc) • 8.31 kB
JavaScript
'use strict';
var jsxRuntime = require('react/jsx-runtime');
var React = require('react');
var digipinjs = require('digipinjs');
function useDigiPin() {
const [input, setInput] = React.useState('');
const [result, setResult] = React.useState(null);
const [loading, setLoading] = React.useState(false);
const [error, setError] = React.useState(null);
const search = React.useCallback(async (query) => {
setLoading(true);
setError(null);
try {
let res;
// Use provided query or fall back to state input
const textToSearch = query !== undefined ? query : input;
const trimmed = textToSearch.trim();
// If input looks like lat,lon, encode to DIGIPIN
if (/^-?\d+(\.\d+)?\s*,\s*-?\d+(\.\d+)?$/.test(trimmed)) {
const [latStr, lonStr] = trimmed.split(',');
const lat = Number(latStr.trim());
const lon = Number(lonStr.trim());
if (isNaN(lat) || isNaN(lon)) {
throw new Error('Invalid latitude or longitude');
}
if (lat < -90 || lat > 90) {
throw new Error('Latitude must be between -90 and 90');
}
if (lon < -180 || lon > 180) {
throw new Error('Longitude must be between -180 and 180');
}
res = digipinjs.getDigiPin(lat, lon);
}
else {
// Otherwise, decode as DIGIPIN
if (!trimmed) {
throw new Error('Input cannot be empty');
}
res = digipinjs.getLatLngFromDigiPin(trimmed);
}
setResult(res);
}
catch (e) {
let errorMessage = 'Unknown error';
if (e instanceof Error) {
errorMessage = e.message;
}
else if (typeof e === 'string') {
errorMessage = e;
}
setError(errorMessage);
setResult(null);
}
finally {
setLoading(false);
}
}, [input]);
return { input, setInput, result, loading, error, search };
}
const DigiPinInput = ({ onResult, onSearchError, ...props }) => {
const { input, setInput, result, loading, error, search } = useDigiPin();
React.useEffect(() => {
if (result && onResult) {
onResult(result);
}
}, [result, onResult]);
React.useEffect(() => {
if (error && onSearchError) {
onSearchError(error);
}
}, [error, onSearchError]);
const handleSubmit = (e) => {
e.preventDefault();
search(input);
};
return (jsxRuntime.jsxs("form", { onSubmit: handleSubmit, children: [jsxRuntime.jsx("input", { type: "text", value: input, onChange: e => setInput(e.target.value), placeholder: "Enter DigiPin query", ...props }), jsxRuntime.jsx("button", { type: "submit", disabled: loading, children: loading ? 'Searching...' : 'Search' }), error && jsxRuntime.jsx("div", { style: { color: 'red' }, children: error }), result && (jsxRuntime.jsx("pre", { children: JSON.stringify(result, null, 2) }))] }));
};
function useLatLonToDigiPin() {
const [lat, setLat] = React.useState('');
const [lon, setLon] = React.useState('');
const [digipinResult, setDigiPinResult] = React.useState(null);
const [loading, setLoading] = React.useState(false);
const [error, setError] = React.useState(null);
const convert = React.useCallback(() => {
setLoading(true);
setError(null);
try {
const latNum = Number(lat.trim());
const lonNum = Number(lon.trim());
if (isNaN(latNum) || isNaN(lonNum)) {
throw new Error('Invalid latitude or longitude');
}
if (latNum < -90 || latNum > 90) {
throw new Error('Latitude must be between -90 and 90');
}
if (lonNum < -180 || lonNum > 180) {
throw new Error('Longitude must be between -180 and 180');
}
const result = digipinjs.getDigiPin(latNum, lonNum);
setDigiPinResult(result);
}
catch (e) {
let errorMessage = 'Unknown error';
if (e instanceof Error) {
errorMessage = e.message;
}
else if (typeof e === 'string') {
errorMessage = e;
}
setError(errorMessage);
setDigiPinResult(null);
}
finally {
setLoading(false);
}
}, [lat, lon]);
return { lat, setLat, lon, setLon, digipinResult, loading, error, convert };
}
function useDigiPinToLatLon() {
const [digipinInput, setDigiPinInput] = React.useState('');
const [latLonResult, setLatLonResult] = React.useState(null);
const [loading, setLoading] = React.useState(false);
const [error, setError] = React.useState(null);
const convert = React.useCallback(() => {
setLoading(true);
setError(null);
try {
const input = digipinInput.trim();
if (!input) {
throw new Error('DIGIPIN cannot be empty');
}
const result = digipinjs.getLatLngFromDigiPin(input);
setLatLonResult({ lat: result.latitude, lon: result.longitude });
}
catch (e) {
let errorMessage = 'Unknown error';
if (e instanceof Error) {
errorMessage = e.message;
}
else if (typeof e === 'string') {
errorMessage = e;
}
setError(errorMessage);
setLatLonResult(null);
}
finally {
setLoading(false);
}
}, [digipinInput]);
return { digipinInput, setDigiPinInput, latLonResult, loading, error, convert };
}
const LatLonToDigiPinInput = () => {
const { lat, setLat, lon, setLon, digipinResult, loading, error, convert } = useLatLonToDigiPin();
const handleSubmit = (e) => {
e.preventDefault();
convert();
};
return (jsxRuntime.jsxs("form", { onSubmit: handleSubmit, style: { marginBottom: 24 }, children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("input", { type: "text", value: lat, onChange: e => setLat(e.target.value), placeholder: "Latitude", style: { marginRight: 8 } }), jsxRuntime.jsx("input", { type: "text", value: lon, onChange: e => setLon(e.target.value), placeholder: "Longitude", style: { marginRight: 8 } }), jsxRuntime.jsx("button", { type: "submit", disabled: loading, children: loading ? 'Converting...' : 'Convert to DIGIPIN' })] }), error && jsxRuntime.jsx("div", { style: { color: 'red' }, children: error }), digipinResult && (jsxRuntime.jsxs("div", { style: { marginTop: 8 }, children: [jsxRuntime.jsx("strong", { children: "DIGIPIN:" }), " ", digipinResult] }))] }));
};
const DigiPinToLatLonInput = () => {
const { digipinInput, setDigiPinInput, latLonResult, loading, error, convert } = useDigiPinToLatLon();
const handleSubmit = (e) => {
e.preventDefault();
convert();
};
return (jsxRuntime.jsxs("form", { onSubmit: handleSubmit, style: { marginBottom: 24 }, children: [jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("input", { type: "text", value: digipinInput, onChange: e => setDigiPinInput(e.target.value), placeholder: "DIGIPIN", style: { marginRight: 8 } }), jsxRuntime.jsx("button", { type: "submit", disabled: loading, children: loading ? 'Converting...' : 'Convert to Lat/Lon' })] }), error && jsxRuntime.jsx("div", { style: { color: 'red' }, children: error }), latLonResult && (jsxRuntime.jsxs("div", { style: { marginTop: 8 }, children: [jsxRuntime.jsx("strong", { children: "Latitude:" }), " ", latLonResult.lat, " ", jsxRuntime.jsx("br", {}), jsxRuntime.jsx("strong", { children: "Longitude:" }), " ", latLonResult.lon] }))] }));
};
exports.DigiPinInput = DigiPinInput;
exports.DigiPinToLatLonInput = DigiPinToLatLonInput;
exports.LatLonToDigiPinInput = LatLonToDigiPinInput;
exports.useDigiPin = useDigiPin;
exports.useDigiPinToLatLon = useDigiPinToLatLon;
exports.useLatLonToDigiPin = useLatLonToDigiPin;
//# sourceMappingURL=index.js.map