mirror of
https://github.com/portainer/portainer.git
synced 2025-08-02 20:35:25 +02:00
feat(app): introduce component library in react [EE-1816] (#6236)
* refactor(app): replace notification with es6 service (#6015) [EE-1897] chore(app): format * refactor(containers): remove the dependency on angular modal service (#6017) [EE-1898] * refactor(app): remove angular from http-request [EE-1899] (#6016) * feat(app): add axios [EE-2035](#6077) * refactor(feature): remove angular dependency from feature service [EE-2034] (#6078) * refactor(app): replace box-selector with react component (#6046) fix: rename angular2react refactor(app): make box-selector type generic feat(app): add story for box-selector feat(app): test box-selector feat(app): add stories for box selector item fix(app): remove unneccesary element refactor(app): remove assign * feat(feature): add be-indicator in react [EE-2005] (#6106) * refactor(app): add react components for headers [EE-1949] (#6023) * feat(auth): provide user context * feat(app): added base header component [EE-1949] style(app): reformat refactor(app/header): use same api as angular * feat(app): add breadcrumbs component [EE-2024] * feat(app): remove u element from user links * fix(users): handle axios errors Co-authored-by: Chaim Lev-Ari <chiptus@gmail.com> * refactor(app): convert switch component to react [EE-2005] (#6025) Co-authored-by: Marcelo Rydel <marcelorydel26@gmail.com>
This commit is contained in:
parent
eb9f6c77f4
commit
7ae5a3042c
157 changed files with 3204 additions and 1469 deletions
|
@ -0,0 +1,68 @@
|
|||
import clsx from 'clsx';
|
||||
|
||||
import { isLimitedToBE } from '@/portainer/feature-flags/feature-flags.service';
|
||||
import { BEFeatureIndicator } from '@/portainer/components/BEFeatureIndicator';
|
||||
import { FeatureId } from '@/portainer/feature-flags/enums';
|
||||
import { r2a } from '@/react-tools/react2angular';
|
||||
|
||||
import './Switch.css';
|
||||
|
||||
import styles from './Switch.module.css';
|
||||
|
||||
export interface Props {
|
||||
checked: boolean;
|
||||
id: string;
|
||||
name: string;
|
||||
onChange(checked: boolean): void;
|
||||
|
||||
className?: string;
|
||||
dataCy?: string;
|
||||
disabled?: boolean;
|
||||
featureId?: FeatureId;
|
||||
}
|
||||
|
||||
export function Switch({
|
||||
name,
|
||||
checked,
|
||||
id,
|
||||
disabled,
|
||||
dataCy,
|
||||
onChange,
|
||||
featureId,
|
||||
className,
|
||||
}: Props) {
|
||||
const limitedToBE = isLimitedToBE(featureId);
|
||||
|
||||
return (
|
||||
<>
|
||||
<label
|
||||
className={clsx('switch', className, styles.root, {
|
||||
business: limitedToBE,
|
||||
limited: limitedToBE,
|
||||
})}
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
name={name}
|
||||
id={id}
|
||||
checked={checked}
|
||||
disabled={disabled || limitedToBE}
|
||||
onChange={({ target: { checked } }) => onChange(checked)}
|
||||
/>
|
||||
<i data-cy={dataCy} />
|
||||
</label>
|
||||
{limitedToBE && <BEFeatureIndicator featureId={featureId} />}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export const SwitchAngular = r2a(Switch, [
|
||||
'name',
|
||||
'checked',
|
||||
'id',
|
||||
'disabled',
|
||||
'dataCy',
|
||||
'onChange',
|
||||
'feature',
|
||||
'className',
|
||||
]);
|
Loading…
Add table
Add a link
Reference in a new issue