@awsui/components-react
Version:
On July 19th, 2022, we launched [Cloudscape Design System](https://cloudscape.design). Cloudscape is an evolution of AWS-UI. It consists of user interface guidelines, front-end components, design resources, and development tools for building intuitive, en
56 lines • 3.83 kB
JavaScript
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
import React, { useCallback } from 'react';
import clsx from 'clsx';
import { InternalButton } from '../button/internal';
import InternalFormField from '../form-field/internal';
import { useInternalI18n } from '../i18n/context';
import { fireNonCancelableEvent } from '../internal/events';
import { useUniqueId } from '../internal/hooks/use-unique-id';
import { getItemGridColumns, getRemoveButtonGridColumns, isRemoveButtonOnSameLine } from './utils';
import styles from './styles.css.js';
function render(item, itemIndex, slot) {
if (isSlotFunction(slot)) {
return slot(item, itemIndex);
}
return slot;
function isSlotFunction(slot) {
return typeof slot === 'function';
}
}
export const Row = React.memo(({ breakpoint, item, definition, layout, i18nStrings = {}, index, removable, removeButtonText, removeButtonRefs, customRowActions, onRemoveButtonClick, removeButtonAriaLabel, }) => {
var _a;
const i18n = useInternalI18n('attribute-editor');
const handleRemoveClick = useCallback(() => {
fireNonCancelableEvent(onRemoveButtonClick, { itemIndex: index });
}, [onRemoveButtonClick, index]);
const firstControlId = useUniqueId('first-control-id-');
const buttonRef = (ref) => {
removeButtonRefs[index] = ref !== null && ref !== void 0 ? ref : undefined;
};
let gridColumnStart = 1;
let gridColumnEnd = 1;
const removeButtonOnSameLine = isRemoveButtonOnSameLine(layout);
const customActions = customRowActions === null || customRowActions === void 0 ? void 0 : customRowActions({
item,
itemIndex: index,
ref: buttonRef,
breakpoint,
ownRow: !removeButtonOnSameLine,
});
return (React.createElement("div", { className: clsx(styles.row, layout.rows.length === 1 && styles['single-row']), role: "group", "aria-labelledby": `${firstControlId}-label ${firstControlId}` },
definition.map(({ info, label, constraintText, errorText, warningText, control }, defIndex) => {
({ gridColumnStart, gridColumnEnd } = getItemGridColumns(layout, defIndex));
return (React.createElement(InternalFormField, { key: defIndex, className: styles.field, __style: { gridColumnStart, gridColumnEnd }, label: label, info: info, constraintText: render(item, index, constraintText), errorText: render(item, index, errorText), warningText: render(item, index, warningText), stretch: true, i18nStrings: {
errorIconAriaLabel: i18nStrings.errorIconAriaLabel,
warningIconAriaLabel: i18nStrings.warningIconAriaLabel,
}, __hideLabel: index !== 0 && removeButtonOnSameLine, controlId: defIndex === 0 ? firstControlId : undefined }, render(item, index, control)));
}),
React.createElement("div", { className: clsx(styles['remove-button-container'], {
[styles['remove-button-field-padding']]: removeButtonOnSameLine && index === 0,
[styles['remove-button-own-row']]: !removeButtonOnSameLine,
}), style: Object.assign({}, getRemoveButtonGridColumns(layout, gridColumnEnd)) }, removable &&
(customActions !== undefined ? (customActions) : (React.createElement(InternalButton, { className: styles['remove-button'], formAction: "none", ref: buttonRef, ariaLabel: (_a = (removeButtonAriaLabel !== null && removeButtonAriaLabel !== void 0 ? removeButtonAriaLabel : i18nStrings.removeButtonAriaLabel)) === null || _a === void 0 ? void 0 : _a(item), onClick: handleRemoveClick }, i18n('removeButtonText', removeButtonText))))),
!removeButtonOnSameLine && React.createElement("div", { className: styles.divider })));
});
//# sourceMappingURL=row.js.map