141 lines
3.6 KiB
TypeScript
141 lines
3.6 KiB
TypeScript
import * as React from "react";
|
|
import styled from "styled-components";
|
|
import type { TextInputProps } from "design-system-old";
|
|
import type { ContainerOrientation } from "constants/WidgetConstants";
|
|
import { Input, Icon } from "design-system";
|
|
import useInteractionAnalyticsEvent from "utils/hooks/useInteractionAnalyticsEvent";
|
|
|
|
interface ControlWrapperProps {
|
|
orientation?: ContainerOrientation;
|
|
isAction?: boolean;
|
|
}
|
|
|
|
export const ControlWrapper = styled.div<ControlWrapperProps>`
|
|
display: ${(props) =>
|
|
props.orientation === "HORIZONTAL" ? "flex" : "block"};
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
flex-direction: ${(props) =>
|
|
props.orientation === "VERTICAL" ? "column" : "row"};
|
|
padding-top: 4px;
|
|
&:not(:last-of-type) {
|
|
padding-bottom: 4px;
|
|
}
|
|
& > label {
|
|
margin-bottom: ${(props) => props.theme.spaces[1]}px;
|
|
}
|
|
&&& > label:first-of-type {
|
|
display: block;
|
|
}
|
|
&&& > label {
|
|
display: inline-block;
|
|
}
|
|
&:focus-within .reset-button {
|
|
display: block;
|
|
}
|
|
`;
|
|
|
|
export const StyledDynamicInput = styled.div`
|
|
width: 100%;
|
|
&&& {
|
|
input {
|
|
border: none;
|
|
color: ${(props) => props.theme.colors.textOnDarkBG};
|
|
background: ${(props) => props.theme.colors.paneInputBG};
|
|
&:focus {
|
|
border: none;
|
|
color: ${(props) => props.theme.colors.textOnDarkBG};
|
|
background: ${(props) => props.theme.colors.paneInputBG};
|
|
}
|
|
}
|
|
}
|
|
`;
|
|
|
|
export const FieldWrapper = styled.div`
|
|
position: relative;
|
|
width: 100%;
|
|
`;
|
|
|
|
export const StyledIcon = styled(Icon)`
|
|
padding: 0;
|
|
position: absolute;
|
|
margin-right: 15px;
|
|
cursor: move;
|
|
z-index: 1;
|
|
left: 4px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
`;
|
|
|
|
/* Used in Draggable List Card component in Property pane */
|
|
export const StyledActionContainer = styled.div`
|
|
position: absolute;
|
|
right: 0px;
|
|
margin-right: 10px;
|
|
display: flex;
|
|
`;
|
|
|
|
export const StyledNavigateToFieldWrapper = styled.div`
|
|
display: flex;
|
|
justify-content: space-between;
|
|
height: auto;
|
|
`;
|
|
|
|
export const StyledDividerContainer = styled.div`
|
|
width: 1%;
|
|
margin-top: 9px;
|
|
`;
|
|
|
|
export const StyledNavigateToFieldsContainer = styled.div`
|
|
width: 95%;
|
|
`;
|
|
|
|
export const InputGroup = React.forwardRef((props: TextInputProps, ref) => {
|
|
let inputRef = React.useRef<HTMLInputElement>(null);
|
|
const wrapperRef = React.useRef<HTMLInputElement>(null);
|
|
const { dispatchInteractionAnalyticsEvent } =
|
|
useInteractionAnalyticsEvent<HTMLInputElement>(false, wrapperRef);
|
|
|
|
if (ref) inputRef = ref as React.RefObject<HTMLInputElement>;
|
|
|
|
React.useEffect(() => {
|
|
window.addEventListener("keydown", handleKeydown);
|
|
return () => {
|
|
window.removeEventListener("keydown", handleKeydown);
|
|
};
|
|
}, []);
|
|
|
|
const handleKeydown = (e: KeyboardEvent) => {
|
|
switch (e.key) {
|
|
case "Enter":
|
|
case " ":
|
|
if (document.activeElement === wrapperRef?.current) {
|
|
dispatchInteractionAnalyticsEvent({ key: e.key });
|
|
inputRef?.current?.focus();
|
|
e.preventDefault();
|
|
}
|
|
break;
|
|
case "Escape":
|
|
if (document.activeElement === inputRef?.current) {
|
|
dispatchInteractionAnalyticsEvent({ key: e.key });
|
|
wrapperRef?.current?.focus();
|
|
e.preventDefault();
|
|
}
|
|
break;
|
|
case "Tab":
|
|
if (document.activeElement === wrapperRef?.current) {
|
|
dispatchInteractionAnalyticsEvent({
|
|
key: `${e.shiftKey ? "Shift+" : ""}${e.key}`,
|
|
});
|
|
}
|
|
break;
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="w-full" ref={wrapperRef} tabIndex={0}>
|
|
<Input ref={inputRef} {...props} size="md" tabIndex={-1} />
|
|
</div>
|
|
);
|
|
});
|