From 111aec77dce71eb912e44b4390e9c3c54c3f1d6d Mon Sep 17 00:00:00 2001 From: Antonia van Eek Date: Wed, 4 Dec 2024 15:41:46 +0100 Subject: [PATCH] code review: minor documentation improvements --- .changeset/red-rice-applaud.md | 6 ++++- .../coordinate-search/CoordinateInput.tsx | 22 +++++++++---------- src/packages/coordinate-search/README.md | 18 ++++++++++----- 3 files changed, 29 insertions(+), 17 deletions(-) diff --git a/.changeset/red-rice-applaud.md b/.changeset/red-rice-applaud.md index 28dc0935..a59d2007 100644 --- a/.changeset/red-rice-applaud.md +++ b/.changeset/red-rice-applaud.md @@ -2,4 +2,8 @@ "@open-pioneer/coordinate-search": patch --- -Coordinate viewer with added functionality to search for coordinates via input +Added new components CoordinateSearch and CoordinateInput with functionality to search for coordinates via input. + +``` + +``` diff --git a/src/packages/coordinate-search/CoordinateInput.tsx b/src/packages/coordinate-search/CoordinateInput.tsx index d8f59180..c6a8f9cc 100644 --- a/src/packages/coordinate-search/CoordinateInput.tsx +++ b/src/packages/coordinate-search/CoordinateInput.tsx @@ -42,7 +42,7 @@ const DEFAULT_PROJECTIONS = [ ]; /** - * dropdown item of projection selection with an optional coordinate precision + * Dropdown item of projection selection with an optional coordinate precision */ export interface ProjectionInput { /** @@ -62,7 +62,7 @@ export interface ProjectionInput { } /** - * dropdown item of projection selection with an optional coordinate precision + * Dropdown item of projection selection with an optional coordinate precision */ export interface ProjectionOption { /** @@ -82,7 +82,7 @@ export interface ProjectionOption { } /** - * dropdown item of projection selection, must have a specified precision + * Dropdown item of projection selection, must have a specified precision */ type ProjectionItem = Required; @@ -118,7 +118,7 @@ export interface CoordinateInputProps extends CommonComponentProps, MapModelProp projections?: ProjectionInput[]; /** - * Optional event that gets called if some coordinates are entered or projection is changed by the user. + * Optional event that gets called if (valid) coordinates are entered or projection is changed by the user. */ onSelect?: (selectProps: CoordinatesEvent) => void; @@ -128,23 +128,23 @@ export interface CoordinateInputProps extends CommonComponentProps, MapModelProp onClear?: () => void; /** - * Insert input value and overwrite user input + * Insert input value and overwrite user input. */ input?: Coordinate; /** - * Placeholder text to display when no input was entered by the user. Common usages: + * Placeholder text to display when no input is present. Common usages: * * hint for the user ("enter coordinate here") * * example coordinate ("12.345 67.890") * * current mouse position * - * If a Coordinate is given, it has to be in the current projection of the map + * If a coordinate is given, it has to be in the current projection of the map. */ placeholder?: string | Coordinate; } /** - * The `CoordinateInput` component can be used in an app to provide an validated input field for coordinates in a selected projection + * The `CoordinateInput` component can be used in an app to provide a validated input field for coordinates in a selected projection */ export const CoordinateInput: FC = (props) => { const { onSelect, onClear, projections = DEFAULT_PROJECTIONS, input, placeholder = "" } = props; @@ -152,7 +152,7 @@ export const CoordinateInput: FC = (props) => { const { map } = useMapModel(props); const intl = useIntl(); const olMap = map?.olMap; - const mapProjection = useProjection(olMap) ?? undefined; // projection of the map + const mapProjection = useProjection(olMap) ?? undefined; // Projection items (dropdown) const availableProjections = useProjectionItems(projections); // filter for projections that are known @@ -654,8 +654,8 @@ function checkIfCoordsInProjectionsExtent(projection: Projection, coords: number // TODO: use NumberParser from core /* transforms the given coordinates to the given destination projection */ function parseCoords(inputString: string, intl: PackageIntl) { - const thousandSeparator = /^de-?/.test(intl.locale) ? "." : /^en-?/.test(intl.locale) ? "," : ""; - const inputStringWithoutThousandSeparator = inputString.replaceAll(thousandSeparator, ""); + const separator = /^de-?/.test(intl.locale) ? "." : /^en-?/.test(intl.locale) ? "," : ""; + const inputStringWithoutThousandSeparator = inputString.replaceAll(separator, ""); const coordsString = inputStringWithoutThousandSeparator.replaceAll(",", "."); diff --git a/src/packages/coordinate-search/README.md b/src/packages/coordinate-search/README.md index ef2401e8..40cfb401 100644 --- a/src/packages/coordinate-search/README.md +++ b/src/packages/coordinate-search/README.md @@ -1,8 +1,8 @@ # @open-pioneer/coordinate-search -This package provides UI components which allow users to search for coordinates in the map and provide an input field for coordinates. +This package provides a UI component which allow users to search for coordinates in the map and provides component that is an input field for coordinates. -## Usage Coordinate search +## Usage coordinate search To integrate the coordinate search in your app, insert the following snippet: @@ -10,6 +10,8 @@ To integrate the coordinate search in your app, insert the following snippet: ``` +### Configuration + To define the selectable projections, set the optional `projections` property: ```jsx @@ -41,7 +43,7 @@ If no `projections` are specified, Web Mercator (EPSG:3857) and WGS 84 (EPSG:432 To listen to the events `onSelect` and `onClear`, provide optional callback functions to the component. -In case of the `onSelect` event, you can access the entered coordinate from the parameter `CoordinatesEvent`. The `onSelect` event gets called if you enter the input or if the selected projection is changed after entering an input. +In case of the `onSelect` event, you can access the entered coordinate from the parameter `CoordinatesEvent`. The `onSelect` event gets called if a valid input is entered or if the selected projection is changed after entering an input. With the `onClear` option, you can set a callback function that gets called if the clear button is clicked. @@ -57,7 +59,7 @@ With the `onClear` option, you can set a callback function that gets called if t /> ``` -## Usage Coordinate input +## Usage coordinate input To integrate the coordinate input component in your app, insert the following snippet: @@ -65,6 +67,8 @@ To integrate the coordinate input component in your app, insert the following sn ``` +### Configure projections + To define the selectable projections, set the optional `projections` property: ```jsx @@ -92,16 +96,20 @@ The optional property `precision` allows to specify the number of display digits If no `projections` are specified, Web Mercator (EPSG:3857) and WGS 84 (EPSG:4326) are the default options. +### Set the input value + To set the value of the input field from outside the component, set the optional `input` property of type `Coordinate`. The coordinates have to be in the projection of the map. -If the value changes, the `onSelect` function is triggered. +If the value changes, the `onSelect` function is triggered (see below). ```jsx ``` +### Configure the placeholder + To set the placeholder of the input field from outside the component, use the optional `placeholder` property of type `Coordinate` or `string`. Common usage for a `string` input is a supportive text like "Enter coordinates here".