roleypoly/v3
1
0
Fork 0
mirror of https://github.com/roleypoly/roleypoly.git synced 2025-06-17 09:59:10 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: add server message in editor

Browse source
This commit is contained in:
41666 2021-07-04 13:16:26 -05:00
parent be16da1686
commit 1829035694
4 changed files with 54 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

42
packages/design-system/atoms/text-input/TextInput.tsx
View file

@ -1,8 +1,9 @@
import { palette } from '@roleypoly/design-system/atoms/colors';
import { fontCSS } from '@roleypoly/design-system/atoms/fonts';
import * as React from 'react';
import styled from 'styled-components';
import styled, { css } from 'styled-components';
const StyledTextInput = styled.input`
const common = css`
appearance: none;
border: 1px solid ${palette.taupe200};
border-radius: 3px;
@ -39,11 +40,14 @@ const StyledTextInput = styled.input`
}
`;
type TextInputProps = React.InputHTMLAttributes<HTMLInputElement> & {
_override?: React.Component;
};
const StyledTextInput = styled.input`
${common};
`;
export const TextInput = (props: TextInputProps) => {
type TextInputProps<T extends HTMLInputElement | HTMLTextAreaElement> =
React.InputHTMLAttributes<T>;
export const TextInput = (props: TextInputProps<HTMLInputElement>) => {
const { ...rest } = props;
return <StyledTextInput {...rest} />;
};
@ -68,7 +72,7 @@ const IconInputContainer = styled.div`
width: 100%;
`;
type TextInputWithIconProps = TextInputProps & {
type TextInputWithIconProps = TextInputProps<HTMLInputElement> & {
icon: React.ReactNode;
};
@ -81,3 +85,27 @@ export const TextInputWithIcon = (props: TextInputWithIconProps) => {
</IconInputContainer>
);
};
const StyledTextarea = styled.textarea`
${common};
${fontCSS};
`;
export const MultilineTextInput = (
props: TextInputProps<HTMLTextAreaElement> & { rows?: number }
) => {
const { ...rest } = props;
const [value, setValue] = React.useState(String(props.value));
const rows = Math.min(10, Math.max(props.rows || 2, value.split(/\r?\n/).length));
return (
<StyledTextarea
{...rest}
rows={rows}
value={value}
onChange={(eventData) => {
setValue(eventData.target.value);
props.onChange?.(eventData);
}}
/>
);
};