From 7597159da259cbf7458cb98217f8110eead75cac Mon Sep 17 00:00:00 2001 From: Naumov Alexey Date: Fri, 16 Apr 2021 16:05:10 +0300 Subject: [PATCH 1/5] feat(core-blocks): CB-872 metadata editor properies groups --- .../src/Containers/ILayoutSizeProps.ts | 5 + .../src/FormControls/Checkboxes/Checkbox.tsx | 9 +- .../Checkboxes/FieldCheckboxNew.tsx | 19 +++- .../src/FormControls/Checkboxes/Switch.tsx | 9 +- .../src/FormControls/Checkboxes/SwitchNew.tsx | 9 +- .../Checkboxes/useCheckboxState.ts | 7 +- .../src/FormControls/InputField.tsx | 10 +- .../src/FormControls/InputFieldNew.tsx | 10 +- .../ObjectPropertyInfoForm.tsx | 14 +-- .../ObjectPropertyInfoFormNew.tsx | 86 +++++++++++++++ .../ObjectPropertyInfoForm/RenderField.tsx} | 103 ++++++------------ .../ObjectPropertyInfoForm/formStyles.ts | 0 .../useObjectPropertyCategories.tsx | 46 ++++++++ webapp/packages/core-blocks/src/index.ts | 5 +- .../ObjectInfoTab/ObjectProperties.tsx | 37 +++++-- 15 files changed, 273 insertions(+), 96 deletions(-) rename webapp/packages/core-blocks/src/{ => ObjectPropertyInfo}/ObjectPropertyInfoForm/ObjectPropertyInfoForm.tsx (91%) create mode 100644 webapp/packages/core-blocks/src/ObjectPropertyInfo/ObjectPropertyInfoForm/ObjectPropertyInfoFormNew.tsx rename webapp/packages/core-blocks/src/{ObjectPropertyInfoForm/ObjectPropertyInfoFormNew.tsx => ObjectPropertyInfo/ObjectPropertyInfoForm/RenderField.tsx} (59%) rename webapp/packages/core-blocks/src/{ => ObjectPropertyInfo}/ObjectPropertyInfoForm/formStyles.ts (100%) create mode 100644 webapp/packages/core-blocks/src/ObjectPropertyInfo/useObjectPropertyCategories.tsx diff --git a/webapp/packages/core-blocks/src/Containers/ILayoutSizeProps.ts b/webapp/packages/core-blocks/src/Containers/ILayoutSizeProps.ts index f81363ab72..4e1f97023e 100644 --- a/webapp/packages/core-blocks/src/Containers/ILayoutSizeProps.ts +++ b/webapp/packages/core-blocks/src/Containers/ILayoutSizeProps.ts @@ -6,11 +6,16 @@ * you may not use this file except in compliance with the License. */ +export type Layout = 'mixedControls'; export interface ILayoutSizeProps { keepSize?: boolean; tiny?: boolean; small?: boolean; medium?: boolean; large?: boolean; + /** + * Used by components that want to change their size or other styles due to diffrent layout + */ + layout?: Layout; fill?: boolean; } diff --git a/webapp/packages/core-blocks/src/FormControls/Checkboxes/Checkbox.tsx b/webapp/packages/core-blocks/src/FormControls/Checkboxes/Checkbox.tsx index f7b575057a..239d12db35 100644 --- a/webapp/packages/core-blocks/src/FormControls/Checkboxes/Checkbox.tsx +++ b/webapp/packages/core-blocks/src/FormControls/Checkboxes/Checkbox.tsx @@ -61,7 +61,14 @@ export const Checkbox: CheckboxType = observer(function Checkbox({ onChange, ...rest }: CheckboxBaseProps & (ICheckboxControlledProps | ICheckboxObjectProps)) { - const checkboxState = useCheckboxState({ value, checked, state, name, onChange }); + const checkboxState = useCheckboxState({ + value, + checked, + defaultChecked: rest.defaultChecked, + state, + name, + onChange, + }); if (autoHide && !isControlPresented(name, state)) { return null; diff --git a/webapp/packages/core-blocks/src/FormControls/Checkboxes/FieldCheckboxNew.tsx b/webapp/packages/core-blocks/src/FormControls/Checkboxes/FieldCheckboxNew.tsx index 82c135094e..40d3a815bb 100644 --- a/webapp/packages/core-blocks/src/FormControls/Checkboxes/FieldCheckboxNew.tsx +++ b/webapp/packages/core-blocks/src/FormControls/Checkboxes/FieldCheckboxNew.tsx @@ -6,7 +6,7 @@ * you may not use this file except in compliance with the License. */ -import styled, { css } from 'reshadow'; +import styled, { css, use } from 'reshadow'; import { useStyles } from '@cloudbeaver/core-theming'; @@ -22,6 +22,14 @@ const fieldCheckboxStyles = css` display: flex; align-items: flex-end; white-space: pre-wrap; + &[|layout='mixedControls'] layout { + /* same as input height */ + height: 32px; + } + } + layout { + display: flex; + align-items: center; } field-label { composes: theme-typography--body2 from global; @@ -35,6 +43,7 @@ const fieldCheckboxStyles = css` export const FieldCheckboxNew: CheckboxType = function FieldCheckboxNew({ children, className, + layout, ...rest }: CheckboxBaseProps & (ICheckboxControlledProps | ICheckboxObjectProps)) { const styles = useStyles(baseFormControlStylesNew, fieldCheckboxStyles); @@ -44,9 +53,11 @@ export const FieldCheckboxNew: CheckboxType = function FieldCheckboxNew({ } return styled(styles)( - - - {children} + + + + {children} + ); }; diff --git a/webapp/packages/core-blocks/src/FormControls/Checkboxes/Switch.tsx b/webapp/packages/core-blocks/src/FormControls/Checkboxes/Switch.tsx index 75e8698515..3ab94b7e6d 100644 --- a/webapp/packages/core-blocks/src/FormControls/Checkboxes/Switch.tsx +++ b/webapp/packages/core-blocks/src/FormControls/Checkboxes/Switch.tsx @@ -103,7 +103,14 @@ export const Switch: SwitchType = observer(function Switch({ disabled, ...rest }: IBaseProps & (ICheckboxControlledProps | ICheckboxObjectProps)) { - const checkboxState = useCheckboxState({ value, checked, state, name, onChange }); + const checkboxState = useCheckboxState({ + value, + checked, + defaultChecked: rest.defaultChecked, + state, + name, + onChange, + }); const styles = useStyles( baseFormControlStyles, switchStyles, diff --git a/webapp/packages/core-blocks/src/FormControls/Checkboxes/SwitchNew.tsx b/webapp/packages/core-blocks/src/FormControls/Checkboxes/SwitchNew.tsx index 02a797cb9e..07b7e68946 100644 --- a/webapp/packages/core-blocks/src/FormControls/Checkboxes/SwitchNew.tsx +++ b/webapp/packages/core-blocks/src/FormControls/Checkboxes/SwitchNew.tsx @@ -106,7 +106,14 @@ export const SwitchNew: SwitchType = observer(function SwitchNew({ disabled, ...rest }: IBaseProps & (ICheckboxControlledProps | ICheckboxObjectProps)) { - const checkboxState = useCheckboxState({ value, checked, state, name, onChange }); + const checkboxState = useCheckboxState({ + value, + checked, + defaultChecked: rest.defaultChecked, + state, + name, + onChange, + }); const styles = useStyles( baseFormControlStylesNew, switchStyles, diff --git a/webapp/packages/core-blocks/src/FormControls/Checkboxes/useCheckboxState.ts b/webapp/packages/core-blocks/src/FormControls/Checkboxes/useCheckboxState.ts index a2b3396b12..9ecf383417 100644 --- a/webapp/packages/core-blocks/src/FormControls/Checkboxes/useCheckboxState.ts +++ b/webapp/packages/core-blocks/src/FormControls/Checkboxes/useCheckboxState.ts @@ -11,11 +11,12 @@ import { useContext, useState } from 'react'; import { useObjectRef } from '../../useObjectRef'; import { FormContext } from '../FormContext'; -export type CheckboxOnChangeEvent =(value: boolean, name: T) => void; +export type CheckboxOnChangeEvent = (value: boolean, name: T) => void; export type CheckboxStateOptions = { value: string | undefined; checked: boolean | undefined; + defaultChecked: boolean | undefined; } & ( { state: undefined; @@ -42,7 +43,7 @@ export function useCheckboxState(options: CheckboxStateOpti let checked = optionsRef.checked ?? false; - if (state !== undefined && name !== undefined) { + if (state !== undefined && name !== undefined && name in state) { const currentState = state[name as TKey]; if (typeof value === 'string' && Array.isArray(currentState)) { @@ -52,6 +53,8 @@ export function useCheckboxState(options: CheckboxStateOpti } else { checked = !!currentState; } + } else if (optionsRef.defaultChecked !== undefined) { + checked = optionsRef.defaultChecked; } return useObjectRef({ diff --git a/webapp/packages/core-blocks/src/FormControls/InputField.tsx b/webapp/packages/core-blocks/src/FormControls/InputField.tsx index 5cda6bd2c6..5b63ae2c49 100644 --- a/webapp/packages/core-blocks/src/FormControls/InputField.tsx +++ b/webapp/packages/core-blocks/src/FormControls/InputField.tsx @@ -76,7 +76,15 @@ export const InputField: InputFieldType = observer(function InputField({ } }, [state, name, context, onChange]); - const value = state ? state[name] : valueControlled; + let value: any = valueControlled; + + if (state) { + if (name in state) { + value = state[name]; + } else if (rest.defaultValue !== undefined) { + value = rest.defaultValue; + } + } if (autoHide && !isControlPresented(name, state)) { return null; diff --git a/webapp/packages/core-blocks/src/FormControls/InputFieldNew.tsx b/webapp/packages/core-blocks/src/FormControls/InputFieldNew.tsx index eab775a1ec..8a587ef907 100644 --- a/webapp/packages/core-blocks/src/FormControls/InputFieldNew.tsx +++ b/webapp/packages/core-blocks/src/FormControls/InputFieldNew.tsx @@ -100,7 +100,15 @@ export const InputFieldNew: InputFieldType = observer(function InputFieldNew({ return null; } - let value = state ? state[name] : valueControlled; + let value: any = valueControlled; + + if (state) { + if (name in state) { + value = state[name]; + } else if (rest.defaultValue !== undefined) { + value = rest.defaultValue; + } + } if (mapState) { value = mapState(value); diff --git a/webapp/packages/core-blocks/src/ObjectPropertyInfoForm/ObjectPropertyInfoForm.tsx b/webapp/packages/core-blocks/src/ObjectPropertyInfo/ObjectPropertyInfoForm/ObjectPropertyInfoForm.tsx similarity index 91% rename from webapp/packages/core-blocks/src/ObjectPropertyInfoForm/ObjectPropertyInfoForm.tsx rename to webapp/packages/core-blocks/src/ObjectPropertyInfo/ObjectPropertyInfoForm/ObjectPropertyInfoForm.tsx index 5d465f85c0..d20b577a99 100644 --- a/webapp/packages/core-blocks/src/ObjectPropertyInfoForm/ObjectPropertyInfoForm.tsx +++ b/webapp/packages/core-blocks/src/ObjectPropertyInfo/ObjectPropertyInfoForm/ObjectPropertyInfoForm.tsx @@ -14,13 +14,13 @@ import { InputField } from '@cloudbeaver/core-blocks'; import type { ObjectPropertyInfo } from '@cloudbeaver/core-sdk'; import { useStyles } from '@cloudbeaver/core-theming'; -import { FieldCheckbox } from '../FormControls/Checkboxes/FieldCheckbox'; -import { Combobox } from '../FormControls/Combobox'; -import { FormFieldDescription } from '../FormControls/FormFieldDescription'; -import { FormGroup } from '../FormControls/FormGroup'; -import { isControlPresented } from '../FormControls/isControlPresented'; -import { Link } from '../Link'; -import { TextPlaceholder } from '../TextPlaceholder'; +import { FieldCheckbox } from '../../FormControls/Checkboxes/FieldCheckbox'; +import { Combobox } from '../../FormControls/Combobox'; +import { FormFieldDescription } from '../../FormControls/FormFieldDescription'; +import { FormGroup } from '../../FormControls/FormGroup'; +import { isControlPresented } from '../../FormControls/isControlPresented'; +import { Link } from '../../Link'; +import { TextPlaceholder } from '../../TextPlaceholder'; import { formStyles } from './formStyles'; const RESERVED_KEYWORDS = ['no', 'off', 'new-password']; diff --git a/webapp/packages/core-blocks/src/ObjectPropertyInfo/ObjectPropertyInfoForm/ObjectPropertyInfoFormNew.tsx b/webapp/packages/core-blocks/src/ObjectPropertyInfo/ObjectPropertyInfoForm/ObjectPropertyInfoFormNew.tsx new file mode 100644 index 0000000000..d6b2b20bc7 --- /dev/null +++ b/webapp/packages/core-blocks/src/ObjectPropertyInfo/ObjectPropertyInfoForm/ObjectPropertyInfoFormNew.tsx @@ -0,0 +1,86 @@ +/* + * CloudBeaver - Cloud Database Manager + * Copyright (C) 2020-2021 DBeaver Corp and others + * + * Licensed under the Apache License, Version 2.0. + * you may not use this file except in compliance with the License. + */ + +import { observer } from 'mobx-react-lite'; +import React, { useCallback } from 'react'; + +import type { ObjectPropertyInfo } from '@cloudbeaver/core-sdk'; + +import type { ILayoutSizeProps } from '../../Containers/ILayoutSizeProps'; +import { TextPlaceholder } from '../../TextPlaceholder'; +import { RenderField } from './RenderField'; + +interface ObjectPropertyFormProps extends ILayoutSizeProps { + properties: ObjectPropertyInfo[] | undefined; + state: Record; + category?: string | null; + editable?: boolean; + autofillToken?: string; + className?: string; + disabled?: boolean; + readOnly?: boolean; + autoHide?: boolean; + showRememberTip?: boolean; + onFocus?: (name: string) => void; +} + +export const ObjectPropertyInfoFormNew: React.FC = observer(function ObjectPropertyInfoFormNew({ + properties, + state, + category, + editable = true, + className, + autofillToken = '', + disabled, + readOnly, + autoHide, + showRememberTip, + layout, + onFocus, +}) { + const handleFocus = useCallback((e: React.FocusEvent) => { + if (onFocus) { + onFocus(e.target.name); + } + }, [onFocus]); + + if (!properties || properties.length === 0) { + return Properties empty; + } + + let filteredProperties: ObjectPropertyInfo[] | null = null; + + if (category !== undefined) { + if (category === null) { + filteredProperties = properties.filter(property => !property.category); + } else { + filteredProperties = properties.filter(property => property.category === category); + } + } + + return ( + <> + {(filteredProperties || properties).map(property => ( + + ))} + + ); +}); diff --git a/webapp/packages/core-blocks/src/ObjectPropertyInfoForm/ObjectPropertyInfoFormNew.tsx b/webapp/packages/core-blocks/src/ObjectPropertyInfo/ObjectPropertyInfoForm/RenderField.tsx similarity index 59% rename from webapp/packages/core-blocks/src/ObjectPropertyInfoForm/ObjectPropertyInfoFormNew.tsx rename to webapp/packages/core-blocks/src/ObjectPropertyInfo/ObjectPropertyInfoForm/RenderField.tsx index 0947969e50..5c7fcf4e59 100644 --- a/webapp/packages/core-blocks/src/ObjectPropertyInfoForm/ObjectPropertyInfoFormNew.tsx +++ b/webapp/packages/core-blocks/src/ObjectPropertyInfo/ObjectPropertyInfoForm/RenderField.tsx @@ -7,18 +7,16 @@ */ import { observer } from 'mobx-react-lite'; -import { useCallback } from 'react'; import type { ObjectPropertyInfo } from '@cloudbeaver/core-sdk'; -import type { ILayoutSizeProps } from '../Containers/ILayoutSizeProps'; -import { FieldCheckboxNew } from '../FormControls/Checkboxes/FieldCheckboxNew'; -import { ComboboxNew } from '../FormControls/ComboboxNew'; -import { FormFieldDescriptionNew } from '../FormControls/FormFieldDescriptionNew'; -import { InputFieldNew } from '../FormControls/InputFieldNew'; -import { isControlPresented } from '../FormControls/isControlPresented'; -import { Link } from '../Link'; -import { TextPlaceholder } from '../TextPlaceholder'; +import type { Layout } from '../../Containers/ILayoutSizeProps'; +import { FieldCheckboxNew } from '../../FormControls/Checkboxes/FieldCheckboxNew'; +import { ComboboxNew } from '../../FormControls/ComboboxNew'; +import { FormFieldDescriptionNew } from '../../FormControls/FormFieldDescriptionNew'; +import { InputFieldNew } from '../../FormControls/InputFieldNew'; +import { isControlPresented } from '../../FormControls/isControlPresented'; +import { Link } from '../../Link'; const RESERVED_KEYWORDS = ['no', 'off', 'new-password']; @@ -32,10 +30,30 @@ interface RenderFieldProps { autoHide?: boolean; showRememberTip?: boolean; onFocus?: (event: React.FocusEvent) => void; + layout?: Layout; className?: string; } -const RenderField: React.FC = observer(function RenderField({ +function isCheckbox(property: ObjectPropertyInfo) { + return property.dataType?.toLowerCase() === 'boolean'; +} + +function getDefaultValueFor(property: ObjectPropertyInfo) { + const checkbox = isCheckbox(property); + const value = property.value; + + if (value === null || value === undefined) { + return checkbox ? false : ''; + } + + if (typeof value === 'string') { + return checkbox ? value === 'true' : value; + } + + return value.displayName || value.value || JSON.stringify(value); +} + +export const RenderField: React.FC = observer(function RenderField({ property, state, editable = true, @@ -45,12 +63,14 @@ const RenderField: React.FC = observer(function RenderField({ autoHide, showRememberTip, onFocus, + layout, className, }) { const href = property.features.includes('href'); const password = property.features.includes('password'); - const checkbox = property.dataType === 'Boolean'; + const checkbox = isCheckbox(property); const combobox = property.validValues && property.validValues.length > 0; + const defaultValue = getDefaultValueFor(property); let description: string | undefined; if (href) { @@ -81,8 +101,10 @@ const RenderField: React.FC = observer(function RenderField({ {property.displayName ?? ''} @@ -101,6 +123,7 @@ const RenderField: React.FC = observer(function RenderField({ defaultValue={property.defaultValue} title={property.description} disabled={disabled} + layout={layout} className={className} > {property.displayName ?? ''} @@ -114,6 +137,7 @@ const RenderField: React.FC = observer(function RenderField({ title={property.description} name={property.id!} state={state} + defaultValue={defaultValue} description={description} disabled={disabled} readOnly={readOnly} @@ -121,65 +145,10 @@ const RenderField: React.FC = observer(function RenderField({ autoComplete={RESERVED_KEYWORDS.includes(autofillToken) ? autofillToken : `${autofillToken} ${property.id}`} mod='surface' className={className} + layout={layout} onFocus={onFocus} > {property.displayName} ); }); - -interface ObjectPropertyFormProps extends ILayoutSizeProps { - properties: ObjectPropertyInfo[] | undefined; - state: Record; - editable?: boolean; - autofillToken?: string; - className?: string; - disabled?: boolean; - readOnly?: boolean; - autoHide?: boolean; - showRememberTip?: boolean; - onFocus?: (name: string) => void; -} - -export const ObjectPropertyInfoFormNew: React.FC = observer(function ObjectPropertyInfoFormNew({ - properties, - state, - editable = true, - className, - autofillToken = '', - disabled, - readOnly, - autoHide, - showRememberTip, - onFocus, -}) { - const handleFocus = useCallback((e: React.FocusEvent) => { - if (onFocus) { - onFocus(e.target.name); - } - }, [onFocus]); - - if (!properties || properties.length === 0) { - return Properties empty; - } - - return ( - <> - {properties.map(property => ( - - ))} - - ); -}); diff --git a/webapp/packages/core-blocks/src/ObjectPropertyInfoForm/formStyles.ts b/webapp/packages/core-blocks/src/ObjectPropertyInfo/ObjectPropertyInfoForm/formStyles.ts similarity index 100% rename from webapp/packages/core-blocks/src/ObjectPropertyInfoForm/formStyles.ts rename to webapp/packages/core-blocks/src/ObjectPropertyInfo/ObjectPropertyInfoForm/formStyles.ts diff --git a/webapp/packages/core-blocks/src/ObjectPropertyInfo/useObjectPropertyCategories.tsx b/webapp/packages/core-blocks/src/ObjectPropertyInfo/useObjectPropertyCategories.tsx new file mode 100644 index 0000000000..92e101e04a --- /dev/null +++ b/webapp/packages/core-blocks/src/ObjectPropertyInfo/useObjectPropertyCategories.tsx @@ -0,0 +1,46 @@ +/* + * CloudBeaver - Cloud Database Manager + * Copyright (C) 2020-2021 DBeaver Corp and others + * + * Licensed under the Apache License, Version 2.0. + * you may not use this file except in compliance with the License. + */ + +import { computed, IComputedValue } from 'mobx'; +import { useMemo } from 'react'; + +import type { ObjectPropertyInfo } from '@cloudbeaver/core-sdk'; + +interface ICategoriesInfo { + categories: string[]; + isUncategorizedExists: boolean; +} + +export function useObjectPropertyCategories(properties: ObjectPropertyInfo[] | undefined) { + const categories: IComputedValue = useMemo(() => computed(() => { + const result: ICategoriesInfo = { + categories: [], + isUncategorizedExists: false, + }; + + if (!properties) { + return result; + } + + for (const property of properties) { + const category = property.category; + if (!category) { + result.isUncategorizedExists = true; + continue; + } + + if (!result.categories.includes(category)) { + result.categories.push(category); + } + } + + return result; + }), [properties]); + + return categories.get(); +} diff --git a/webapp/packages/core-blocks/src/index.ts b/webapp/packages/core-blocks/src/index.ts index 5098008ea8..e2cbae0663 100644 --- a/webapp/packages/core-blocks/src/index.ts +++ b/webapp/packages/core-blocks/src/index.ts @@ -4,8 +4,9 @@ export * from './ItemList'; export * from './layout/AppLogo'; export * from './layout/TopAppBar'; export * from './Loader/Loader'; -export * from './ObjectPropertyInfoForm/ObjectPropertyInfoForm'; -export * from './ObjectPropertyInfoForm/ObjectPropertyInfoFormNew'; +export * from './ObjectPropertyInfo/ObjectPropertyInfoForm/ObjectPropertyInfoForm'; +export * from './ObjectPropertyInfo/ObjectPropertyInfoForm/ObjectPropertyInfoFormNew'; +export * from './ObjectPropertyInfo/useObjectPropertyCategories'; export * from './Placeholder/Placeholder'; export * from './Placeholder/PlaceholderContainer'; diff --git a/webapp/packages/plugin-object-viewer/src/ObjectPropertiesPage/ObjectInfoTab/ObjectProperties.tsx b/webapp/packages/plugin-object-viewer/src/ObjectPropertiesPage/ObjectInfoTab/ObjectProperties.tsx index 7a267970b9..aa95f6e553 100644 --- a/webapp/packages/plugin-object-viewer/src/ObjectPropertiesPage/ObjectInfoTab/ObjectProperties.tsx +++ b/webapp/packages/plugin-object-viewer/src/ObjectPropertiesPage/ObjectInfoTab/ObjectProperties.tsx @@ -11,13 +11,11 @@ import type { PropsWithChildren } from 'react'; import styled from 'reshadow'; import { useDatabaseObjectInfo } from '@cloudbeaver/core-app'; -import { ColoredContainer, Group, Loader, TextPlaceholder } from '@cloudbeaver/core-blocks'; +import { ColoredContainer, Loader, TextPlaceholder, useObjectPropertyCategories, GroupTitle, ObjectPropertyInfoFormNew, Group } from '@cloudbeaver/core-blocks'; import { BASE_CONTAINERS_STYLES } from '@cloudbeaver/core-blocks'; import { useTranslate } from '@cloudbeaver/core-localization'; import { useStyles } from '@cloudbeaver/core-theming'; -import { ObjectProperty } from './ObjectProperty'; - type ObjectPropertiesProps = PropsWithChildren<{ objectId: string; }>; @@ -28,6 +26,7 @@ export const ObjectProperties = observer(function ObjectProperties({ const translate = useTranslate(); const { dbObject, isLoading } = useDatabaseObjectInfo(objectId); const styles = useStyles(BASE_CONTAINERS_STYLES); + const { categories, isUncategorizedExists } = useObjectPropertyCategories(dbObject?.properties); if (!dbObject?.properties && isLoading) { return ; @@ -38,12 +37,32 @@ export const ObjectProperties = observer(function ObjectProperties({ } return styled(styles)( - - - {dbObject.properties.map(v => ( - - ))} - + + {isUncategorizedExists && ( + + + + )} + {categories.map(category => ( + + {category} + + + ))} ); }); From 83e229ea8ee3bcf7b007587a09e00b4a40a57c66 Mon Sep 17 00:00:00 2001 From: Naumov Alexey Date: Mon, 19 Apr 2021 12:20:27 +0300 Subject: [PATCH 2/5] feat(core-blocks): CB-872 moved category filter logic to render block --- .../src/Containers/ILayoutSizeProps.ts | 6 --- .../Checkboxes/FieldCheckboxNew.tsx | 19 ++------ .../ObjectPropertyInfoFormNew.tsx | 47 ++++++++----------- .../ObjectPropertyInfoForm/RenderField.tsx | 6 --- .../useObjectPropertyCategories.tsx | 6 +-- .../ObjectInfoTab/ObjectProperties.tsx | 7 +-- 6 files changed, 29 insertions(+), 62 deletions(-) diff --git a/webapp/packages/core-blocks/src/Containers/ILayoutSizeProps.ts b/webapp/packages/core-blocks/src/Containers/ILayoutSizeProps.ts index 4e1f97023e..166d6c951f 100644 --- a/webapp/packages/core-blocks/src/Containers/ILayoutSizeProps.ts +++ b/webapp/packages/core-blocks/src/Containers/ILayoutSizeProps.ts @@ -5,17 +5,11 @@ * Licensed under the Apache License, Version 2.0. * you may not use this file except in compliance with the License. */ - -export type Layout = 'mixedControls'; export interface ILayoutSizeProps { keepSize?: boolean; tiny?: boolean; small?: boolean; medium?: boolean; large?: boolean; - /** - * Used by components that want to change their size or other styles due to diffrent layout - */ - layout?: Layout; fill?: boolean; } diff --git a/webapp/packages/core-blocks/src/FormControls/Checkboxes/FieldCheckboxNew.tsx b/webapp/packages/core-blocks/src/FormControls/Checkboxes/FieldCheckboxNew.tsx index 40d3a815bb..82c135094e 100644 --- a/webapp/packages/core-blocks/src/FormControls/Checkboxes/FieldCheckboxNew.tsx +++ b/webapp/packages/core-blocks/src/FormControls/Checkboxes/FieldCheckboxNew.tsx @@ -6,7 +6,7 @@ * you may not use this file except in compliance with the License. */ -import styled, { css, use } from 'reshadow'; +import styled, { css } from 'reshadow'; import { useStyles } from '@cloudbeaver/core-theming'; @@ -22,14 +22,6 @@ const fieldCheckboxStyles = css` display: flex; align-items: flex-end; white-space: pre-wrap; - &[|layout='mixedControls'] layout { - /* same as input height */ - height: 32px; - } - } - layout { - display: flex; - align-items: center; } field-label { composes: theme-typography--body2 from global; @@ -43,7 +35,6 @@ const fieldCheckboxStyles = css` export const FieldCheckboxNew: CheckboxType = function FieldCheckboxNew({ children, className, - layout, ...rest }: CheckboxBaseProps & (ICheckboxControlledProps | ICheckboxObjectProps)) { const styles = useStyles(baseFormControlStylesNew, fieldCheckboxStyles); @@ -53,11 +44,9 @@ export const FieldCheckboxNew: CheckboxType = function FieldCheckboxNew({ } return styled(styles)( - - - - {children} - + + + {children} ); }; diff --git a/webapp/packages/core-blocks/src/ObjectPropertyInfo/ObjectPropertyInfoForm/ObjectPropertyInfoFormNew.tsx b/webapp/packages/core-blocks/src/ObjectPropertyInfo/ObjectPropertyInfoForm/ObjectPropertyInfoFormNew.tsx index d6b2b20bc7..f92a2fd2a5 100644 --- a/webapp/packages/core-blocks/src/ObjectPropertyInfo/ObjectPropertyInfoForm/ObjectPropertyInfoFormNew.tsx +++ b/webapp/packages/core-blocks/src/ObjectPropertyInfo/ObjectPropertyInfoForm/ObjectPropertyInfoFormNew.tsx @@ -40,7 +40,6 @@ export const ObjectPropertyInfoFormNew: React.FC = obse readOnly, autoHide, showRememberTip, - layout, onFocus, }) { const handleFocus = useCallback((e: React.FocusEvent) => { @@ -53,34 +52,28 @@ export const ObjectPropertyInfoFormNew: React.FC = obse return Properties empty; } - let filteredProperties: ObjectPropertyInfo[] | null = null; - - if (category !== undefined) { - if (category === null) { - filteredProperties = properties.filter(property => !property.category); - } else { - filteredProperties = properties.filter(property => property.category === category); - } - } - return ( <> - {(filteredProperties || properties).map(property => ( - - ))} + {properties.map(property => { + if (category !== undefined && property.category !== category) { + return null; + } + return ( + + ); + })} ); }); diff --git a/webapp/packages/core-blocks/src/ObjectPropertyInfo/ObjectPropertyInfoForm/RenderField.tsx b/webapp/packages/core-blocks/src/ObjectPropertyInfo/ObjectPropertyInfoForm/RenderField.tsx index 5c7fcf4e59..d74fa06303 100644 --- a/webapp/packages/core-blocks/src/ObjectPropertyInfo/ObjectPropertyInfoForm/RenderField.tsx +++ b/webapp/packages/core-blocks/src/ObjectPropertyInfo/ObjectPropertyInfoForm/RenderField.tsx @@ -10,7 +10,6 @@ import { observer } from 'mobx-react-lite'; import type { ObjectPropertyInfo } from '@cloudbeaver/core-sdk'; -import type { Layout } from '../../Containers/ILayoutSizeProps'; import { FieldCheckboxNew } from '../../FormControls/Checkboxes/FieldCheckboxNew'; import { ComboboxNew } from '../../FormControls/ComboboxNew'; import { FormFieldDescriptionNew } from '../../FormControls/FormFieldDescriptionNew'; @@ -30,7 +29,6 @@ interface RenderFieldProps { autoHide?: boolean; showRememberTip?: boolean; onFocus?: (event: React.FocusEvent) => void; - layout?: Layout; className?: string; } @@ -63,7 +61,6 @@ export const RenderField: React.FC = observer(function RenderF autoHide, showRememberTip, onFocus, - layout, className, }) { const href = property.features.includes('href'); @@ -104,7 +101,6 @@ export const RenderField: React.FC = observer(function RenderF defaultChecked={defaultValue} title={property.description} disabled={disabled || readOnly} - layout={layout} className={className} > {property.displayName ?? ''} @@ -123,7 +119,6 @@ export const RenderField: React.FC = observer(function RenderF defaultValue={property.defaultValue} title={property.description} disabled={disabled} - layout={layout} className={className} > {property.displayName ?? ''} @@ -145,7 +140,6 @@ export const RenderField: React.FC = observer(function RenderF autoComplete={RESERVED_KEYWORDS.includes(autofillToken) ? autofillToken : `${autofillToken} ${property.id}`} mod='surface' className={className} - layout={layout} onFocus={onFocus} > {property.displayName} diff --git a/webapp/packages/core-blocks/src/ObjectPropertyInfo/useObjectPropertyCategories.tsx b/webapp/packages/core-blocks/src/ObjectPropertyInfo/useObjectPropertyCategories.tsx index 92e101e04a..aa61a391a2 100644 --- a/webapp/packages/core-blocks/src/ObjectPropertyInfo/useObjectPropertyCategories.tsx +++ b/webapp/packages/core-blocks/src/ObjectPropertyInfo/useObjectPropertyCategories.tsx @@ -16,17 +16,13 @@ interface ICategoriesInfo { isUncategorizedExists: boolean; } -export function useObjectPropertyCategories(properties: ObjectPropertyInfo[] | undefined) { +export function useObjectPropertyCategories(properties: ObjectPropertyInfo[]) { const categories: IComputedValue = useMemo(() => computed(() => { const result: ICategoriesInfo = { categories: [], isUncategorizedExists: false, }; - if (!properties) { - return result; - } - for (const property of properties) { const category = property.category; if (!category) { diff --git a/webapp/packages/plugin-object-viewer/src/ObjectPropertiesPage/ObjectInfoTab/ObjectProperties.tsx b/webapp/packages/plugin-object-viewer/src/ObjectPropertiesPage/ObjectInfoTab/ObjectProperties.tsx index aa95f6e553..b7f4462d5d 100644 --- a/webapp/packages/plugin-object-viewer/src/ObjectPropertiesPage/ObjectInfoTab/ObjectProperties.tsx +++ b/webapp/packages/plugin-object-viewer/src/ObjectPropertiesPage/ObjectInfoTab/ObjectProperties.tsx @@ -14,19 +14,22 @@ import { useDatabaseObjectInfo } from '@cloudbeaver/core-app'; import { ColoredContainer, Loader, TextPlaceholder, useObjectPropertyCategories, GroupTitle, ObjectPropertyInfoFormNew, Group } from '@cloudbeaver/core-blocks'; import { BASE_CONTAINERS_STYLES } from '@cloudbeaver/core-blocks'; import { useTranslate } from '@cloudbeaver/core-localization'; +import type { ObjectPropertyInfo } from '@cloudbeaver/core-sdk'; import { useStyles } from '@cloudbeaver/core-theming'; type ObjectPropertiesProps = PropsWithChildren<{ objectId: string; }>; +const emptyArray: ObjectPropertyInfo[] = []; + export const ObjectProperties = observer(function ObjectProperties({ objectId, }: ObjectPropertiesProps) { const translate = useTranslate(); const { dbObject, isLoading } = useDatabaseObjectInfo(objectId); const styles = useStyles(BASE_CONTAINERS_STYLES); - const { categories, isUncategorizedExists } = useObjectPropertyCategories(dbObject?.properties); + const { categories, isUncategorizedExists } = useObjectPropertyCategories(dbObject?.properties ?? emptyArray); if (!dbObject?.properties && isLoading) { return ; @@ -44,7 +47,6 @@ export const ObjectProperties = observer(function ObjectProperties({ properties={dbObject?.properties} category={null} state={{}} - layout="mixedControls" small readOnly /> @@ -57,7 +59,6 @@ export const ObjectProperties = observer(function ObjectProperties({ properties={dbObject?.properties} category={category} state={{}} - layout="mixedControls" small readOnly /> From 2c9e838ee7630c69faa5a88527ed3212fd7b59c4 Mon Sep 17 00:00:00 2001 From: Naumov Alexey Date: Tue, 20 Apr 2021 10:32:07 +0300 Subject: [PATCH 3/5] feat(core-blocks): CB-872 add default values support --- .../src/FormControls/Checkboxes/Checkbox.tsx | 13 +++-- .../FormControls/Checkboxes/FieldCheckbox.tsx | 2 +- .../Checkboxes/FieldCheckboxNew.tsx | 2 +- .../src/FormControls/Checkboxes/Switch.tsx | 9 +++- .../src/FormControls/Checkboxes/SwitchNew.tsx | 9 +++- .../Checkboxes/useCheckboxState.ts | 12 ++--- .../src/FormControls/ComboboxNew.tsx | 16 +++--- .../src/FormControls/InputField.tsx | 18 +++---- .../src/FormControls/InputFieldNew.tsx | 18 +++---- .../src/FormControls/isControlPresented.ts | 9 +++- .../ObjectPropertyInfoFormNew.tsx | 6 +-- .../ObjectPropertyInfoForm/RenderField.tsx | 49 ++++++++++++------- .../src/ConnectionForm/Options/Options.tsx | 2 +- .../ObjectInfoTab/ObjectProperties.tsx | 11 ++--- 14 files changed, 99 insertions(+), 77 deletions(-) diff --git a/webapp/packages/core-blocks/src/FormControls/Checkboxes/Checkbox.tsx b/webapp/packages/core-blocks/src/FormControls/Checkboxes/Checkbox.tsx index 239d12db35..8034019049 100644 --- a/webapp/packages/core-blocks/src/FormControls/Checkboxes/Checkbox.tsx +++ b/webapp/packages/core-blocks/src/FormControls/Checkboxes/Checkbox.tsx @@ -21,9 +21,11 @@ export interface CheckboxBaseProps { ripple?: boolean; indeterminate?: boolean; style?: ComponentStyle; + defaultChecked?: boolean; + defaultValue?: string; } -export type CheckboxInputProps = Omit, 'onChange' | 'type' | 'value' | 'checked' | 'id' | 'style'> & ILayoutSizeProps; +export type CheckboxInputProps = Omit, 'onChange' | 'type' | 'value' | 'defaultValue' | 'checked' | 'defaultChecked' | 'id' | 'style'> & ILayoutSizeProps; export interface ICheckboxControlledProps extends CheckboxInputProps { value?: string; @@ -35,7 +37,7 @@ export interface ICheckboxControlledProps extends CheckboxInputProps { export interface ICheckboxObjectProps extends CheckboxInputProps { value?: string; - state: Partial>; + state?: Partial>; checked?: never; onChange?: CheckboxOnChangeEvent; autoHide?: boolean; @@ -50,9 +52,11 @@ export interface CheckboxType { export const Checkbox: CheckboxType = observer(function Checkbox({ name, value, + defaultValue, state, label, checked, + defaultChecked, children, mod, ripple, @@ -63,14 +67,15 @@ export const Checkbox: CheckboxType = observer(function Checkbox({ }: CheckboxBaseProps & (ICheckboxControlledProps | ICheckboxObjectProps)) { const checkboxState = useCheckboxState({ value, + defaultValue, checked, - defaultChecked: rest.defaultChecked, + defaultChecked, state, name, onChange, }); - if (autoHide && !isControlPresented(name, state)) { + if (autoHide && !isControlPresented(name, state, defaultChecked)) { return null; } diff --git a/webapp/packages/core-blocks/src/FormControls/Checkboxes/FieldCheckbox.tsx b/webapp/packages/core-blocks/src/FormControls/Checkboxes/FieldCheckbox.tsx index 9e2cf2b8bf..902b38179d 100644 --- a/webapp/packages/core-blocks/src/FormControls/Checkboxes/FieldCheckbox.tsx +++ b/webapp/packages/core-blocks/src/FormControls/Checkboxes/FieldCheckbox.tsx @@ -27,7 +27,7 @@ export const FieldCheckbox: CheckboxType = function FieldCheckbox({ }: CheckboxBaseProps & (ICheckboxControlledProps | ICheckboxObjectProps)) { const styles = useStyles(baseFormControlStyles, fieldCheckboxStyles); - if (rest.autoHide && !isControlPresented(rest.name, rest.state)) { + if (rest.autoHide && !isControlPresented(rest.name, rest.state, rest.defaultChecked)) { return null; } diff --git a/webapp/packages/core-blocks/src/FormControls/Checkboxes/FieldCheckboxNew.tsx b/webapp/packages/core-blocks/src/FormControls/Checkboxes/FieldCheckboxNew.tsx index 82c135094e..7b1b32be62 100644 --- a/webapp/packages/core-blocks/src/FormControls/Checkboxes/FieldCheckboxNew.tsx +++ b/webapp/packages/core-blocks/src/FormControls/Checkboxes/FieldCheckboxNew.tsx @@ -39,7 +39,7 @@ export const FieldCheckboxNew: CheckboxType = function FieldCheckboxNew({ }: CheckboxBaseProps & (ICheckboxControlledProps | ICheckboxObjectProps)) { const styles = useStyles(baseFormControlStylesNew, fieldCheckboxStyles); - if (rest.autoHide && !isControlPresented(rest.name, rest.state)) { + if (rest.autoHide && !isControlPresented(rest.name, rest.state, rest.defaultChecked)) { return null; } diff --git a/webapp/packages/core-blocks/src/FormControls/Checkboxes/Switch.tsx b/webapp/packages/core-blocks/src/FormControls/Checkboxes/Switch.tsx index 3ab94b7e6d..e7331067d9 100644 --- a/webapp/packages/core-blocks/src/FormControls/Checkboxes/Switch.tsx +++ b/webapp/packages/core-blocks/src/FormControls/Checkboxes/Switch.tsx @@ -81,6 +81,8 @@ interface IBaseProps { mod?: Array; label?: string; description?: string; + defaultValue?: string; + defaultChecked?: boolean; } interface SwitchType { @@ -91,10 +93,12 @@ interface SwitchType { export const Switch: SwitchType = observer(function Switch({ name, value, + defaultValue, label, description, state, checked, + defaultChecked, className, children, onChange, @@ -105,8 +109,9 @@ export const Switch: SwitchType = observer(function Switch({ }: IBaseProps & (ICheckboxControlledProps | ICheckboxObjectProps)) { const checkboxState = useCheckboxState({ value, + defaultValue, checked, - defaultChecked: rest.defaultChecked, + defaultChecked, state, name, onChange, @@ -119,7 +124,7 @@ export const Switch: SwitchType = observer(function Switch({ checkboxState.checked && switchState.checked ); - if (autoHide && !isControlPresented(name, state)) { + if (autoHide && !isControlPresented(name, state, defaultChecked)) { return null; } diff --git a/webapp/packages/core-blocks/src/FormControls/Checkboxes/SwitchNew.tsx b/webapp/packages/core-blocks/src/FormControls/Checkboxes/SwitchNew.tsx index 07b7e68946..c0ff751944 100644 --- a/webapp/packages/core-blocks/src/FormControls/Checkboxes/SwitchNew.tsx +++ b/webapp/packages/core-blocks/src/FormControls/Checkboxes/SwitchNew.tsx @@ -85,6 +85,8 @@ const switchState = { interface IBaseProps { mod?: Array; description?: string; + defaultValue?: string; + defaultChecked?: boolean; } interface SwitchType { @@ -95,9 +97,11 @@ interface SwitchType { export const SwitchNew: SwitchType = observer(function SwitchNew({ name, value, + defaultValue, description, state, checked, + defaultChecked, className, children, onChange, @@ -108,8 +112,9 @@ export const SwitchNew: SwitchType = observer(function SwitchNew({ }: IBaseProps & (ICheckboxControlledProps | ICheckboxObjectProps)) { const checkboxState = useCheckboxState({ value, + defaultValue, checked, - defaultChecked: rest.defaultChecked, + defaultChecked, state, name, onChange, @@ -122,7 +127,7 @@ export const SwitchNew: SwitchType = observer(function SwitchNew({ checkboxState.checked && switchState.checked ); - if (autoHide && !isControlPresented(name, state)) { + if (autoHide && !isControlPresented(name, state, defaultChecked)) { return null; } diff --git a/webapp/packages/core-blocks/src/FormControls/Checkboxes/useCheckboxState.ts b/webapp/packages/core-blocks/src/FormControls/Checkboxes/useCheckboxState.ts index 9ecf383417..ef616454f0 100644 --- a/webapp/packages/core-blocks/src/FormControls/Checkboxes/useCheckboxState.ts +++ b/webapp/packages/core-blocks/src/FormControls/Checkboxes/useCheckboxState.ts @@ -15,6 +15,7 @@ export type CheckboxOnChangeEvent = (value: boolean, name: T) => void; export type CheckboxStateOptions = { value: string | undefined; + defaultValue: string | undefined; checked: boolean | undefined; defaultChecked: boolean | undefined; } & ( @@ -39,22 +40,21 @@ export function useCheckboxState(options: CheckboxStateOpti const [count, refresh] = useState(0); const context = useContext(FormContext); const optionsRef = useObjectRef({ ...options, context, count }); - const { state, name, value } = optionsRef; + const { state, name } = optionsRef; - let checked = optionsRef.checked ?? false; + let checked = optionsRef.checked ?? optionsRef.defaultChecked ?? false; + const value = optionsRef.value ?? optionsRef.defaultValue ?? undefined; if (state !== undefined && name !== undefined && name in state) { const currentState = state[name as TKey]; - if (typeof value === 'string' && Array.isArray(currentState)) { - checked = currentState.includes(value); + if (typeof value === 'string') { + checked = Array.isArray(currentState) ? currentState.includes(value) : currentState === value; } else if (typeof currentState === 'string') { checked = currentState.toLowerCase() === 'true'; } else { checked = !!currentState; } - } else if (optionsRef.defaultChecked !== undefined) { - checked = optionsRef.defaultChecked; } return useObjectRef({ diff --git a/webapp/packages/core-blocks/src/FormControls/ComboboxNew.tsx b/webapp/packages/core-blocks/src/FormControls/ComboboxNew.tsx index a76d3da5cd..aa884b8b52 100644 --- a/webapp/packages/core-blocks/src/FormControls/ComboboxNew.tsx +++ b/webapp/packages/core-blocks/src/FormControls/ComboboxNew.tsx @@ -97,10 +97,11 @@ const styles = composes( ` ); -type BaseProps = Omit, 'onChange' | 'onSelect' | 'name' | 'value'> & ILayoutSizeProps & { +type BaseProps = Omit, 'onChange' | 'onSelect' | 'name' | 'value' | 'defaultValue'> & ILayoutSizeProps & { propertyName?: string; items: TValue[]; searchable?: boolean; + defaultValue?: string; keySelector: (item: TValue) => TKey; valueSelector: (item: TValue) => string; onSwitch?: (state: boolean) => void; @@ -116,7 +117,7 @@ type ControlledProps = BaseProps & { type ObjectProps = BaseProps & { name: TKey; - state: TState; + state?: TState; onSelect?: (value: TState[TKey], name: TKey | undefined, prev: TState[TKey]) => void; onChange?: (value: string, name: TKey | undefined) => any; value?: never; @@ -129,6 +130,7 @@ interface ComboboxType { export const ComboboxNew: ComboboxType = observer(function ComboboxNew({ value: controlledValue, + defaultValue, name, state, propertyName, @@ -154,14 +156,10 @@ export const ComboboxNew: ComboboxType = observer(function ComboboxNew({ gutter: 4, }); const [searchValue, setSearchValue] = useState(''); - let value: string | number | readonly string[] | undefined = controlledValue; + let value: string | number | readonly string[] | undefined = controlledValue ?? defaultValue ?? undefined; - if (state) { - if (name in state) { - value = state[name]; - } else if (rest.defaultValue !== undefined) { - value = rest.defaultValue; - } + if (state && name !== undefined && name in state) { + value = state[name]; } const selectedItem = items.find(item => keySelector(item) === value); diff --git a/webapp/packages/core-blocks/src/FormControls/InputField.tsx b/webapp/packages/core-blocks/src/FormControls/InputField.tsx index 5b63ae2c49..1fad732ce0 100644 --- a/webapp/packages/core-blocks/src/FormControls/InputField.tsx +++ b/webapp/packages/core-blocks/src/FormControls/InputField.tsx @@ -16,18 +16,18 @@ import { baseFormControlStyles } from './baseFormControlStyles'; import { FormContext } from './FormContext'; import { isControlPresented } from './isControlPresented'; -type BaseProps = Omit, 'onChange' | 'name' | 'value'> & { +type BaseProps = Omit, 'onChange' | 'name' | 'value' | 'defaultValue'> & { description?: string; mod?: 'surface'; long?: boolean; short?: boolean; + defaultValue?: string; }; type ControlledProps = BaseProps & { name?: string; value?: string; onChange?: (value: string, name?: string) => any; - state?: never; autoHide?: never; }; @@ -37,7 +37,6 @@ type ObjectProps = BaseProps & { state: TState; onChange?: (value: string, name: TKey) => any; autoHide?: boolean; - value?: never; }; @@ -49,6 +48,7 @@ interface InputFieldType { export const InputField: InputFieldType = observer(function InputField({ name, value: valueControlled, + defaultValue, required, state, children, @@ -76,17 +76,13 @@ export const InputField: InputFieldType = observer(function InputField({ } }, [state, name, context, onChange]); - let value: any = valueControlled; + let value: any = valueControlled ?? defaultValue ?? undefined; - if (state) { - if (name in state) { - value = state[name]; - } else if (rest.defaultValue !== undefined) { - value = rest.defaultValue; - } + if (state && name !== undefined && name in state) { + value = state[name]; } - if (autoHide && !isControlPresented(name, state)) { + if (autoHide && !isControlPresented(name, state, defaultValue)) { return null; } diff --git a/webapp/packages/core-blocks/src/FormControls/InputFieldNew.tsx b/webapp/packages/core-blocks/src/FormControls/InputFieldNew.tsx index 8a587ef907..ddc48a5dad 100644 --- a/webapp/packages/core-blocks/src/FormControls/InputFieldNew.tsx +++ b/webapp/packages/core-blocks/src/FormControls/InputFieldNew.tsx @@ -28,11 +28,12 @@ const INPUT_FIELD_STYLES = css` } `; -type BaseProps = Omit, 'onChange' | 'name' | 'value'> & ILayoutSizeProps & { +type BaseProps = Omit, 'onChange' | 'name' | 'value' | 'defaultValue'> & ILayoutSizeProps & { description?: string; mod?: 'surface'; ref?: React.Ref; style?: ComponentStyle; + defaultValue?: string | number; }; type ControlledProps = BaseProps & { @@ -47,7 +48,7 @@ type ControlledProps = BaseProps & { type ObjectProps = BaseProps & { name: TKey; - state: TState; + state?: TState; mapState?: (value: TState[TKey]) => TState[TKey]; mapValue?: (value: TState[TKey]) => TState[TKey]; onChange?: (value: TState[TKey], name: TKey) => any; @@ -64,6 +65,7 @@ export const InputFieldNew: InputFieldType = observer(function InputFieldNew({ name, style, value: valueControlled, + defaultValue, required, state, mapState, @@ -96,18 +98,14 @@ export const InputFieldNew: InputFieldType = observer(function InputFieldNew({ } }, [state, name, context, onChange]); - if (autoHide && !isControlPresented(name, state)) { + if (autoHide && !isControlPresented(name, state, defaultValue)) { return null; } - let value: any = valueControlled; + let value: any = valueControlled ?? defaultValue ?? undefined; - if (state) { - if (name in state) { - value = state[name]; - } else if (rest.defaultValue !== undefined) { - value = rest.defaultValue; - } + if (state && name !== undefined && name in state) { + value = state[name]; } if (mapState) { diff --git a/webapp/packages/core-blocks/src/FormControls/isControlPresented.ts b/webapp/packages/core-blocks/src/FormControls/isControlPresented.ts index 63a89795c1..d8fcb8ca8a 100644 --- a/webapp/packages/core-blocks/src/FormControls/isControlPresented.ts +++ b/webapp/packages/core-blocks/src/FormControls/isControlPresented.ts @@ -6,9 +6,14 @@ * you may not use this file except in compliance with the License. */ -export function isControlPresented(name: string | undefined, state: any): boolean { +export function isControlPresented( + name: string | undefined, state: any, defaultValue?: string | number | boolean +): boolean { if (state !== undefined && name !== undefined) { - return name in state && state[name] !== null; + if (name in state) { + return state[name] !== null; + } + return defaultValue !== undefined; } return true; } diff --git a/webapp/packages/core-blocks/src/ObjectPropertyInfo/ObjectPropertyInfoForm/ObjectPropertyInfoFormNew.tsx b/webapp/packages/core-blocks/src/ObjectPropertyInfo/ObjectPropertyInfoForm/ObjectPropertyInfoFormNew.tsx index f92a2fd2a5..197d31a5a1 100644 --- a/webapp/packages/core-blocks/src/ObjectPropertyInfo/ObjectPropertyInfoForm/ObjectPropertyInfoFormNew.tsx +++ b/webapp/packages/core-blocks/src/ObjectPropertyInfo/ObjectPropertyInfoForm/ObjectPropertyInfoFormNew.tsx @@ -16,8 +16,8 @@ import { TextPlaceholder } from '../../TextPlaceholder'; import { RenderField } from './RenderField'; interface ObjectPropertyFormProps extends ILayoutSizeProps { - properties: ObjectPropertyInfo[] | undefined; - state: Record; + properties: ObjectPropertyInfo[]; + state?: Record; category?: string | null; editable?: boolean; autofillToken?: string; @@ -48,7 +48,7 @@ export const ObjectPropertyInfoFormNew: React.FC = obse } }, [onFocus]); - if (!properties || properties.length === 0) { + if (properties.length === 0) { return Properties empty; } diff --git a/webapp/packages/core-blocks/src/ObjectPropertyInfo/ObjectPropertyInfoForm/RenderField.tsx b/webapp/packages/core-blocks/src/ObjectPropertyInfo/ObjectPropertyInfoForm/RenderField.tsx index d74fa06303..459df06ba8 100644 --- a/webapp/packages/core-blocks/src/ObjectPropertyInfo/ObjectPropertyInfoForm/RenderField.tsx +++ b/webapp/packages/core-blocks/src/ObjectPropertyInfo/ObjectPropertyInfoForm/RenderField.tsx @@ -21,7 +21,7 @@ const RESERVED_KEYWORDS = ['no', 'off', 'new-password']; interface RenderFieldProps { property: ObjectPropertyInfo; - state: Record; + state?: Record; editable?: boolean; autofillToken?: string; disabled?: boolean; @@ -32,20 +32,31 @@ interface RenderFieldProps { className?: string; } -function isCheckbox(property: ObjectPropertyInfo) { - return property.dataType?.toLowerCase() === 'boolean'; +type ControlType = 'checkbox' | 'combobox' | 'link' | 'input'; + +function getControlTypeFor(property: ObjectPropertyInfo): ControlType { + const dataType = property.dataType?.toLowerCase(); + + if (dataType === 'boolean') { + return 'checkbox'; + } else if (property.validValues && property.validValues.length > 0) { + return 'combobox'; + } else if (property.features.includes('href')) { + return 'link'; + } + + return 'input'; } -function getDefaultValueFor(property: ObjectPropertyInfo) { - const checkbox = isCheckbox(property); - const value = property.value; +function getValue(value: any, controlType: ControlType) { + const checkbox = controlType === 'checkbox'; if (value === null || value === undefined) { return checkbox ? false : ''; } if (typeof value === 'string') { - return checkbox ? value === 'true' : value; + return checkbox ? value.toLowerCase() === 'true' : value; } return value.displayName || value.value || JSON.stringify(value); @@ -63,17 +74,17 @@ export const RenderField: React.FC = observer(function RenderF onFocus, className, }) { - const href = property.features.includes('href'); + const controltype = getControlTypeFor(property); const password = property.features.includes('password'); - const checkbox = isCheckbox(property); - const combobox = property.validValues && property.validValues.length > 0; - const defaultValue = getDefaultValueFor(property); + + const value = getValue(property.value, controltype); + const defaultValue = getValue(property.defaultValue, controltype); let description: string | undefined; - if (href) { + if (controltype === 'link') { return ( - {property.description} + {property.description} ); } @@ -84,7 +95,7 @@ export const RenderField: React.FC = observer(function RenderF } return ( - {state[property.id!]} + {state?.[property.id!]} ); } @@ -93,12 +104,12 @@ export const RenderField: React.FC = observer(function RenderF description = 'Password saved'; } - if (checkbox) { + if (controltype === 'checkbox') { return ( = observer(function RenderF ); } - if (combobox) { + if (controltype === 'combobox') { return ( = observer(function RenderF items={property.validValues!} keySelector={value => value} valueSelector={value => value} - defaultValue={property.defaultValue} + defaultValue={defaultValue} title={property.description} disabled={disabled} className={className} @@ -132,7 +143,7 @@ export const RenderField: React.FC = observer(function RenderF title={property.description} name={property.id!} state={state} - defaultValue={defaultValue} + value={state === undefined ? value : undefined} description={description} disabled={disabled} readOnly={readOnly} diff --git a/webapp/packages/core-connections/src/ConnectionForm/Options/Options.tsx b/webapp/packages/core-connections/src/ConnectionForm/Options/Options.tsx index 6cd6f0f1e8..bb0a3470a2 100644 --- a/webapp/packages/core-connections/src/ConnectionForm/Options/Options.tsx +++ b/webapp/packages/core-connections/src/ConnectionForm/Options/Options.tsx @@ -227,7 +227,7 @@ export const Options: TabContainerPanelComponent = observe - {(authModel && !driver.data?.anonymousAccess) && ( + {(authModel && !driver.data?.anonymousAccess && properties) && ( {translate('connections_connection_edit_authentication')} diff --git a/webapp/packages/plugin-object-viewer/src/ObjectPropertiesPage/ObjectInfoTab/ObjectProperties.tsx b/webapp/packages/plugin-object-viewer/src/ObjectPropertiesPage/ObjectInfoTab/ObjectProperties.tsx index b7f4462d5d..70246acd4e 100644 --- a/webapp/packages/plugin-object-viewer/src/ObjectPropertiesPage/ObjectInfoTab/ObjectProperties.tsx +++ b/webapp/packages/plugin-object-viewer/src/ObjectPropertiesPage/ObjectInfoTab/ObjectProperties.tsx @@ -30,12 +30,13 @@ export const ObjectProperties = observer(function ObjectProperties({ const { dbObject, isLoading } = useDatabaseObjectInfo(objectId); const styles = useStyles(BASE_CONTAINERS_STYLES); const { categories, isUncategorizedExists } = useObjectPropertyCategories(dbObject?.properties ?? emptyArray); + const properties = dbObject?.properties; - if (!dbObject?.properties && isLoading) { + if (!properties && isLoading) { return ; } - if (!dbObject?.properties || dbObject.properties.length === 0) { + if (!properties || properties.length === 0) { return {translate('plugin_object_viewer_table_no_items')}; } @@ -44,9 +45,8 @@ export const ObjectProperties = observer(function ObjectProperties({ {isUncategorizedExists && ( @@ -56,9 +56,8 @@ export const ObjectProperties = observer(function ObjectProperties({ {category} From eb1f52e8e66bc9eba7ef4405ebe6df78e8734dfa Mon Sep 17 00:00:00 2001 From: Naumov Alexey Date: Tue, 20 Apr 2021 18:46:14 +0300 Subject: [PATCH 4/5] feat(core-blocks): CB-872 revert form controls optional state --- .../src/Containers/ILayoutSizeProps.ts | 1 + .../src/FormControls/Checkboxes/Checkbox.tsx | 16 +++-- .../Checkboxes/CheckboxMarkup.tsx | 6 +- .../Checkboxes/FieldCheckboxNew.tsx | 2 +- .../src/FormControls/Checkboxes/Switch.tsx | 3 - .../src/FormControls/Checkboxes/SwitchNew.tsx | 2 - .../Checkboxes/useCheckboxState.ts | 29 +++++---- .../src/FormControls/ComboboxNew.tsx | 2 +- .../src/FormControls/InputFieldNew.tsx | 2 +- .../ObjectPropertyInfoForm.tsx | 1 + .../ObjectPropertyInfoForm/RenderField.tsx | 61 +++++++++++++++++-- .../src/ConnectionForm/Options/Options.tsx | 4 +- .../src/ConnectionForm/SSH/SSH.tsx | 2 +- .../DatabaseAuthDialog/DatabaseAuthDialog.tsx | 2 +- .../Users/UserForm/UserInfo.tsx | 2 +- .../src/ConnectionDialog/ConnectionDialog.tsx | 2 +- 16 files changed, 92 insertions(+), 45 deletions(-) diff --git a/webapp/packages/core-blocks/src/Containers/ILayoutSizeProps.ts b/webapp/packages/core-blocks/src/Containers/ILayoutSizeProps.ts index 166d6c951f..f81363ab72 100644 --- a/webapp/packages/core-blocks/src/Containers/ILayoutSizeProps.ts +++ b/webapp/packages/core-blocks/src/Containers/ILayoutSizeProps.ts @@ -5,6 +5,7 @@ * Licensed under the Apache License, Version 2.0. * you may not use this file except in compliance with the License. */ + export interface ILayoutSizeProps { keepSize?: boolean; tiny?: boolean; diff --git a/webapp/packages/core-blocks/src/FormControls/Checkboxes/Checkbox.tsx b/webapp/packages/core-blocks/src/FormControls/Checkboxes/Checkbox.tsx index 8034019049..6bc6a7cb26 100644 --- a/webapp/packages/core-blocks/src/FormControls/Checkboxes/Checkbox.tsx +++ b/webapp/packages/core-blocks/src/FormControls/Checkboxes/Checkbox.tsx @@ -16,19 +16,20 @@ import { CheckboxMarkup, CheckboxMod } from './CheckboxMarkup'; import { CheckboxOnChangeEvent, useCheckboxState } from './useCheckboxState'; export interface CheckboxBaseProps { - label?: string; mod?: CheckboxMod[]; ripple?: boolean; indeterminate?: boolean; style?: ComponentStyle; - defaultChecked?: boolean; - defaultValue?: string; } -export type CheckboxInputProps = Omit, 'onChange' | 'type' | 'value' | 'defaultValue' | 'checked' | 'defaultChecked' | 'id' | 'style'> & ILayoutSizeProps; +export type CheckboxInputProps = Omit, 'onChange' | 'type' | 'value' | 'defaultValue' | 'checked' | 'defaultChecked' | 'style'> & ILayoutSizeProps & { + value?: string; + defaultValue?: string; + defaultChecked?: boolean; + label?: string; +}; export interface ICheckboxControlledProps extends CheckboxInputProps { - value?: string; state?: never; checked?: boolean; onChange?: CheckboxOnChangeEvent; @@ -36,14 +37,12 @@ export interface ICheckboxControlledProps extends CheckboxInputProps { } export interface ICheckboxObjectProps extends CheckboxInputProps { - value?: string; - state?: Partial>; + state: Partial>; checked?: never; onChange?: CheckboxOnChangeEvent; autoHide?: boolean; name: TKey; } - export interface CheckboxType { (props: CheckboxBaseProps & ICheckboxControlledProps): React.ReactElement | null; (props: CheckboxBaseProps & ICheckboxObjectProps): React.ReactElement | null; @@ -83,7 +82,6 @@ export const Checkbox: CheckboxType = observer(function Checkbox({ = function CheckboxMarkup({ - label, className, title, mod = ['primary'], ripple = true, style, ...rest + id, label, className, title, mod = ['primary'], ripple = true, style, ...rest }) { return styled( useStyles( @@ -123,7 +123,7 @@ export const CheckboxMarkup: React.FC = function CheckboxM )( - + @@ -134,7 +134,7 @@ export const CheckboxMarkup: React.FC = function CheckboxM )} - {label && rest.id && {label}} + {label && (id || rest.name) && {label}} ); }; diff --git a/webapp/packages/core-blocks/src/FormControls/Checkboxes/FieldCheckboxNew.tsx b/webapp/packages/core-blocks/src/FormControls/Checkboxes/FieldCheckboxNew.tsx index 7b1b32be62..c84e3f1345 100644 --- a/webapp/packages/core-blocks/src/FormControls/Checkboxes/FieldCheckboxNew.tsx +++ b/webapp/packages/core-blocks/src/FormControls/Checkboxes/FieldCheckboxNew.tsx @@ -46,7 +46,7 @@ export const FieldCheckboxNew: CheckboxType = function FieldCheckboxNew({ return styled(styles)( - {children} + {children} ); }; diff --git a/webapp/packages/core-blocks/src/FormControls/Checkboxes/Switch.tsx b/webapp/packages/core-blocks/src/FormControls/Checkboxes/Switch.tsx index e7331067d9..a5defe948a 100644 --- a/webapp/packages/core-blocks/src/FormControls/Checkboxes/Switch.tsx +++ b/webapp/packages/core-blocks/src/FormControls/Checkboxes/Switch.tsx @@ -79,10 +79,7 @@ const switchState = { interface IBaseProps { mod?: Array; - label?: string; description?: string; - defaultValue?: string; - defaultChecked?: boolean; } interface SwitchType { diff --git a/webapp/packages/core-blocks/src/FormControls/Checkboxes/SwitchNew.tsx b/webapp/packages/core-blocks/src/FormControls/Checkboxes/SwitchNew.tsx index c0ff751944..b63929fb60 100644 --- a/webapp/packages/core-blocks/src/FormControls/Checkboxes/SwitchNew.tsx +++ b/webapp/packages/core-blocks/src/FormControls/Checkboxes/SwitchNew.tsx @@ -85,8 +85,6 @@ const switchState = { interface IBaseProps { mod?: Array; description?: string; - defaultValue?: string; - defaultChecked?: boolean; } interface SwitchType { diff --git a/webapp/packages/core-blocks/src/FormControls/Checkboxes/useCheckboxState.ts b/webapp/packages/core-blocks/src/FormControls/Checkboxes/useCheckboxState.ts index ef616454f0..cce3385db3 100644 --- a/webapp/packages/core-blocks/src/FormControls/Checkboxes/useCheckboxState.ts +++ b/webapp/packages/core-blocks/src/FormControls/Checkboxes/useCheckboxState.ts @@ -32,18 +32,18 @@ export type CheckboxStateOptions = { ); interface ICheckboxState { - checked: boolean; + checked: boolean | undefined; change: (event: React.ChangeEvent) => void; } export function useCheckboxState(options: CheckboxStateOptions): ICheckboxState { const [count, refresh] = useState(0); const context = useContext(FormContext); - const optionsRef = useObjectRef({ ...options, context, count }); - const { state, name } = optionsRef; + const controlledValue = options.value ?? options.defaultValue ?? undefined; + const optionsRef = useObjectRef({ ...options, context, count, value: controlledValue }); + const { state, name, value } = optionsRef; - let checked = optionsRef.checked ?? optionsRef.defaultChecked ?? false; - const value = optionsRef.value ?? optionsRef.defaultValue ?? undefined; + let checked = optionsRef.checked ?? optionsRef.defaultChecked ?? undefined; if (state !== undefined && name !== undefined && name in state) { const currentState = state[name as TKey]; @@ -57,7 +57,7 @@ export function useCheckboxState(options: CheckboxStateOpti } } - return useObjectRef({ + return useObjectRef({ checked, change(event: React.ChangeEvent) { const { state, name, value, onChange, count, context } = optionsRef; @@ -66,13 +66,16 @@ export function useCheckboxState(options: CheckboxStateOpti if (state !== undefined && name !== undefined) { const currentState = state[name as TKey]; - if (typeof value === 'string' && Array.isArray(currentState)) { - const elementIndex = currentState.indexOf(value); - - if (checked && elementIndex === -1) { - currentState.push(value); - } else if (elementIndex !== -1) { - currentState.splice(elementIndex, 1); + if (typeof value === 'string') { + if (Array.isArray(currentState)) { + const elementIndex = currentState.indexOf(value); + if (checked && elementIndex === -1) { + currentState.push(value); + } else if (elementIndex !== -1) { + currentState.splice(elementIndex, 1); + } + } else { + state[name as TKey] = value; } } else { state[name as TKey] = checked; diff --git a/webapp/packages/core-blocks/src/FormControls/ComboboxNew.tsx b/webapp/packages/core-blocks/src/FormControls/ComboboxNew.tsx index aa884b8b52..bd735691c6 100644 --- a/webapp/packages/core-blocks/src/FormControls/ComboboxNew.tsx +++ b/webapp/packages/core-blocks/src/FormControls/ComboboxNew.tsx @@ -117,7 +117,7 @@ type ControlledProps = BaseProps & { type ObjectProps = BaseProps & { name: TKey; - state?: TState; + state: TState; onSelect?: (value: TState[TKey], name: TKey | undefined, prev: TState[TKey]) => void; onChange?: (value: string, name: TKey | undefined) => any; value?: never; diff --git a/webapp/packages/core-blocks/src/FormControls/InputFieldNew.tsx b/webapp/packages/core-blocks/src/FormControls/InputFieldNew.tsx index ddc48a5dad..9ce1b9372f 100644 --- a/webapp/packages/core-blocks/src/FormControls/InputFieldNew.tsx +++ b/webapp/packages/core-blocks/src/FormControls/InputFieldNew.tsx @@ -48,7 +48,7 @@ type ControlledProps = BaseProps & { type ObjectProps = BaseProps & { name: TKey; - state?: TState; + state: TState; mapState?: (value: TState[TKey]) => TState[TKey]; mapValue?: (value: TState[TKey]) => TState[TKey]; onChange?: (value: TState[TKey], name: TKey) => any; diff --git a/webapp/packages/core-blocks/src/ObjectPropertyInfo/ObjectPropertyInfoForm/ObjectPropertyInfoForm.tsx b/webapp/packages/core-blocks/src/ObjectPropertyInfo/ObjectPropertyInfoForm/ObjectPropertyInfoForm.tsx index d20b577a99..915857484e 100644 --- a/webapp/packages/core-blocks/src/ObjectPropertyInfo/ObjectPropertyInfoForm/ObjectPropertyInfoForm.tsx +++ b/webapp/packages/core-blocks/src/ObjectPropertyInfo/ObjectPropertyInfoForm/ObjectPropertyInfoForm.tsx @@ -80,6 +80,7 @@ const RenderField: React.FC = observer(function RenderField({ if (checkbox) { return ( = observer(function RenderF } if (controltype === 'checkbox') { + if (state !== undefined) { + return ( + + {property.displayName ?? ''} + + ); + } return ( = observer(function RenderF } if (controltype === 'combobox') { + if (state !== undefined) { + return ( + value} + valueSelector={value => value} + defaultValue={defaultValue} + title={property.description} + disabled={disabled} + className={className} + > + {property.displayName ?? ''} + + ); + } + return ( value} valueSelector={value => value} @@ -137,17 +168,35 @@ export const RenderField: React.FC = observer(function RenderF ); } + if (state !== undefined) { + return ( + + {property.displayName} + + ); + } return ( = observe )} {admin && originLocal && ( = observe {credentialsSavingEnabled && ( {translate('connections_connection_edit_save_credentials')} diff --git a/webapp/packages/core-connections/src/ConnectionForm/SSH/SSH.tsx b/webapp/packages/core-connections/src/ConnectionForm/SSH/SSH.tsx index 96625d5c42..6cadb49651 100644 --- a/webapp/packages/core-connections/src/ConnectionForm/SSH/SSH.tsx +++ b/webapp/packages/core-connections/src/ConnectionForm/SSH/SSH.tsx @@ -161,8 +161,8 @@ export const SSH: TabContainerPanelComponent = observer(fu {credentialsSavingEnabled && ( {translate('connections_connection_edit_save_credentials')} diff --git a/webapp/packages/core-connections/src/DatabaseAuthDialog/DatabaseAuthDialog.tsx b/webapp/packages/core-connections/src/DatabaseAuthDialog/DatabaseAuthDialog.tsx index cd00a14054..e8d4aae7a1 100644 --- a/webapp/packages/core-connections/src/DatabaseAuthDialog/DatabaseAuthDialog.tsx +++ b/webapp/packages/core-connections/src/DatabaseAuthDialog/DatabaseAuthDialog.tsx @@ -122,8 +122,8 @@ export const DatabaseAuthDialog = observer(function DatabaseAuthDialog({ {credentialsSavingEnabled && ( = observer(fun {controller.roles.map((role, i) => ( Date: Wed, 21 Apr 2021 14:57:48 +0300 Subject: [PATCH 5/5] feat(core-blocks): CB-872 add default value support for input --- .../core-blocks/src/FormControls/Checkboxes/Checkbox.tsx | 3 ++- .../core-blocks/src/FormControls/Checkboxes/FieldCheckbox.tsx | 2 +- .../src/FormControls/Checkboxes/FieldCheckboxNew.tsx | 2 +- .../core-blocks/src/FormControls/Checkboxes/Switch.tsx | 2 +- .../core-blocks/src/FormControls/Checkboxes/SwitchNew.tsx | 2 +- webapp/packages/core-blocks/src/FormControls/InputField.tsx | 3 +-- .../packages/core-blocks/src/FormControls/InputFieldNew.tsx | 3 +-- .../core-blocks/src/FormControls/isControlPresented.ts | 2 +- .../ObjectPropertyInfoForm/ObjectPropertyInfoFormNew.tsx | 2 +- .../ObjectPropertyInfo/ObjectPropertyInfoForm/RenderField.tsx | 4 ++++ 10 files changed, 14 insertions(+), 11 deletions(-) diff --git a/webapp/packages/core-blocks/src/FormControls/Checkboxes/Checkbox.tsx b/webapp/packages/core-blocks/src/FormControls/Checkboxes/Checkbox.tsx index 6bc6a7cb26..2bbc0d2509 100644 --- a/webapp/packages/core-blocks/src/FormControls/Checkboxes/Checkbox.tsx +++ b/webapp/packages/core-blocks/src/FormControls/Checkboxes/Checkbox.tsx @@ -43,6 +43,7 @@ export interface ICheckboxObjectProps extends CheckboxInput autoHide?: boolean; name: TKey; } + export interface CheckboxType { (props: CheckboxBaseProps & ICheckboxControlledProps): React.ReactElement | null; (props: CheckboxBaseProps & ICheckboxObjectProps): React.ReactElement | null; @@ -74,7 +75,7 @@ export const Checkbox: CheckboxType = observer(function Checkbox({ onChange, }); - if (autoHide && !isControlPresented(name, state, defaultChecked)) { + if (autoHide && !isControlPresented(name, state)) { return null; } diff --git a/webapp/packages/core-blocks/src/FormControls/Checkboxes/FieldCheckbox.tsx b/webapp/packages/core-blocks/src/FormControls/Checkboxes/FieldCheckbox.tsx index 902b38179d..9e2cf2b8bf 100644 --- a/webapp/packages/core-blocks/src/FormControls/Checkboxes/FieldCheckbox.tsx +++ b/webapp/packages/core-blocks/src/FormControls/Checkboxes/FieldCheckbox.tsx @@ -27,7 +27,7 @@ export const FieldCheckbox: CheckboxType = function FieldCheckbox({ }: CheckboxBaseProps & (ICheckboxControlledProps | ICheckboxObjectProps)) { const styles = useStyles(baseFormControlStyles, fieldCheckboxStyles); - if (rest.autoHide && !isControlPresented(rest.name, rest.state, rest.defaultChecked)) { + if (rest.autoHide && !isControlPresented(rest.name, rest.state)) { return null; } diff --git a/webapp/packages/core-blocks/src/FormControls/Checkboxes/FieldCheckboxNew.tsx b/webapp/packages/core-blocks/src/FormControls/Checkboxes/FieldCheckboxNew.tsx index c84e3f1345..0687244421 100644 --- a/webapp/packages/core-blocks/src/FormControls/Checkboxes/FieldCheckboxNew.tsx +++ b/webapp/packages/core-blocks/src/FormControls/Checkboxes/FieldCheckboxNew.tsx @@ -39,7 +39,7 @@ export const FieldCheckboxNew: CheckboxType = function FieldCheckboxNew({ }: CheckboxBaseProps & (ICheckboxControlledProps | ICheckboxObjectProps)) { const styles = useStyles(baseFormControlStylesNew, fieldCheckboxStyles); - if (rest.autoHide && !isControlPresented(rest.name, rest.state, rest.defaultChecked)) { + if (rest.autoHide && !isControlPresented(rest.name, rest.state)) { return null; } diff --git a/webapp/packages/core-blocks/src/FormControls/Checkboxes/Switch.tsx b/webapp/packages/core-blocks/src/FormControls/Checkboxes/Switch.tsx index a5defe948a..67e3dee19a 100644 --- a/webapp/packages/core-blocks/src/FormControls/Checkboxes/Switch.tsx +++ b/webapp/packages/core-blocks/src/FormControls/Checkboxes/Switch.tsx @@ -121,7 +121,7 @@ export const Switch: SwitchType = observer(function Switch({ checkboxState.checked && switchState.checked ); - if (autoHide && !isControlPresented(name, state, defaultChecked)) { + if (autoHide && !isControlPresented(name, state)) { return null; } diff --git a/webapp/packages/core-blocks/src/FormControls/Checkboxes/SwitchNew.tsx b/webapp/packages/core-blocks/src/FormControls/Checkboxes/SwitchNew.tsx index b63929fb60..e3d959ea0d 100644 --- a/webapp/packages/core-blocks/src/FormControls/Checkboxes/SwitchNew.tsx +++ b/webapp/packages/core-blocks/src/FormControls/Checkboxes/SwitchNew.tsx @@ -125,7 +125,7 @@ export const SwitchNew: SwitchType = observer(function SwitchNew({ checkboxState.checked && switchState.checked ); - if (autoHide && !isControlPresented(name, state, defaultChecked)) { + if (autoHide && !isControlPresented(name, state)) { return null; } diff --git a/webapp/packages/core-blocks/src/FormControls/InputField.tsx b/webapp/packages/core-blocks/src/FormControls/InputField.tsx index 1fad732ce0..ef82d0a25e 100644 --- a/webapp/packages/core-blocks/src/FormControls/InputField.tsx +++ b/webapp/packages/core-blocks/src/FormControls/InputField.tsx @@ -16,12 +16,11 @@ import { baseFormControlStyles } from './baseFormControlStyles'; import { FormContext } from './FormContext'; import { isControlPresented } from './isControlPresented'; -type BaseProps = Omit, 'onChange' | 'name' | 'value' | 'defaultValue'> & { +type BaseProps = Omit, 'onChange' | 'name' | 'value'> & { description?: string; mod?: 'surface'; long?: boolean; short?: boolean; - defaultValue?: string; }; type ControlledProps = BaseProps & { diff --git a/webapp/packages/core-blocks/src/FormControls/InputFieldNew.tsx b/webapp/packages/core-blocks/src/FormControls/InputFieldNew.tsx index 9ce1b9372f..ea0207cd8a 100644 --- a/webapp/packages/core-blocks/src/FormControls/InputFieldNew.tsx +++ b/webapp/packages/core-blocks/src/FormControls/InputFieldNew.tsx @@ -28,12 +28,11 @@ const INPUT_FIELD_STYLES = css` } `; -type BaseProps = Omit, 'onChange' | 'name' | 'value' | 'defaultValue'> & ILayoutSizeProps & { +type BaseProps = Omit, 'onChange' | 'name' | 'value'> & ILayoutSizeProps & { description?: string; mod?: 'surface'; ref?: React.Ref; style?: ComponentStyle; - defaultValue?: string | number; }; type ControlledProps = BaseProps & { diff --git a/webapp/packages/core-blocks/src/FormControls/isControlPresented.ts b/webapp/packages/core-blocks/src/FormControls/isControlPresented.ts index d8fcb8ca8a..16ba499ac9 100644 --- a/webapp/packages/core-blocks/src/FormControls/isControlPresented.ts +++ b/webapp/packages/core-blocks/src/FormControls/isControlPresented.ts @@ -7,7 +7,7 @@ */ export function isControlPresented( - name: string | undefined, state: any, defaultValue?: string | number | boolean + name: string | undefined, state: any, defaultValue?: string | number | readonly string[] ): boolean { if (state !== undefined && name !== undefined) { if (name in state) { diff --git a/webapp/packages/core-blocks/src/ObjectPropertyInfo/ObjectPropertyInfoForm/ObjectPropertyInfoFormNew.tsx b/webapp/packages/core-blocks/src/ObjectPropertyInfo/ObjectPropertyInfoForm/ObjectPropertyInfoFormNew.tsx index 197d31a5a1..70a4729214 100644 --- a/webapp/packages/core-blocks/src/ObjectPropertyInfo/ObjectPropertyInfoForm/ObjectPropertyInfoFormNew.tsx +++ b/webapp/packages/core-blocks/src/ObjectPropertyInfo/ObjectPropertyInfoForm/ObjectPropertyInfoFormNew.tsx @@ -17,7 +17,7 @@ import { RenderField } from './RenderField'; interface ObjectPropertyFormProps extends ILayoutSizeProps { properties: ObjectPropertyInfo[]; - state?: Record; + state?: Record; category?: string | null; editable?: boolean; autofillToken?: string; diff --git a/webapp/packages/core-blocks/src/ObjectPropertyInfo/ObjectPropertyInfoForm/RenderField.tsx b/webapp/packages/core-blocks/src/ObjectPropertyInfo/ObjectPropertyInfoForm/RenderField.tsx index 167d8a9fdb..d2ff2688b7 100644 --- a/webapp/packages/core-blocks/src/ObjectPropertyInfo/ObjectPropertyInfoForm/RenderField.tsx +++ b/webapp/packages/core-blocks/src/ObjectPropertyInfo/ObjectPropertyInfoForm/RenderField.tsx @@ -111,6 +111,7 @@ export const RenderField: React.FC = observer(function RenderF id={property.id} name={property.id!} state={state} + defaultChecked={defaultValue} title={property.description} disabled={disabled || readOnly} className={className} @@ -124,6 +125,7 @@ export const RenderField: React.FC = observer(function RenderF id={property.id} name={property.id!} checked={value} + defaultChecked={defaultValue} title={property.description} disabled={disabled || readOnly} className={className} @@ -175,6 +177,7 @@ export const RenderField: React.FC = observer(function RenderF title={property.description} name={property.id!} state={state} + defaultValue={defaultValue} description={description} disabled={disabled} readOnly={readOnly} @@ -194,6 +197,7 @@ export const RenderField: React.FC = observer(function RenderF title={property.description} name={property.id!} value={value} + defaultValue={defaultValue} description={description} disabled={disabled} readOnly={readOnly}