Skip to content
This repository has been archived by the owner on Aug 29, 2023. It is now read-only.

Commit

Permalink
Merge pull request #264 from smartive-education/feature/reducer
Browse files Browse the repository at this point in the history
feat: add possibility to use a reducer
  • Loading branch information
tomschall authored Apr 18, 2023
2 parents 257ea79 + 474c034 commit bd05f2e
Show file tree
Hide file tree
Showing 4 changed files with 28 additions and 8 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,8 @@ export interface IFormInputProps {
errorMessage: string;
autoComplete: 'off' | 'on';
inputValue: string;
setInputValue: React.Dispatch<React.SetStateAction<string>>;
setInputValue?: React.Dispatch<React.SetStateAction<string>>;
dispatch?: React.Dispatch<any>;
onPressEnter?: () => void;
}

Expand All @@ -29,27 +30,31 @@ export const InputForm: React.FC<IFormInputProps> = ({
autoComplete,
inputValue,
setInputValue,
dispatch,
onPressEnter,
}) => {
const [buttonType, setbuttonType] = useState(type);
const id = useId();

const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
setInputValue && setInputValue(e.target.value);
dispatch && dispatch({ type: 'SET_INPUT_VALUE', payload: e.target.value });
};

const showPassword = () => {
buttonType === 'password' ? setbuttonType('text') : setbuttonType('password');
};

const clearForm = () => {
setInputValue('');
setInputValue && setInputValue('');
dispatch && dispatch({ type: 'CLEAR_INPUT_VALUE' });
};

const handleKeyDown = (e: React.KeyboardEvent) => {
if (e.code === 'Enter' && e.shiftKey == false) {
e.preventDefault();
setInputValue('');
setInputValue && setInputValue('');
dispatch && dispatch({ type: 'CLEAR_INPUT_VALUE' });
onPressEnter && onPressEnter();
}
};
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ export interface ITextBoxProps {
form: Pick<IFormInputProps, 'name' | 'placeholder' | 'errorMessage'>;
inputValue: string;
setInputValue: React.Dispatch<React.SetStateAction<string>>;
dispatch?: React.Dispatch<any>;
variant: 'write' | 'inline' | 'start';
uploadCallback: () => void;
sendCallback: () => void;
Expand Down Expand Up @@ -41,6 +42,7 @@ export const TextBox: React.FC<ITextBoxProps> = ({
},
inputValue,
setInputValue,
dispatch,
uploadCallback = () => {
return null;
},
Expand Down Expand Up @@ -112,6 +114,7 @@ export const TextBox: React.FC<ITextBoxProps> = ({
autoComplete="off"
inputValue={inputValue}
setInputValue={setInputValue}
dispatch={dispatch}
onPressEnter={onPressEnter}
data-testid="testTextarea"
/>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,25 @@ import { Modal } from '../modal';
export interface IUploadFormProps {
onDropCallBack: (acceptedFiles: File[], fileRejections: FileRejection[]) => void;
showModal: boolean;
setShowModal: React.Dispatch<React.SetStateAction<boolean>>;
setShowModal?: React.Dispatch<React.SetStateAction<boolean>>;
dispatch?: React.Dispatch<any>;
fileUploadError: string;
}

export default function UploadForm({ onDropCallBack, showModal, setShowModal, fileUploadError }: IUploadFormProps) {
export default function UploadForm({
onDropCallBack,
showModal,
setShowModal,
dispatch,
fileUploadError,
}: IUploadFormProps) {
const handleCloseModal = () => {
setShowModal && setShowModal(false);
dispatch && dispatch({ type: 'CLOSE_MODAL' });
};

return (
<Modal label="Modal" isOpen={showModal} wide="large" onClose={() => setShowModal(false)}>
<Modal label="Modal" isOpen={showModal} wide="large" onClose={handleCloseModal}>
<form onSubmit={() => console.log('Submit')} tw="container">
<FileUpload
label="Datei hierhin ziehen ..."
Expand All @@ -26,7 +38,7 @@ export default function UploadForm({ onDropCallBack, showModal, setShowModal, fi
/>
<Row>
<Button
onClick={() => setShowModal(false)}
onClick={handleCloseModal}
icon="cancel"
label="Abbrechen"
size="large"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ interface IHashtagStyleProps {
}

const StyledHashtag = styled.a(({ size, color }: IHashtagStyleProps) => [
tw`transition cursor-pointer hover:underline break-words`,
tw`transition cursor-pointer hover:underline break-all`,
size === 'small' && tw`text-violet-600 hover:text-violet-500 text-base [font-weight:500]`,
size === 'medium' && tw`text-violet-600 hover:text-violet-500 text-md [font-weight:500]`,
size === 'large' && tw`text-violet-600 hover:text-violet-500 text-lg [font-weight:500]`,
Expand Down

0 comments on commit bd05f2e

Please sign in to comment.