Skip to content

Commit

Permalink
Migrate from fd-row in Simple List and MultiInput
Browse files Browse the repository at this point in the history
  • Loading branch information
@akucharska
akucharska committed Oct 16, 2023
1 parent f024935 commit 24f1f42
Show file tree
Hide file tree
Showing 4 changed files with 74 additions and 78 deletions.
120 changes: 60 additions & 60 deletions src/components/Extensibility/components-form/SimpleList.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { mapValues } from 'lodash';
import { PluginStack, useUIStore } from '@ui-schema/ui-schema';
import { Button, Icon } from '@ui5/webcomponents-react';
import { Button, Icon, FlexBox } from '@ui5/webcomponents-react';
import { FormLabel } from 'fundamental-react';
import classnames from 'classnames';
import { useTranslation } from 'react-i18next';
Expand Down Expand Up @@ -49,11 +49,7 @@ export function SimpleList({
});
};

const listClasses = classnames([
'text-array-input__list',
'fd-col',
'fd-col-md--12',
]);
const listClasses = classnames(['text-array-input__list', 'fd-col-md--12']);

const isLast = index => index === listSize;
const itemsSchema = schema.get('items');
Expand All @@ -73,37 +69,39 @@ export function SimpleList({
nestingLevel={nestingLevel}
{...props}
>
<div className="fd-row simple-list">
<div className="fd-col fd-col-md--3 fd-margin-bottom--sm form-field__label">
<FlexBox className="simple-list">
<div className="fd-col-md--3 fd-margin-bottom--sm form-field__label">
<Label required={required} tooltipContent={tExt(tooltipContent)}>
{tFromStoreKeys(storeKeys, schema)}
</Label>
</div>
<div className="fd-col fd-col-md--8 form-field multi-input extensibility">
<div className="fd-col-md--8 form-field multi-input extensibility">
<ul className={listClasses}>
{isObject && (
<li className="fd-row">
<div className="fd-col-md--11 list-entry">
<PluginStack
schema={itemsSchema}
widgets={{
...widgets,
types: mapValues(widgets.types, () => titleRenderer),
custom: {
...mapValues(widgets.custom, () => titleRenderer),
Null: () => '',
},
}}
parentSchema={schema}
storeKeys={storeKeys.push(0)}
level={level + 1}
nestingLevel={nestingLevel + 1}
schemaKeys={schemaKeys?.push('items')}
/>
</div>
<div className="fd-col fd-col-md--1">
<span className="item-action"></span>
</div>
<li className="">
<FlexBox>
<div className="fd-col-md--11 list-entry">
<PluginStack
schema={itemsSchema}
widgets={{
...widgets,
types: mapValues(widgets.types, () => titleRenderer),
custom: {
...mapValues(widgets.custom, () => titleRenderer),
Null: () => '',
},
}}
parentSchema={schema}
storeKeys={storeKeys.push(0)}
level={level + 1}
nestingLevel={nestingLevel + 1}
schemaKeys={schemaKeys?.push('items')}
/>
</div>
<div className="fd-col-md--1">
<span className="item-action"></span>
</div>
</FlexBox>
</li>
)}
{Array(listSize + 1)
Expand All @@ -113,33 +111,35 @@ export function SimpleList({

return (
<>
<li key={index} className="fd-row">
<div className="fd-col fd-col-md--11 list-entry">
<PluginStack
showValidity={showValidity}
schema={itemsSchema}
parentSchema={schema}
storeKeys={ownKeys}
level={level + 1}
schemaKeys={schemaKeys?.push('items')}
placeholder={tExt(schemaPlaceholder)}
isListItem
inputInfo={inputInfo}
/>
</div>
<div className="fd-col fd-col-md--1">
<span className="item-action">
{!isLast(index) && (
<Button
disabled={readOnly}
icon="delete"
design="Negative"
onClick={() => removeItem(index)}
ariaLabel={t('common.buttons.delete')}
/>
)}
</span>
</div>
<li key={index}>
<FlexBox>
<div className="fd-col-md--11 list-entry">
<PluginStack
showValidity={showValidity}
schema={itemsSchema}
parentSchema={schema}
storeKeys={ownKeys}
level={level + 1}
schemaKeys={schemaKeys?.push('items')}
placeholder={tExt(schemaPlaceholder)}
isListItem
inputInfo={inputInfo}
/>
</div>
<div className="fd-col-md--1">
<span className="item-action">
{!isLast(index) && (
<Button
disabled={readOnly}
icon="delete"
design="Negative"
onClick={() => removeItem(index)}
ariaLabel={t('common.buttons.delete')}
/>
)}
</span>
</div>
</FlexBox>
</li>
{isLast(index) && inputInfo && (
<p
Expand All @@ -156,7 +156,7 @@ export function SimpleList({
})}
</ul>
</div>
<div className="fd-col fd-col-md--1 tooltip-column tooltip-column--with-padding">
<div className="fd-col-md--1 tooltip-column tooltip-column--with-padding">
{tooltipContent && (
<Tooltip
className="has-tooltip"
Expand All @@ -167,7 +167,7 @@ export function SimpleList({
</Tooltip>
)}
</div>
</div>
</FlexBox>
</ResourceForm.CollapsibleSection>
);
}
4 changes: 0 additions & 4 deletions src/shared/ResourceForm/components/FormField.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,4 @@
.form-field__label {
padding: 12px 0 !important;
}

.action-button {
padding: 8px 0 !important;
}
}
3 changes: 2 additions & 1 deletion src/shared/ResourceForm/components/ResourceForm.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,8 @@
margin-top: -0.5rem;
}

.form-field {
.form-field,
.simple-list {
gap: 10px;
}

Expand Down
25 changes: 12 additions & 13 deletions src/shared/ResourceForm/fields/MultiInput.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React, { useEffect, useRef, useState, createRef } from 'react';
import { Button, Icon } from '@ui5/webcomponents-react';
import { useEffect, useRef, useState, createRef } from 'react';
import { Button, Icon, FlexBox } from '@ui5/webcomponents-react';
import classnames from 'classnames';
import { useTranslation } from 'react-i18next';

Expand Down Expand Up @@ -100,7 +100,6 @@ export function MultiInput({

const listClasses = classnames({
'text-array-input__list': true,
'fd-col': true,
'fd-col-md--8': !fullWidth && (title || label),
'fd-col-md--12': fullWidth && !(title || label),
});
Expand Down Expand Up @@ -165,9 +164,9 @@ export function MultiInput({
tooltipContent={sectionTooltipContent}
{...props}
>
<div className="fd-row form-field multi-input">
<FlexBox className="form-field multi-input">
{!fullWidth && (title || label) && (
<div className="fd-col fd-col-md--3 form-field__label">
<div className="fd-col-md--3 form-field__label">
<ResourceForm.Label
required={required}
tooltipContent={tooltipContent}
Expand All @@ -179,9 +178,9 @@ export function MultiInput({
<ul className={listClasses}>
{internalValue.map((entry, index) => (
<li key={index}>
<div className="fd-row">
<div className="fd-col fd-col-md--11">
<div className="fd-row">
<FlexBox alignItems="Center" style={{ gap: '10px' }}>
<div className="fd-col-md--11">
<FlexBox>
{noEdit && !isLast(index) && (
<span className="readonly-value">{entry}</span>
)}
Expand All @@ -190,9 +189,9 @@ export function MultiInput({
(input, inputIndex) =>
inputComponents[index][inputIndex],
)}
</div>
</FlexBox>
</div>
<div className="fd-col fd-col-md--1 action-button">
<div className="fd-col-md--1">
{!isLast(index) && (
<Button
disabled={readOnly}
Expand All @@ -207,7 +206,7 @@ export function MultiInput({
)}
{isLast(index) && newItemAction}
</div>
</div>
</FlexBox>
</li>
))}
{inputInfo && (
Expand All @@ -216,7 +215,7 @@ export function MultiInput({
</p>
)}
</ul>
<div className="fd-col fd-col-md--1 tooltip-column tooltip-column--with-padding">
<div className="fd-col-md--1 tooltip-column tooltip-column--with-padding">
{tooltipContent && (
<Tooltip className="has-tooltip" delay={0} content={tooltipContent}>
<Icon
Expand All @@ -227,7 +226,7 @@ export function MultiInput({
</Tooltip>
)}
</div>
</div>
</FlexBox>
</ResourceForm.CollapsibleSection>
);
}

0 comments on commit 24f1f42

Please sign in to comment.