@awsui/components-react/collection-preferences/utils.js

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

import React, { useState } from 'react';
import Checkbox from '../checkbox';
import ColumnLayout from '../column-layout';
import FormField from '../form-field';
import RadioGroup from '../radio-group';
import { useContainerBreakpoints } from '../internal/hooks/container-queries';
import styles from './styles.css.js';
export var copyPreferences = function (_a) {
    var pageSize = _a.pageSize, wrapLines = _a.wrapLines, visibleContent = _a.visibleContent, custom = _a.custom;
    return ({
        pageSize: pageSize,
        wrapLines: wrapLines,
        visibleContent: visibleContent,
        custom: custom
    });
};
export var mergePreferences = function (newPref, oldPref) { return ({
    pageSize: newPref.pageSize !== undefined ? newPref.pageSize : oldPref.pageSize,
    wrapLines: newPref.wrapLines !== undefined ? newPref.wrapLines : oldPref.wrapLines,
    visibleContent: newPref.visibleContent !== undefined ? newPref.visibleContent : oldPref.visibleContent,
    custom: newPref.custom !== undefined ? newPref.custom : oldPref.custom
}); };
export var ModalContentLayout = function (_a) {
    var left = _a.left, right = _a.right;
    var _b = useContainerBreakpoints(['xs']), breakpoint = _b[0], ref = _b[1];
    var smallContainer = breakpoint === 'default';
    if (smallContainer) {
        return (React.createElement("div", { ref: ref },
            React.createElement("div", null, left),
            React.createElement("div", { className: styles['second-column-small'] }, right)));
    }
    return (React.createElement("div", { ref: ref },
        React.createElement(ColumnLayout, { columns: 2, variant: "text-grid" },
            React.createElement("div", null, left),
            React.createElement("div", null, right))));
};
export var PageSizePreference = function (_a) {
    var title = _a.title, options = _a.options, value = _a.value, onChange = _a.onChange;
    return (React.createElement("div", { className: styles['page-size'] },
        React.createElement(FormField, { label: title, stretch: true, className: styles['page-size-form-field'] },
            React.createElement(RadioGroup, { className: styles['page-size-radio-group'], value: "" + value, items: options.map(function (_a) {
                    var label = _a.label, value = _a.value;
                    return ({ label: label, value: "" + value });
                }), onChange: function (_a) {
                    var detail = _a.detail;
                    return onChange(parseInt(detail.value, 10));
                } }))));
};
export var WrapLinesPreference = function (_a) {
    var label = _a.label, description = _a.description, value = _a.value, onChange = _a.onChange;
    return (React.createElement(Checkbox, { checked: !!value, description: description, onChange: function (_a) {
            var detail = _a.detail;
            return onChange(detail.checked);
        }, className: styles['wrap-lines'] }, label));
};
export var CustomPreference = function (_a) {
    var value = _a.value, customPreference = _a.customPreference, onChange = _a.onChange;
    var _b = useState(value), customState = _b[0], setCustomState = _b[1];
    if (customPreference) {
        return (React.createElement("div", { className: styles.custom }, customPreference(customState, function (value) {
            setCustomState(value);
            onChange(value);
        })));
    }
    return null;
};