@awsui/components-react
Version:
AWS UI is a collection of [React](https://reactjs.org/) components that help create intuitive, responsive, and accessible user experiences for web applications. It is developed by Amazon Web Services (AWS). This work is available under the terms of the [A
46 lines (45 loc) • 3.3 kB
JavaScript
import { __assign, __rest } from "tslib";
import React, { useCallback } from 'react';
import { fireNonCancelableEvent } from '../internal/events';
import Box from '../box';
import Button from '../button';
import InternalFormField from '../form-field/internal';
import ColumnLayout from '../column-layout';
import InternalGrid from '../grid/internal';
import styles from './styles.css.js';
var Divider = function () { return React.createElement(Box, { className: styles.divider, padding: { top: 'l' } }); };
var Attribute = function (_a) {
var control = _a.control, props = __rest(_a, ["control"]);
return (React.createElement(InternalFormField, __assign({}, props, { className: styles.field, stretch: true }), control));
};
var GRID_DEFINITION = [{ colspan: { "default": 12, xs: 9 } }, { colspan: { "default": 12, xs: 3 } }];
export var Row = React.memo(function (_a) {
var breakpoint = _a.breakpoint, item = _a.item, definition = _a.definition, index = _a.index, removable = _a.removable, removeButtonText = _a.removeButtonText, removeButtonRefs = _a.removeButtonRefs, onRemoveButtonClick = _a.onRemoveButtonClick;
var isNarrowViewport = breakpoint === 'default' || breakpoint === 'xxs';
var isWideViewport = !isNarrowViewport;
var handleRemoveClick = useCallback(function () {
fireNonCancelableEvent(onRemoveButtonClick, { itemIndex: index });
}, [onRemoveButtonClick, index]);
var render = function (item, itemIndex, slot) {
return typeof slot === 'function' ? slot(item, itemIndex) : slot;
};
return (React.createElement(Box, { className: styles.row, margin: { bottom: 's' } },
React.createElement(InternalGrid, { breakpoint: breakpoint, gridDefinition: GRID_DEFINITION },
React.createElement(ColumnLayout, { className: styles['row-control'], columns: definition.length }, definition.map(function (_a, defIndex) {
var info = _a.info, label = _a.label, constraintText = _a.constraintText, errorText = _a.errorText, control = _a.control;
return (React.createElement(Attribute, { key: defIndex, label: label, info: info, constraintText: constraintText && render(item, index, constraintText), errorText: errorText && render(item, index, errorText), control: control && render(item, index, control), hideLabel: isWideViewport && index > 0 }));
})),
removable && (React.createElement(ButtonContainer, { disablePaddings: isNarrowViewport || index > 0 },
React.createElement(Button, { className: styles['remove-button'], formAction: "none", ref: function (ref) {
removeButtonRefs[index] = ref !== null && ref !== void 0 ? ref : undefined;
}, onClick: handleRemoveClick }, removeButtonText)))),
isNarrowViewport && React.createElement(Divider, null)));
});
var ButtonContainer = function (_a) {
var disablePaddings = _a.disablePaddings, children = _a.children;
return disablePaddings ? React.createElement(React.Fragment, null, children) : React.createElement("div", { className: styles['button-container'] }, children);
};
export var AdditionalInfo = function (_a) {
var children = _a.children;
return (React.createElement("div", { className: styles['additional-info'] }, children));
};