Infrastructure/logto
0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2024-12-16 20:26:19 -05:00
Code Issues Activity

fix(console): switch component (#3736)

Browse source
This commit is contained in:
Charles Zhao 2023-04-24 10:18:09 +08:00 committed by GitHub
parent 9f14e065e8
commit dbbd766220
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 8 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
packages/console/src/components/Switch/index.tsx
View file

@ -3,16 +3,16 @@ import { forwardRef } from 'react';
import * as styles from './index.module.scss'; import * as styles from './index.module.scss';
type Props = Omit<HTMLProps<HTMLInputElement>, 'value'> & { type Props = HTMLProps<HTMLInputElement> & {
label?: ReactNode; label?: ReactNode;
}; };
function Switch({ label, checked = false, ...rest }: Props, ref?: Ref<HTMLInputElement>) { function Switch({ label, ...rest }: Props, ref?: Ref<HTMLInputElement>) {
return ( return (
<div className={styles.wrapper}> <div className={styles.wrapper}>
<div className={styles.label}>{label}</div> <div className={styles.label}>{label}</div>
<label className={styles.switch}> <label className={styles.switch}>
<input type="checkbox" checked={checked} {...rest} ref={ref} /> <input type="checkbox" {...rest} ref={ref} />
<span className={styles.slider} /> <span className={styles.slider} />
</label> </label>
</div> </div>

19
packages/console/src/pages/ApplicationDetails/components/AdvancedSettings.tsx
View file

@ -1,6 +1,6 @@
import type { Application, SnakeCaseOidcConfig } from '@logto/schemas'; import type { Application, SnakeCaseOidcConfig } from '@logto/schemas';
import { ApplicationType } from '@logto/schemas'; import { ApplicationType } from '@logto/schemas';
import { Controller, useFormContext } from 'react-hook-form'; import { useFormContext } from 'react-hook-form';
import { Trans, useTranslation } from 'react-i18next'; import { Trans, useTranslation } from 'react-i18next';
import CopyToClipboard from '@/components/CopyToClipboard'; import CopyToClipboard from '@/components/CopyToClipboard';
@ -17,7 +17,7 @@ type Props = {
}; };
function AdvancedSettings({ applicationType, oidcConfig }: Props) { function AdvancedSettings({ applicationType, oidcConfig }: Props) {
const { control } = useFormContext<Application & { isAdmin: boolean }>(); const { register } = useFormContext<Application & { isAdmin?: boolean }>();
const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' }); const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
return ( return (
@ -66,18 +66,9 @@ function AdvancedSettings({ applicationType, oidcConfig }: Props) {
</FormField> </FormField>
{applicationType === ApplicationType.MachineToMachine && ( {applicationType === ApplicationType.MachineToMachine && (
<FormField title="application_details.enable_admin_access"> <FormField title="application_details.enable_admin_access">
<Controller <Switch
name="isAdmin" label={t('application_details.enable_admin_access_label')}
control={control} {...register('isAdmin')}
render={({ field: { onChange, value } }) => (
<Switch
label={t('application_details.enable_admin_access_label')}
checked={value}
onChange={({ currentTarget: { checked } }) => {
onChange(checked);
}}
/>
)}
/> />
</FormField> </FormField>
)} )}