From 6fdda51f0dfb3fd6bd1b340f3ae64c5969a30ff8 Mon Sep 17 00:00:00 2001 From: Dlurak <84224239+Dlurak@users.noreply.github.com> Date: Wed, 16 Oct 2024 17:03:00 +0200 Subject: [PATCH 1/3] Add the correct input type attribute to edit inputs --- .../EditContent/MajorKeysEditor.tsx | 19 ++++++++++++---- .../EditContent/TagsEditor/ValueInput.tsx | 9 ++++++-- .../EditDialog/EditContent/helpers.tsx | 22 +++++++++++++++++++ 3 files changed, 44 insertions(+), 6 deletions(-) diff --git a/src/components/FeaturePanel/EditDialog/EditContent/MajorKeysEditor.tsx b/src/components/FeaturePanel/EditDialog/EditContent/MajorKeysEditor.tsx index 5a57455d..477031e2 100644 --- a/src/components/FeaturePanel/EditDialog/EditContent/MajorKeysEditor.tsx +++ b/src/components/FeaturePanel/EditDialog/EditContent/MajorKeysEditor.tsx @@ -9,7 +9,7 @@ import { useEditDialogContext } from '../../helpers/EditDialogContext'; import { useEditContext } from '../EditContext'; import { OpeningHoursEditor } from './OpeningHoursEditor/OpeningHoursEditor'; import styled from '@emotion/styled'; -import { CharacterCount } from './helpers'; +import { CharacterCount, getInputTypeForKey } from './helpers'; export const majorKeys = [ 'name', @@ -21,7 +21,7 @@ export const majorKeys = [ const MAX_INPUT_LENGTH = 255; -const getData = (numberOfWikimediaItems) => { +const getData = (numberOfWikimediaItems: number) => { const wikimediaCommonTags = Array(numberOfWikimediaItems) .fill('') .reduce((acc, _, index) => { @@ -47,19 +47,30 @@ const InputContainer = styled.div` position: relative; `; +type TextFieldProps = { + k: string; + label: string; + onChange: React.ChangeEventHandler; + value?: string; + autoFocus?: boolean; +}; + const TextFieldWithCharacterCount = ({ k, label, autoFocus, onChange, value, -}) => { +}: TextFieldProps) => { const [isFocused, setIsFocused] = useState(false); + const inputType = getInputTypeForKey(k); + return ( { const buttonRef = useRef(null); @@ -34,7 +35,10 @@ const DeleteButton = ({ deleteButton, index }: DeleteButtonProps) => { setTagsEntries((state) => state.toSpliced(index, 1)); }; - return deleteButton.shown ? ( + if (!deleteButton.shown) { + return null; + } + return ( { > - ) : null; + ); }; type Props = { index: number }; @@ -65,6 +69,7 @@ export const ValueInput = ({ index }: Props) => { return ( ) : null; + +export const getInputTypeForKey = (key: string) => { + switch (key) { + case 'fax': + case 'phone': + case 'mobile': + case 'contact:phone': + case 'contact:whatsapp': + case 'contact:mobile': + case 'contact:tty': + case 'contact:sms': + case 'contact:fax': + return 'tel'; + case 'contact:website': + case 'website': + return 'url'; + case 'contact:email': + case 'email': + return 'email'; + } + return 'text'; +}; From ae013fc17cec529160e39159f225156898a6e26a Mon Sep 17 00:00:00 2001 From: Dlurak <84224239+Dlurak@users.noreply.github.com> Date: Wed, 16 Oct 2024 19:47:43 +0200 Subject: [PATCH 2/3] Make the group toggle button statically positioned --- src/components/FeaturePanel/Properties/TagsTableInner.tsx | 2 +- src/components/FeaturePanel/helpers/ToggleButton.tsx | 3 +-- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/src/components/FeaturePanel/Properties/TagsTableInner.tsx b/src/components/FeaturePanel/Properties/TagsTableInner.tsx index 5d596419..321aa71d 100644 --- a/src/components/FeaturePanel/Properties/TagsTableInner.tsx +++ b/src/components/FeaturePanel/Properties/TagsTableInner.tsx @@ -46,7 +46,7 @@ const TagsGroup = ({ <> {label} - + {value || tags[0]?.[1]} {!hideArrow && } diff --git a/src/components/FeaturePanel/helpers/ToggleButton.tsx b/src/components/FeaturePanel/helpers/ToggleButton.tsx index ed920f87..83d81c48 100644 --- a/src/components/FeaturePanel/helpers/ToggleButton.tsx +++ b/src/components/FeaturePanel/helpers/ToggleButton.tsx @@ -5,8 +5,7 @@ import React from 'react'; import styled from '@emotion/styled'; const StyledToggleButton = styled(IconButton)` - position: absolute !important; - margin: -5px 0 0 0 !important; + margin: -7px 0 -7px 10px; `; export const ToggleButton = ({ onClick, isShown }) => ( From 571451277e652b42ee8738ecd6ec2346baa36c12 Mon Sep 17 00:00:00 2001 From: Dlurak <84224239+Dlurak@users.noreply.github.com> Date: Wed, 16 Oct 2024 19:54:59 +0200 Subject: [PATCH 3/3] Revert "Add the correct input type attribute to edit inputs" This reverts commit 6fdda51f0dfb3fd6bd1b340f3ae64c5969a30ff8. --- .../EditContent/MajorKeysEditor.tsx | 19 ++++------------ .../EditContent/TagsEditor/ValueInput.tsx | 9 ++------ .../EditDialog/EditContent/helpers.tsx | 22 ------------------- 3 files changed, 6 insertions(+), 44 deletions(-) diff --git a/src/components/FeaturePanel/EditDialog/EditContent/MajorKeysEditor.tsx b/src/components/FeaturePanel/EditDialog/EditContent/MajorKeysEditor.tsx index 477031e2..5a57455d 100644 --- a/src/components/FeaturePanel/EditDialog/EditContent/MajorKeysEditor.tsx +++ b/src/components/FeaturePanel/EditDialog/EditContent/MajorKeysEditor.tsx @@ -9,7 +9,7 @@ import { useEditDialogContext } from '../../helpers/EditDialogContext'; import { useEditContext } from '../EditContext'; import { OpeningHoursEditor } from './OpeningHoursEditor/OpeningHoursEditor'; import styled from '@emotion/styled'; -import { CharacterCount, getInputTypeForKey } from './helpers'; +import { CharacterCount } from './helpers'; export const majorKeys = [ 'name', @@ -21,7 +21,7 @@ export const majorKeys = [ const MAX_INPUT_LENGTH = 255; -const getData = (numberOfWikimediaItems: number) => { +const getData = (numberOfWikimediaItems) => { const wikimediaCommonTags = Array(numberOfWikimediaItems) .fill('') .reduce((acc, _, index) => { @@ -47,30 +47,19 @@ const InputContainer = styled.div` position: relative; `; -type TextFieldProps = { - k: string; - label: string; - onChange: React.ChangeEventHandler; - value?: string; - autoFocus?: boolean; -}; - const TextFieldWithCharacterCount = ({ k, label, autoFocus, onChange, value, -}: TextFieldProps) => { +}) => { const [isFocused, setIsFocused] = useState(false); - const inputType = getInputTypeForKey(k); - return ( { const buttonRef = useRef(null); @@ -35,10 +34,7 @@ const DeleteButton = ({ deleteButton, index }: DeleteButtonProps) => { setTagsEntries((state) => state.toSpliced(index, 1)); }; - if (!deleteButton.shown) { - return null; - } - return ( + return deleteButton.shown ? ( { > - ); + ) : null; }; type Props = { index: number }; @@ -69,7 +65,6 @@ export const ValueInput = ({ index }: Props) => { return ( ) : null; - -export const getInputTypeForKey = (key: string) => { - switch (key) { - case 'fax': - case 'phone': - case 'mobile': - case 'contact:phone': - case 'contact:whatsapp': - case 'contact:mobile': - case 'contact:tty': - case 'contact:sms': - case 'contact:fax': - return 'tel'; - case 'contact:website': - case 'website': - return 'url'; - case 'contact:email': - case 'email': - return 'email'; - } - return 'text'; -};