50 lines
1015 B
TypeScript
50 lines
1015 B
TypeScript
|
import { TextInput } from "design-system";
|
||
|
|
import React from "react";
|
||
|
|
import styled from "styled-components";
|
||
|
|
|
||
|
|
const Wrapper = styled.div`
|
||
|
|
.prefix {
|
||
|
|
top: 0.4px;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
input {
|
||
|
|
text-align: right;
|
||
|
|
padding-left: 2px;
|
||
|
|
}
|
||
|
|
`;
|
||
|
|
|
||
|
|
type DimensionsInputProp = {
|
||
|
|
onChange?: ((value: string) => void) | undefined;
|
||
|
|
value: string;
|
||
|
|
prefix: string;
|
||
|
|
};
|
||
|
|
|
||
|
|
export function cssDimensionValidator(value: string) {
|
||
|
|
let isValid = false;
|
||
|
|
const regex = /^[1-9][0-9]{0,3}((px)|(em)|(%)|(vw)|(vh))?$/;
|
||
|
|
if (value) {
|
||
|
|
isValid = regex.test(value);
|
||
|
|
}
|
||
|
|
return {
|
||
|
|
isValid: isValid,
|
||
|
|
message: "",
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
function DimensionsInput(props: DimensionsInputProp) {
|
||
|
|
return (
|
||
|
|
<Wrapper className={`t--${props.prefix}-dimension`}>
|
||
|
|
<TextInput
|
||
|
|
height={"28px"}
|
||
|
|
onChange={props.onChange}
|
||
|
|
prefix={props.prefix}
|
||
|
|
validator={cssDimensionValidator}
|
||
|
|
value={props.value}
|
||
|
|
width={"90px"}
|
||
|
|
/>
|
||
|
|
</Wrapper>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
export default DimensionsInput;
|