diff --git a/packages/pl-fe/src/features/forms/index.tsx b/packages/pl-fe/src/features/forms/index.tsx index bda5419f1..0447cc5bd 100644 --- a/packages/pl-fe/src/features/forms/index.tsx +++ b/packages/pl-fe/src/features/forms/index.tsx @@ -1,8 +1,7 @@ -import clsx from 'clsx'; -import React, { useMemo, useState } from 'react'; +import React, { useMemo } from 'react'; import { defineMessages, useIntl } from 'react-intl'; -import { Multiselect } from 'pl-fe/components/ui/multiselect'; +import { Multiselect as Ms } from 'pl-fe/components/ui/multiselect'; import Select from 'pl-fe/components/ui/select'; const messages = defineMessages({ @@ -10,95 +9,6 @@ const messages = defineMessages({ selectNoOptions: { id: 'select.no_options', defaultMessage: 'No options available' }, }); -interface IInputContainer { - label?: React.ReactNode; - hint?: React.ReactNode; - required?: boolean; - type?: string; - extraClass?: string; - error?: boolean; - children: React.ReactNode; -} - -const InputContainer: React.FC = (props) => { - const containerClass = clsx('input', { - 'with_label': props.label, - 'required': props.required, - 'boolean': props.type === 'checkbox', - 'field_with_errors': props.error, - }, props.extraClass); - - return ( -
- {props.children} - {props.hint && {props.hint}} -
- ); -}; - -interface ILabelInputContainer { - label?: React.ReactNode; - hint?: React.ReactNode; - children: React.ReactNode; -} - -const LabelInputContainer: React.FC = ({ label, hint, children }) => { - const [id] = useState(crypto.randomUUID()); - const childrenWithProps = React.Children.map(children, child => ( - // @ts-ignore: not sure how to get the right type here - React.cloneElement(child, { id, key: id }) - )); - - return ( -
- -
- {childrenWithProps} -
- {hint && {hint}} -
- ); -}; - -interface ILabelInput { - label?: React.ReactNode; -} - -const LabelInput: React.FC = ({ label, ...props }) => ( - - - -); - -interface ISimpleInput { - type: string; - label?: React.ReactNode; - hint?: React.ReactNode; - error?: boolean; - onChange?: React.ChangeEventHandler; - min?: number; - max?: number; - pattern?: string; - name?: string; - placeholder?: string; - value?: string | number; - autoComplete?: string; - autoCorrect?: string; - autoCapitalize?: string; - required?: boolean; -} - -const SimpleInput: React.FC = (props) => { - const { hint, error, ...rest } = props; - const Input = props.label ? LabelInput : 'input'; - - return ( - - - - ); -}; - interface ISelectDropdown { className?: string; label?: React.ReactNode; @@ -115,12 +25,7 @@ const SelectDropdown: React.FC = (props) => { )); - // @ts-ignore - const selectElem = ; - - return label ? ( - {selectElem} - ) : selectElem; + return ; }; interface IMultiselect { @@ -133,9 +38,9 @@ interface IMultiselect { disabled?: boolean; } -const Mutliselect: React.FC = (props) => { +const Multiselect: React.FC = (props) => { const intl = useIntl(); - const { label, hint, items, value, onChange, disabled } = props; + const { items, value, onChange, disabled } = props; const options = useMemo(() => Object.entries(items).map(([key, value]) => ({ key, value })), [items]); const selectedValues = value?.map(key => options.find(option => option.key === key)).filter(value => value); @@ -144,8 +49,8 @@ const Mutliselect: React.FC = (props) => { onChange?.(values.map(({ key }) => key)); }; - const selectElem = ( - = (props) => { emptyRecordMsg={intl.formatMessage(messages.selectNoOptions)} /> ); - - return label ? ( - {selectElem} - ) : selectElem; -}; - -const FileChooser : React.FC = (props) => ( - -); - -FileChooser.defaultProps = { - accept: ['image/jpeg', 'image/png', 'image/gif', 'image/webp'], -}; - -interface IFileChooserLogo { - label?: React.ReactNode; - hint?: React.ReactNode; - name?: string; - accept?: string[]; - onChange: React.ChangeEventHandler; -} - -const FileChooserLogo: React.FC = props => ( - -); - -FileChooserLogo.defaultProps = { - accept: ['image/svg', 'image/png'], }; export { + Multiselect, SelectDropdown, - Mutliselect, }; diff --git a/packages/pl-fe/src/features/preferences/index.tsx b/packages/pl-fe/src/features/preferences/index.tsx index d574869b9..44a745f93 100644 --- a/packages/pl-fe/src/features/preferences/index.tsx +++ b/packages/pl-fe/src/features/preferences/index.tsx @@ -8,7 +8,7 @@ import Button from 'pl-fe/components/ui/button'; import Form from 'pl-fe/components/ui/form'; import HStack from 'pl-fe/components/ui/hstack'; import StepSlider from 'pl-fe/components/ui/step-slider'; -import { Mutliselect, SelectDropdown } from 'pl-fe/features/forms'; +import { Multiselect, SelectDropdown } from 'pl-fe/features/forms'; import SettingToggle from 'pl-fe/features/settings/components/setting-toggle'; import { useAppDispatch } from 'pl-fe/hooks/use-app-dispatch'; import { useAppSelector } from 'pl-fe/hooks/use-app-selector'; @@ -420,7 +420,7 @@ const Preferences = () => { }> -