define(["require", "exports", "react", "@fluentui/react"], function (require, exports, React, react_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    exports.DetailsListColumnResizeExample = void 0;
    function createTableData(rows, columns) {
        var data = [];
        var charCode = 'A'.charCodeAt(0);
        for (var r = 0; r < rows; r++) {
            var row = {};
            for (var c = 0; c < columns; c++) {
                row["" + c] = String.fromCharCode(charCode + r) + "-" + c;
            }
            data.push(row);
        }
        return data;
    }
    var DetailsListColumnResizeExample = function (props) {
        var _a = React.useState(1), rows = _a[0], setRowCount = _a[1];
        var _b = React.useState(4), columns = _b[0], setColumns = _b[1];
        var allTablesData = React.useMemo(function () {
            var temp = [];
            for (var x = 0; x < 2; x++) {
                temp.push(createTableData(rows, columns));
            }
            return temp;
        }, [columns, rows]);
        var tableColumns = React.useMemo(function () {
            var temp = [];
            for (var t = 0; t < 2; t++) {
                var tableCols = [];
                for (var c = 0; c < columns /* - t*/; c++) {
                    var colVal = "" + c;
                    tableCols.push({
                        key: colVal,
                        fieldName: colVal,
                        minWidth: 100,
                        maxWidth: 300,
                        name: colVal,
                        isResizable: true,
                    });
                }
                temp.push(tableCols);
            }
            return temp;
        }, [columns]);
        var adjustRows = function (modifier) {
            if (modifier === void 0) { modifier = 1; }
            return function (val) {
                var num = Number(val);
                console.log('num: ', num);
                setRowCount(num + modifier);
            };
        };
        var adjustColumns = function (modifier) {
            if (modifier === void 0) { modifier = 1; }
            return function (val) {
                var num = Number(val);
                console.log('num: ', num);
                setColumns(num + modifier);
            };
        };
        var validate = React.useCallback(function (val) { return val; }, []);
        return (React.createElement(React.Fragment, null,
            React.createElement(react_1.SpinButton, { value: '' + rows, label: 'Rows per table: ', min: 0, step: 1, onIncrement: adjustRows(), onDecrement: adjustRows(-1), onValidate: validate }),
            React.createElement(react_1.SpinButton, { value: '' + columns, label: 'Columns per table: ', min: 0, step: 1, onIncrement: adjustColumns(), onDecrement: adjustColumns(-1), onValidate: validate }),
            React.createElement("div", null,
                React.createElement(react_1.Text, { block: true, variant: "xLarge" }, 'Table without columns provided'),
                React.createElement(react_1.DetailsList, { items: allTablesData[0], constrainMode: react_1.ConstrainMode.unconstrained, layoutMode: react_1.DetailsListLayoutMode.justified, selectionMode: react_1.SelectionMode.none }),
                React.createElement(react_1.Separator, null),
                React.createElement(react_1.Text, { block: true, variant: "xLarge" }, 'Table with columns provided'),
                React.createElement(react_1.DetailsList, { items: allTablesData[1], columns: tableColumns[1], constrainMode: react_1.ConstrainMode.unconstrained, layoutMode: react_1.DetailsListLayoutMode.justified, selectionMode: react_1.SelectionMode.none }))));
    };
    exports.DetailsListColumnResizeExample = DetailsListColumnResizeExample;
});
//# sourceMappingURL=DetailsList.ColumnResize.Example.js.map