@adaptabletools/adaptable
Version:
Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
46 lines (45 loc) • 3.5 kB
JavaScript
import Dialog from '../../../components/Dialog';
import { Box, Flex } from 'rebass';
import { StringExtensions } from '../../../Utilities/Extensions/StringExtensions';
import Input from '../../../components/Input';
import { useState } from 'react';
import SimpleButton from '../../../components/SimpleButton';
import * as React from 'react';
import FormLayout, { FormRow } from '../../../components/FormLayout';
import HelpBlock from '../../../components/HelpBlock';
import Radio from '../../../components/Radio';
export const AdaptablePopupTeamSharing = (props) => {
const { showPopup, onClose, onConfirm, header } = props;
const [config, setConfig] = useState({
description: '',
type: 'Snapshot',
});
return (React.createElement(React.Fragment, null,
React.createElement(Dialog, { modal: true, "data-name": "teamsharing-popup", isOpen: showPopup, onDismiss: onClose, autoFocus: false, showCloseButton: false, style: { minHeight: 'auto', maxWidth: '50%' } },
React.createElement(Flex, { flexDirection: "column" },
React.createElement(HelpBlock, { "data-name": "teamsharing-popup-description", margin: 2, mb: 2, p: 2, style: { fontSize: 'var(--ab-font-size-3)' } },
"Create a ",
header,
" which may be either:",
React.createElement("ul", null,
React.createElement("li", null,
React.createElement("strong", null, "Snapshot"),
": a one-off share of an exact copy of the current object"),
React.createElement("li", null,
React.createElement("strong", null, "Active"),
": a \"live\" share that is automatically updated with every local change"))),
React.createElement(FormLayout, { padding: 2 },
React.createElement(FormRow, { label: "Name: " },
React.createElement(Input, { "data-name": "teamsharing-entity-name", autoFocus: true, value: config.description, type: "string", width: 300, placeholder: "Enter text", onChange: (e) => setConfig({ ...config, description: e.target.value }) })),
React.createElement(FormRow, { label: "Share: " },
React.createElement(Flex, { flexDirection: "row" },
React.createElement(Radio, { "data-name": "teamsharing-entity-type-snapshot", checked: config.type === 'Snapshot', onChange: () => setConfig({ ...config, type: 'Snapshot' }) }, "Snapshot"),
' ',
React.createElement(Radio, { "data-name": "teamsharing-entity-type-active", marginLeft: 3, checked: config.type === 'Active', onChange: () => setConfig({ ...config, type: 'Active' }) }, "Active"),
' '))),
React.createElement(Box, { marginTop: 3 },
React.createElement(Flex, { padding: 2 },
React.createElement(SimpleButton, { "data-name": "cancel", tone: "neutral", variant: "raised", onClick: () => onClose() }, "Cancel"),
React.createElement("div", { style: { flex: 1 } }),
React.createElement(SimpleButton, { "data-name": "ok", tone: "accent", variant: "raised", disabled: StringExtensions.IsNullOrEmpty(config.description), onClick: () => onConfirm(config) }, "OK")))))));
};