mirrors/oneuptime
1
0
Fork 0
mirror of https://github.com/OneUptime/oneuptime synced 2024-11-22 07:10:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add HorizontalRule component and update Category component

Browse Source
This commit is contained in:
Simon Larsen 2023-12-16 19:18:22 +00:00
parent b42a69b154
commit c95f845a5c
No known key found for this signature in database
GPG Key ID: AB45983AA9C81CDE
3 changed files with 20 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
CommonUI/src/Components/CategoryCheckbox/Category.tsx
View File

@ -5,6 +5,7 @@ import {
} from './CategoryCheckboxTypes';
import CheckboxElement from '../Checkbox/Checkbox';
import CheckBoxList from './CheckboxList';
import HorizontalRule from '../HorizontalRule/HorizontalRule';
export type CategoryCheckboxValue = string | number | boolean;
@ -13,6 +14,7 @@ export interface CategoryProps {
options: Array<CategoryCheckboxOption>;
onChange: (value: Array<CategoryCheckboxValue>) => void;
initialValue?: undefined | Array<CategoryCheckboxValue>;
isLastCategory: boolean;
}
const Category: FunctionComponent<CategoryProps> = (
@ -86,7 +88,7 @@ const Category: FunctionComponent<CategoryProps> = (
/>
</div>
)}
<div className={`${props.category ? 'ml-3' : ''}`}>
<div className={`${props.category ? 'ml-7' : ''}`}>
<CheckBoxList
options={props.options}
onChange={(newValues: Array<CategoryCheckboxValue>) => {
@ -95,6 +97,8 @@ const Category: FunctionComponent<CategoryProps> = (
}}
/>
</div>
{!props.isLastCategory ? <div className="-mb-3 -mt-3"><HorizontalRule /></div> : <></>}
</div>
);
};

9
CommonUI/src/Components/CategoryCheckbox/Index.tsx
View File

@ -35,7 +35,8 @@ const CategoryCheckbox: FunctionComponent<CategoryCheckboxProps> = (
}
const getCategory: Function = (
category?: CheckboxCategory
category?: CheckboxCategory,
isLastCategory: boolean = false
): ReactElement => {
return (
<Category
@ -46,6 +47,7 @@ const CategoryCheckbox: FunctionComponent<CategoryCheckboxProps> = (
return option.categoryId === category?.id;
}
)}
isLastCategory={isLastCategory}
onChange={(value: Array<CategoryCheckboxValue>) => {
// remove any value from currentValue that belongs to this category.
@ -66,6 +68,7 @@ const CategoryCheckbox: FunctionComponent<CategoryCheckboxProps> = (
tempCurrentValues.splice(index, 1);
}
});
// add the new values to currentValue
value.forEach((value: CategoryCheckboxValue) => {
@ -82,9 +85,9 @@ const CategoryCheckbox: FunctionComponent<CategoryCheckboxProps> = (
return (
<div>
{getCategory(undefined)}
{getCategory(undefined, props.categories.length === 0)}
{props.categories.map((category: CheckboxCategory, i: number) => {
return <div key={i}>{getCategory(category)}</div>;
return <div key={i}>{getCategory(category, i === props.categories.length - 1)}</div>;
})}
{props.error && (
<p

12
CommonUI/src/Components/HorizontalRule/HorizontalRule.tsx
View File

@ -1,7 +1,13 @@
import React, { ReactElement } from 'react';
import React, { FunctionComponent, ReactElement } from 'react';
const HorizontalRule: () => JSX.Element = (): ReactElement => {
return <div className="border-b border-gray-900/10 mb-8 mt-8"></div>;
export interface ComponentProps {
className?: string | undefined;
}
const HorizontalRule: FunctionComponent<ComponentProps> = (
props: ComponentProps
): ReactElement => {
return <div className={`border-b border-gray-900/10 mb-8 mt-8 ${props.className}`}></div>;
};
export default HorizontalRule;