Move components to external library
This commit is contained in:
Sacha Weatherstone
@@ -0,0 +1,89 @@
|
||||
import type React from 'react';
|
||||
|
||||
import type { Noop, RefCallBack } from 'react-hook-form';
|
||||
import type { Theme } from 'react-select';
|
||||
import ReactSelect from 'react-select';
|
||||
|
||||
import { bitwiseDecode, bitwiseEncode } from '@app/core/utils/bitwise';
|
||||
import { useAppSelector } from '@app/hooks/redux.js';
|
||||
|
||||
import { Label } from './Label';
|
||||
|
||||
export interface BiwiseSelectProps {
|
||||
label: string;
|
||||
error?: string;
|
||||
value: number;
|
||||
optionsEnum: { [s: string]: string | number };
|
||||
onChange: (...event: unknown[]) => void;
|
||||
onBlur: Noop;
|
||||
name: string;
|
||||
ref: RefCallBack;
|
||||
}
|
||||
|
||||
export const BitwiseSelect = ({
|
||||
label,
|
||||
error,
|
||||
value,
|
||||
optionsEnum,
|
||||
onChange,
|
||||
ref,
|
||||
}: BiwiseSelectProps): JSX.Element => {
|
||||
const darkMode = useAppSelector((state) => state.app.darkMode);
|
||||
|
||||
return (
|
||||
<div className="w-full">
|
||||
{label && <Label label={label} error={error} />}
|
||||
<ReactSelect
|
||||
ref={ref}
|
||||
isMulti
|
||||
// styles={{
|
||||
// control: (provided, state) => ({
|
||||
// ...provided,
|
||||
// // color: state.isFocused ? 'blue' : 'red',
|
||||
// // borderColor: state.isFocused ? 'blue' : 'red',
|
||||
// }),
|
||||
// }}
|
||||
theme={(theme): Theme => ({
|
||||
...theme,
|
||||
borderRadius: 7,
|
||||
colors: {
|
||||
...theme.colors,
|
||||
primary: '#67ea94', //focus border color
|
||||
// primary75: 'red',
|
||||
// primary50: 'red',
|
||||
// primary25: 'red',
|
||||
// danger: 'red',
|
||||
// dangerLight: 'red',
|
||||
neutral0: darkMode ? 'rgb(30 41 59)' : 'white', //bg color
|
||||
// neutral5: 'red',
|
||||
neutral10: darkMode ? 'rgb(75 85 99)' : 'rgb(229 231 235)', //tag bg color
|
||||
neutral20: darkMode ? 'rgb(229 231 235)' : 'rgb(156 163 175)', //border color
|
||||
neutral30: '#67ea94', //border hover
|
||||
// neutral40: 'red',
|
||||
// neutral50: 'red',
|
||||
// neutral60: 'red',
|
||||
// neutral70: 'red',
|
||||
neutral80: darkMode ? 'white' : 'black', //tag text color
|
||||
// neutral90: 'red',
|
||||
},
|
||||
})}
|
||||
value={bitwiseDecode(value, optionsEnum).map((flag) => {
|
||||
return {
|
||||
value: flag,
|
||||
label: (optionsEnum[flag] as string).replace('POS_', ''),
|
||||
};
|
||||
})}
|
||||
options={Object.entries(optionsEnum)
|
||||
.filter((value) => typeof value[1] !== 'number')
|
||||
.filter((value) => parseInt(value[0]) !== optionsEnum.POS_UNDEFINED)
|
||||
.map((value) => {
|
||||
return {
|
||||
value: parseInt(value[0]),
|
||||
label: value[1].toString().replace('POS_', ''),
|
||||
};
|
||||
})}
|
||||
onChange={(e): void => onChange(bitwiseEncode(e.map((v) => v.value)))}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -1,48 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
import { Label } from './Label';
|
||||
|
||||
type DefaultInputProps = JSX.IntrinsicElements['input'];
|
||||
|
||||
interface CheckboxProps extends DefaultInputProps {
|
||||
action?: (enabled: boolean) => void;
|
||||
label: string;
|
||||
valid?: boolean;
|
||||
validationMessage?: string;
|
||||
error?: boolean;
|
||||
}
|
||||
|
||||
export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
|
||||
function Input(
|
||||
{ label, valid, validationMessage, id, error, ...props }: CheckboxProps,
|
||||
ref,
|
||||
) {
|
||||
return (
|
||||
<div className="flex flex-col w-full">
|
||||
<Label label={label} />
|
||||
<div className="ml-auto">
|
||||
<input
|
||||
ref={ref}
|
||||
type="checkbox"
|
||||
id={id}
|
||||
className={`appearance-none w-8 h-8 border rounded-md focus:outline-none focus-within:shadow-border checked:bg-primary checked:border-transparent transition duration-200 ease-in-out border-gray-400 dark:border-gray-200 ${
|
||||
props.disabled
|
||||
? 'bg-gray-200 text-gray-500 dark:bg-gray-800 dark:text-gray-400 border-gray-400 dark:border-gray-700'
|
||||
: ''
|
||||
} ${
|
||||
error
|
||||
? 'border-red-500'
|
||||
: props.disabled
|
||||
? 'border-gray-200'
|
||||
: 'focus-within:border-primary dark:focus-within:border-primary hover:border-primary dark:hover:border-primary'
|
||||
}`}
|
||||
{...props}
|
||||
/>
|
||||
</div>
|
||||
{!valid && (
|
||||
<div className="text-sm text-gray-600">{validationMessage}</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
);
|
||||
@@ -1,37 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
import { InputWrapper } from './InputWrapper';
|
||||
import { Label } from './Label';
|
||||
|
||||
type DefaultInputProps = JSX.IntrinsicElements['input'];
|
||||
|
||||
interface InputProps extends DefaultInputProps {
|
||||
label?: string;
|
||||
error?: string;
|
||||
action?: JSX.Element;
|
||||
prefix?: string;
|
||||
suffix?: string;
|
||||
}
|
||||
|
||||
export const Input = React.forwardRef<HTMLInputElement, InputProps>(
|
||||
function Input({ label, error, action, suffix, ...props }: InputProps, ref) {
|
||||
return (
|
||||
<div className="w-full">
|
||||
{label && <Label label={label} error={error} />}
|
||||
<InputWrapper error={error} disabled={props.disabled}>
|
||||
<input
|
||||
ref={ref}
|
||||
className="w-full h-10 px-3 py-2 bg-transparent focus:outline-none"
|
||||
{...props}
|
||||
/>
|
||||
{suffix && (
|
||||
<span className="my-auto mr-3 text-sm font-medium text-gray-500 dark:text-gray-400">
|
||||
{suffix}
|
||||
</span>
|
||||
)}
|
||||
{action && <div className="flex mr-1">{action}</div>}
|
||||
</InputWrapper>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
);
|
||||
@@ -1,29 +0,0 @@
|
||||
import type React from 'react';
|
||||
|
||||
export interface LabelProps {
|
||||
error?: string;
|
||||
disabled?: boolean;
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
export const InputWrapper = ({
|
||||
error,
|
||||
disabled,
|
||||
children,
|
||||
}: LabelProps): JSX.Element => (
|
||||
<div
|
||||
className={`flex w-full border-gray-400 dark:border-gray-200 border-y border rounded-md transition duration-200 ease-in-out ${
|
||||
disabled
|
||||
? 'bg-gray-200 text-gray-500 dark:bg-gray-800 dark:text-gray-400 border-gray-400 dark:border-gray-700'
|
||||
: ''
|
||||
} ${
|
||||
error
|
||||
? 'border-red-500'
|
||||
: disabled
|
||||
? 'border-gray-200'
|
||||
: ' focus-within:border-primary dark:focus-within:border-primary hover:border-primary dark:hover:border-primary focus-within:shadow-border'
|
||||
}`}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
@@ -1,66 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
import { InputWrapper } from './InputWrapper';
|
||||
import { Label } from './Label';
|
||||
|
||||
type DefaultSelectProps = JSX.IntrinsicElements['select'];
|
||||
|
||||
interface SelectProps extends DefaultSelectProps {
|
||||
options?: {
|
||||
name: string | number;
|
||||
value: string | number;
|
||||
}[];
|
||||
optionsEnum?: { [s: string]: string | number };
|
||||
label?: string;
|
||||
error?: string;
|
||||
small?: boolean;
|
||||
}
|
||||
|
||||
export const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
|
||||
({ options, optionsEnum, label, error, small, ...props }, ref) => {
|
||||
const optionsEnumValues = optionsEnum
|
||||
? Object.entries(optionsEnum).filter(
|
||||
(value) => typeof value[1] === 'number',
|
||||
)
|
||||
: [];
|
||||
return (
|
||||
<div>
|
||||
{label && <Label label={label} error={error} />}
|
||||
<InputWrapper>
|
||||
<select
|
||||
ref={ref}
|
||||
className={`w-full rounded-md bg-transparent focus:outline-none focus:border-primary ${
|
||||
small ? 'm-1' : 'h-10 mx-2'
|
||||
}`}
|
||||
disabled={
|
||||
props.disabled
|
||||
? true
|
||||
: !(optionsEnumValues.length || options?.length)
|
||||
}
|
||||
{...props}
|
||||
>
|
||||
{!(optionsEnumValues.length || options?.length) && (
|
||||
<option className="dark:bg-gray-700">Loading</option>
|
||||
)}
|
||||
{optionsEnumValues.length &&
|
||||
optionsEnumValues.map(([name, value]) => (
|
||||
<option className="dark:bg-gray-700" key={value} value={value}>
|
||||
{name}
|
||||
</option>
|
||||
))}
|
||||
{options &&
|
||||
options.map((option) => (
|
||||
<option
|
||||
className="dark:bg-gray-700"
|
||||
key={option.value}
|
||||
value={option.value}
|
||||
>
|
||||
{option.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</InputWrapper>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
);
|
||||
Reference in New Issue
Block a user