-
Notifications
You must be signed in to change notification settings - Fork 8.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[ILM] Reposition form toggles (#85143)
* merged toggleable field and described form component and moved toggle to left * moved all toggles to left, renamed DescribedFormField -> DescribedFormRow and added new ToggleFieldWithDescribedFormRow component * added new prop fieldNotices to render callouts in correct position on the left
- Loading branch information
1 parent
7367b17
commit 63d1e57
Showing
11 changed files
with
179 additions
and
128 deletions.
There are no files selected for viewing
33 changes: 0 additions & 33 deletions
33
...le_management/public/application/sections/edit_policy/components/described_form_field.tsx
This file was deleted.
Oops, something went wrong.
95 changes: 95 additions & 0 deletions
95
...lic/application/sections/edit_policy/components/described_form_row/described_form_row.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,95 @@ | ||
| /* | ||
| * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one | ||
| * or more contributor license agreements. Licensed under the Elastic License; | ||
| * you may not use this file except in compliance with the Elastic License. | ||
| */ | ||
|
|
||
| import React, { FunctionComponent, useState } from 'react'; | ||
| import { | ||
| EuiDescribedFormGroup, | ||
| EuiDescribedFormGroupProps, | ||
| EuiSwitchProps, | ||
| EuiSwitch, | ||
| EuiSpacer, | ||
| } from '@elastic/eui'; | ||
|
|
||
| export interface SwitchProps | ||
| extends Omit<EuiSwitchProps, 'children' | 'checked' | 'value' | 'onChange'> { | ||
| /** | ||
| * use initialValue to specify an uncontrolled component | ||
| */ | ||
| initialValue?: boolean; | ||
|
|
||
| /** | ||
| * checked and onChange together specify a controlled component | ||
| */ | ||
| checked?: boolean; | ||
| onChange?: (nextValue: boolean) => void; | ||
| } | ||
|
|
||
| export type Props = EuiDescribedFormGroupProps & { | ||
| children: (() => JSX.Element) | JSX.Element | JSX.Element[] | undefined; | ||
|
|
||
| switchProps?: SwitchProps; | ||
|
|
||
| /** | ||
| * Use this prop to pass down components that should be rendered below the toggle like | ||
| * warnings or notices. | ||
| */ | ||
| fieldNotices?: React.ReactNode; | ||
| }; | ||
|
|
||
| export const DescribedFormRow: FunctionComponent<Props> = ({ | ||
| children, | ||
| switchProps, | ||
| description, | ||
| fieldNotices, | ||
| ...restDescribedFormProps | ||
| }) => { | ||
| if ( | ||
| switchProps && | ||
| !(typeof switchProps.checked === 'boolean' || typeof switchProps.initialValue === 'boolean') | ||
| ) { | ||
| throw new Error('Must specify controlled, uncontrolled component. See SwitchProps interface!'); | ||
| } | ||
| const [uncontrolledIsContentVisible, setUncontrolledIsContentVisible] = useState<boolean>( | ||
| () => switchProps?.initialValue ?? false | ||
| ); | ||
| const isContentVisible = Boolean(switchProps?.checked ?? uncontrolledIsContentVisible); | ||
|
|
||
| const renderToggle = () => { | ||
| if (!switchProps) { | ||
| return null; | ||
| } | ||
| const { onChange, checked, initialValue, ...restSwitchProps } = switchProps; | ||
|
|
||
| return ( | ||
| <EuiSwitch | ||
| {...restSwitchProps} | ||
| checked={isContentVisible} | ||
| onChange={(e) => { | ||
| const nextValue = e.target.checked; | ||
| setUncontrolledIsContentVisible(nextValue); | ||
| if (onChange) { | ||
| onChange(nextValue); | ||
| } | ||
| }} | ||
| /> | ||
| ); | ||
| }; | ||
| return ( | ||
| <EuiDescribedFormGroup | ||
| {...restDescribedFormProps} | ||
| description={ | ||
| <> | ||
| {description} | ||
| <EuiSpacer size="m" /> | ||
| {renderToggle()} | ||
| {fieldNotices} | ||
| </> | ||
| } | ||
| > | ||
| {isContentVisible ? (typeof children === 'function' ? children() : children) : null} | ||
| </EuiDescribedFormGroup> | ||
| ); | ||
| }; |
9 changes: 9 additions & 0 deletions
9
...management/public/application/sections/edit_policy/components/described_form_row/index.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| /* | ||
| * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one | ||
| * or more contributor license agreements. Licensed under the Elastic License; | ||
| * you may not use this file except in compliance with the Elastic License. | ||
| */ | ||
|
|
||
| export { DescribedFormRow } from './described_form_row'; | ||
|
|
||
| export { ToggleFieldWithDescribedFormRow } from './toggle_field_with_described_form_row'; |
39 changes: 39 additions & 0 deletions
39
...ctions/edit_policy/components/described_form_row/toggle_field_with_described_form_row.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,39 @@ | ||
| /* | ||
| * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one | ||
| * or more contributor license agreements. Licensed under the Elastic License; | ||
| * you may not use this file except in compliance with the Elastic License. | ||
| */ | ||
| import React, { FunctionComponent } from 'react'; | ||
|
|
||
| import { UseField } from '../../../../../shared_imports'; | ||
|
|
||
| import { | ||
| DescribedFormRow, | ||
| Props as DescribedFormRowProps, | ||
| SwitchProps, | ||
| } from './described_form_row'; | ||
|
|
||
| type Props = Omit<DescribedFormRowProps, 'switchProps'> & { | ||
| switchProps: Omit<SwitchProps, 'label'> & { path: string }; | ||
| }; | ||
|
|
||
| export const ToggleFieldWithDescribedFormRow: FunctionComponent<Props> = ({ | ||
| switchProps, | ||
| ...passThroughProps | ||
| }) => ( | ||
| <UseField<boolean> path={switchProps.path}> | ||
| {(field) => { | ||
| return ( | ||
| <DescribedFormRow | ||
| {...passThroughProps} | ||
| switchProps={{ | ||
| ...switchProps, | ||
| label: field.label, | ||
| checked: field.value, | ||
| onChange: field.setValue, | ||
| }} | ||
| /> | ||
| ); | ||
| }} | ||
| </UseField> | ||
| ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.