1
0
Fork 0
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:
Chaim Lev-Ari 2021-12-14 21:14:53 +02:00 committed by GitHub
parent eb9f6c77f4
commit 7ae5a3042c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
157 changed files with 3204 additions and 1469 deletions

View file

@ -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',
]);