@gridsuite/commons-ui 0.46.0 → 0.47.0

package/dist/components/FlatParameters/FlatParameters.js

@@ -0,0 +1,411 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import React, { useState, useCallback } from "react";
+import { List, ListItem, Tooltip, Typography, Divider, TextField, Select, MenuItem, IconButton, Autocomplete, Chip, Switch } from "@mui/material";
+import { Tune } from "@mui/icons-material";
+import { useIntl, FormattedMessage } from "react-intl";
+import MultipleSelectionDialog from "../MultipleSelectionDialog/MultipleSelectionDialog.js";
+const styles = {
+  paramList: {
+    width: "100%",
+    margin: 0
+  },
+  paramListItem: (theme) => ({
+    display: "flex",
+    justifyContent: "space-between",
+    gap: theme.spacing(2),
+    paddingLeft: 0,
+    paddingRight: 0
+  }),
+  paramName: {
+    fontWeight: "bold",
+    minWidth: "30%",
+    overflowWrap: "anywhere"
+  }
+};
+const FloatRE = /^-?\d*[.,]?\d*([eE]-?\d*)?$/;
+const IntegerRE = /^-?\d*$/;
+const ListRE = /^\[(.*)]$/;
+const sepRE = /[, ]/;
+function extractDefault(paramDescription) {
+  const d = paramDescription.defaultValue;
+  if (paramDescription.type === "BOOLEAN") {
+    return !!d;
+  }
+  if (paramDescription.type === "DOUBLE") {
+    return d - 0;
+  }
+  if (paramDescription.type === "INTEGER") {
+    return d - 0;
+  }
+  if (paramDescription.type === "STRING_LIST") {
+    if (Array.isArray(d)) {
+      return d;
+    }
+    const mo = ListRE.exec(d);
+    if ((mo == null ? void 0 : mo.length) > 1) {
+      return mo[1].split(sepRE).map((s) => s.trim()).filter((s) => !!s);
+    }
+    return [];
+  }
+  return d ?? null;
+}
+function longestCommonPrefix(stringList) {
+  if (!(stringList == null ? void 0 : stringList.length)) {
+    return "";
+  }
+  let prefix = stringList.reduce(
+    (acc, str) => str.length < acc.length ? str : acc
+  );
+  for (let str of stringList) {
+    while (str.slice(0, prefix.length) !== prefix) {
+      prefix = prefix.slice(0, -1);
+    }
+  }
+  return prefix;
+}
+const FlatParameters = ({
+  paramsAsArray,
+  initValues,
+  onChange,
+  variant = "outlined",
+  showSeparator = false,
+  selectionWithDialog = (param) => false
+}) => {
+  const intl = useIntl();
+  const longestPrefix = longestCommonPrefix(paramsAsArray.map((m) => m.name));
+  const lastDotIndex = longestPrefix.lastIndexOf(".");
+  const prefix = longestPrefix.slice(0, lastDotIndex + 1);
+  const [uncommitted, setUncommitted] = useState(null);
+  const [inEditionParam, setInEditionParam] = useState(null);
+  const [openSelector, setOpenSelector] = useState(false);
+  const getTranslatedValue = useCallback(
+    (prefix2, value) => {
+      return intl.formatMessage({
+        id: prefix2 + "." + value,
+        defaultMessage: value
+      });
+    },
+    [intl]
+  );
+  const getSelectionDialogName = useCallback(
+    (paramName) => {
+      const defaultMessage = intl.formatMessage({
+        id: paramName,
+        defaultMessage: paramName.slice(prefix.length)
+      });
+      return intl.formatMessage({
+        id: paramName + ".selectionDialog.name",
+        defaultMessage
+      });
+    },
+    [intl, prefix.length]
+  );
+  const sortPossibleValues = useCallback(
+    (prefix2, values) => {
+      if (values == null) {
+        return [];
+      }
+      return values.map((value) => {
+        return {
+          id: value,
+          message: getTranslatedValue(prefix2, value)
+        };
+      }).sort((a, b) => a.message.localeCompare(b.message));
+    },
+    [getTranslatedValue]
+  );
+  const onFieldChange = useCallback(
+    (value, param) => {
+      const paramName = param.name;
+      const isInEdition = inEditionParam === paramName;
+      if (isInEdition) {
+        setUncommitted(value);
+      }
+      if (onChange) {
+        if (param.type === "STRING_LIST") {
+          onChange(
+            paramName,
+            value ? value.toString() : null,
+            isInEdition
+          );
+        } else {
+          onChange(paramName, value, isInEdition);
+        }
+      }
+    },
+    [inEditionParam, onChange]
+  );
+  const onUncommitted = useCallback(
+    (param, inEdit) => {
+      if (inEdit) {
+        setInEditionParam(param.name);
+      } else {
+        if (onChange && uncommitted != null) {
+          if (!["INTEGER", "DOUBLE"].includes(param.type)) {
+            onChange(param.name, uncommitted, false);
+          } else if (uncommitted) {
+            onChange(param.name, uncommitted - 0, false);
+          } else {
+            onChange(param.name, extractDefault(param), false);
+          }
+        }
+        setInEditionParam(null);
+        setUncommitted(null);
+      }
+    },
+    [uncommitted, onChange]
+  );
+  function mixInitAndDefault(param) {
+    if (param.name === inEditionParam && uncommitted !== null) {
+      return uncommitted;
+    } else if (initValues && initValues.hasOwnProperty(param.name)) {
+      if (param.type !== "STRING_LIST") {
+        return initValues[param.name];
+      }
+      const valueList = initValues[param.name];
+      if (Array.isArray(valueList)) {
+        return valueList;
+      }
+      return valueList ? valueList.split(",").map((s) => s.trim()).filter((s) => !!s) : [];
+    } else {
+      return extractDefault(param);
+    }
+  }
+  const outputTransformFloatString = (value) => {
+    return (value == null ? void 0 : value.replace(",", ".")) || "";
+  };
+  const getStringListValue = (allValues, selectValues) => {
+    if (!selectValues || !selectValues.length) {
+      return intl.formatMessage({ id: "flat_parameters/none" });
+    }
+    if (selectValues.length === allValues.length) {
+      return intl.formatMessage({ id: "flat_parameters/all" });
+    }
+    return intl.formatMessage({ id: "flat_parameters/some" });
+  };
+  const renderField = (param) => {
+    const fieldValue = mixInitAndDefault(param);
+    switch (param.type) {
+      case "BOOLEAN":
+        return /* @__PURE__ */ jsx(
+          Switch,
+          {
+            checked: !!fieldValue,
+            onChange: (e) => onFieldChange(e.target.checked, param)
+          }
+        );
+      case "DOUBLE":
+        const err = isNaN(fieldValue) || typeof fieldValue !== "number" && !!fieldValue && isNaN(fieldValue - 0);
+        return /* @__PURE__ */ jsx(
+          TextField,
+          {
+            size: "small",
+            sx: { width: "50%" },
+            inputProps: { style: { textAlign: "right" } },
+            value: fieldValue,
+            onFocus: () => onUncommitted(param, true),
+            onBlur: () => onUncommitted(param, false),
+            onChange: (e) => {
+              const m = FloatRE.exec(e.target.value);
+              if (m) {
+                onFieldChange(
+                  outputTransformFloatString(e.target.value),
+                  param
+                );
+              }
+            },
+            error: err,
+            variant
+          }
+        );
+      case "INTEGER":
+        return /* @__PURE__ */ jsx(
+          TextField,
+          {
+            size: "small",
+            sx: { width: "50%" },
+            inputProps: { style: { textAlign: "right" } },
+            value: fieldValue,
+            onFocus: () => onUncommitted(param, true),
+            onBlur: () => onUncommitted(param, false),
+            onChange: (e) => {
+              const m = IntegerRE.exec(e.target.value);
+              if (m) {
+                onFieldChange(e.target.value, param);
+              }
+            },
+            variant
+          }
+        );
+      case "STRING_LIST":
+        if (param.possibleValues) {
+          const allOptions = sortPossibleValues(
+            param.name,
+            param.possibleValues
+          ).map(({ id }) => id);
+          const withDialog = selectionWithDialog(param);
+          if (withDialog) {
+            return /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(
+                TextField,
+                {
+                  value: getStringListValue(
+                    allOptions,
+                    fieldValue
+                  ),
+                  size: "small",
+                  variant,
+                  InputProps: {
+                    readOnly: true,
+                    endAdornment: /* @__PURE__ */ jsx(
+                      IconButton,
+                      {
+                        onClick: () => setOpenSelector(true),
+                        children: /* @__PURE__ */ jsx(Tune, {})
+                      }
+                    )
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                MultipleSelectionDialog,
+                {
+                  options: allOptions,
+                  titleId: getSelectionDialogName(param.name),
+                  open: openSelector,
+                  getOptionLabel: (option) => getTranslatedValue(param.name, option),
+                  selectedOptions: fieldValue,
+                  handleClose: () => setOpenSelector(false),
+                  handleValidate: (selectedOptions) => {
+                    onFieldChange(selectedOptions, param);
+                    setOpenSelector(false);
+                  }
+                }
+              )
+            ] });
+          }
+          return /* @__PURE__ */ jsx(
+            Autocomplete,
+            {
+              fullWidth: true,
+              multiple: true,
+              size: "small",
+              options: sortPossibleValues(
+                param.name,
+                param.possibleValues
+              ).map((v) => v.id),
+              getOptionLabel: (option) => getTranslatedValue(param.name, option),
+              onChange: (e, value) => onFieldChange(value, param),
+              value: fieldValue,
+              renderTags: (values, getTagProps) => {
+                return values.map((value, index) => /* @__PURE__ */ jsx(
+                  Chip,
+                  {
+                    label: getTranslatedValue(
+                      param.name,
+                      value
+                    ),
+                    ...getTagProps({ index })
+                  }
+                ));
+              },
+              renderInput: (inputProps) => /* @__PURE__ */ jsx(TextField, { ...inputProps, variant })
+            }
+          );
+        } else {
+          return /* @__PURE__ */ jsx(
+            Autocomplete,
+            {
+              multiple: true,
+              freeSolo: true,
+              autoSelect: true,
+              sx: { width: "50%" },
+              options: [],
+              size: "small",
+              onChange: (e, value) => onFieldChange(value, param),
+              value: fieldValue,
+              renderTags: (values, getTagProps) => {
+                return values.map((value, index) => /* @__PURE__ */ jsx(
+                  Chip,
+                  {
+                    id: "chip_" + value,
+                    size: "small",
+                    label: value,
+                    ...getTagProps({ index })
+                  }
+                ));
+              },
+              renderInput: (inputProps) => /* @__PURE__ */ jsx(TextField, { ...inputProps, variant })
+            }
+          );
+        }
+      case "STRING":
+        if (param.possibleValues) {
+          return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
+            Select,
+            {
+              labelId: param.name,
+              value: fieldValue ?? "",
+              onChange: (ev) => {
+                onFieldChange(ev.target.value, param);
+              },
+              size: "small",
+              sx: { minWidth: "4em" },
+              variant,
+              children: sortPossibleValues(
+                param.name,
+                param.possibleValues
+              ).map((value) => /* @__PURE__ */ jsx(MenuItem, { value: value.id, children: /* @__PURE__ */ jsx(Typography, { children: value.message }) }, value.id))
+            }
+          ) });
+        }
+      default:
+        return /* @__PURE__ */ jsx(
+          TextField,
+          {
+            sx: { width: "50%" },
+            size: "small",
+            value: fieldValue || "",
+            onFocus: () => onUncommitted(param, true),
+            onBlur: () => onUncommitted(param, false),
+            onChange: (e) => onFieldChange(e.target.value, param),
+            variant
+          }
+        );
+    }
+  };
+  return /* @__PURE__ */ jsx(List, { sx: styles.paramList, children: paramsAsArray.map((param, index) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+    /* @__PURE__ */ jsxs(ListItem, { sx: styles.paramListItem, children: [
+      /* @__PURE__ */ jsx(
+        Tooltip,
+        {
+          title: /* @__PURE__ */ jsx(
+            FormattedMessage,
+            {
+              id: param.name + ".desc",
+              defaultMessage: param.description
+            }
+          ),
+          enterDelay: 1200,
+          children: /* @__PURE__ */ jsx(Typography, { sx: styles.paramName, children: /* @__PURE__ */ jsx(
+            FormattedMessage,
+            {
+              id: param.name,
+              defaultMessage: param.name.slice(
+                prefix.length
+              )
+            }
+          ) })
+        },
+        param.name
+      ),
+      renderField(param)
+    ] }),
+    showSeparator && index !== paramsAsArray.length - 1 && /* @__PURE__ */ jsx(Divider, {})
+  ] }, param.name)) });
+};
+export {
+  FlatParameters,
+  FlatParameters as default,
+  extractDefault
+};

package/dist/components/Login/Login.js

@@ -0,0 +1,78 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import "react";
+import { Container, Box, Avatar, Typography, Button, Link } from "@mui/material";
+import { LockOutlined } from "@mui/icons-material";
+import { FormattedMessage } from "react-intl";
+const styles = {
+  paper: (theme) => ({
+    marginTop: theme.spacing(8),
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center"
+  }),
+  avatar: (theme) => ({
+    margin: theme.spacing(1),
+    backgroundColor: theme.palette.secondary.main
+  }),
+  submit: (theme) => ({
+    margin: theme.spacing(3, 0, 2),
+    borderRadius: "30px"
+  }),
+  logo: {
+    width: 64,
+    height: 64
+  }
+};
+const Login = ({ onLoginClick, disabled }) => {
+  return /* @__PURE__ */ jsxs(Container, { component: "main", maxWidth: "xs", children: [
+    /* @__PURE__ */ jsxs(Box, { sx: styles.paper, children: [
+      /* @__PURE__ */ jsx(Avatar, { sx: styles.avatar, children: /* @__PURE__ */ jsx(LockOutlined, {}) }),
+      /* @__PURE__ */ jsxs(Typography, { component: "h1", variant: "h5", children: [
+        /* @__PURE__ */ jsx(
+          FormattedMessage,
+          {
+            id: "login/login",
+            defaultMessage: "login"
+          }
+        ),
+        " ",
+        "?"
+      ] }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          disabled,
+          fullWidth: true,
+          variant: "contained",
+          sx: styles.submit,
+          onClick: onLoginClick,
+          children: /* @__PURE__ */ jsx(
+            FormattedMessage,
+            {
+              id: "login/connection",
+              defaultMessage: "connection"
+            }
+          )
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(Box, { mt: 2, children: /* @__PURE__ */ jsxs(
+      Typography,
+      {
+        variant: "body2",
+        color: "textSecondary",
+        align: "center",
+        children: [
+          "Copyright © ",
+          /* @__PURE__ */ jsx(Link, { color: "inherit", href: "#", children: "GridSuite" }),
+          " ",
+          (/* @__PURE__ */ new Date()).getFullYear(),
+          "."
+        ]
+      }
+    ) })
+  ] });
+};
+export {
+  Login as default
+};

package/dist/components/Login/Logout.js

@@ -0,0 +1,69 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import "react";
+import { Container, Box, Avatar, Typography, Button, Link } from "@mui/material";
+import { LogoutOutlined } from "@mui/icons-material";
+import { FormattedMessage } from "react-intl";
+const styles = {
+  paper: (theme) => ({
+    marginTop: theme.spacing(8),
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center"
+  }),
+  avatar: (theme) => ({
+    margin: theme.spacing(1),
+    backgroundColor: theme.palette.error.main
+  }),
+  submit: (theme) => ({
+    margin: theme.spacing(3, 0, 2),
+    borderRadius: "30px"
+  })
+};
+const Logout = ({ onLogoutClick, disabled }) => {
+  function Copyright() {
+    return /* @__PURE__ */ jsxs(Typography, { variant: "body2", color: "textSecondary", align: "center", children: [
+      "Copyright © ",
+      /* @__PURE__ */ jsx(Link, { color: "inherit", href: "#", children: "GridSuite" }),
+      " ",
+      (/* @__PURE__ */ new Date()).getFullYear(),
+      "."
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(Container, { component: "main", maxWidth: "xs", children: [
+    /* @__PURE__ */ jsxs(Box, { sx: styles.paper, children: [
+      /* @__PURE__ */ jsx(Avatar, { sx: styles.avatar, children: /* @__PURE__ */ jsx(LogoutOutlined, {}) }),
+      /* @__PURE__ */ jsxs(Typography, { component: "h1", variant: "h5", children: [
+        /* @__PURE__ */ jsx(
+          FormattedMessage,
+          {
+            id: "login/logout",
+            defaultMessage: "logout"
+          }
+        ),
+        " ",
+        "?"
+      ] }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          disabled,
+          fullWidth: true,
+          variant: "contained",
+          sx: styles.submit,
+          onClick: onLogoutClick,
+          children: /* @__PURE__ */ jsx(
+            FormattedMessage,
+            {
+              id: "login/logout",
+              defaultMessage: "logout"
+            }
+          )
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(Box, { mt: 2, children: /* @__PURE__ */ jsx(Copyright, {}) })
+  ] });
+};
+export {
+  Logout as default
+};

package/dist/components/MuiVirtualizedTable/ColumnHeader.js

@@ -0,0 +1,127 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import React, { useRef } from "react";
+import { ArrowUpward, ArrowDownward, FilterAltOutlined } from "@mui/icons-material";
+import { styled } from "@mui/system";
+import { Box } from "@mui/material";
+import { mergeSx } from "../../utils/styles.js";
+const styles = {
+  label: {
+    fontWeight: "bold",
+    fontSize: "0.875rem"
+    // to mimic TableCellRoot 'binding'
+  },
+  divFlex: {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    height: "100%"
+  },
+  divNum: {
+    flexDirection: "row-reverse",
+    textAlign: "right"
+  },
+  sortDiv: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center"
+  },
+  sortButton: {
+    fill: "currentcolor"
+  },
+  filterButton: {
+    stroke: "currentcolor"
+  },
+  filterTooLossy: (theme) => ({
+    stroke: theme.palette.secondary.main
+  }),
+  transparent: {
+    opacity: 0
+  },
+  hovered: {
+    opacity: 0.5
+  }
+};
+const SortButton = (props) => {
+  const sortRank = Math.abs(props.signedRank);
+  const visibilityStyle = (!props.signedRank || void 0) && (props.headerHovered ? styles.hovered : styles.transparent);
+  return /* @__PURE__ */ jsxs(Box, { sx: styles.sortDiv, onClick: props.onClick, children: [
+    props.signedRank >= 0 ? /* @__PURE__ */ jsx(ArrowUpward, { sx: visibilityStyle }) : /* @__PURE__ */ jsx(ArrowDownward, { sx: visibilityStyle }),
+    sortRank > 1 && !props.hovered && /* @__PURE__ */ jsx("sub", { children: sortRank })
+  ] });
+};
+const FilterButton = (props) => {
+  const visibilityStyle = !props.filterLevel && (props.headerHovered ? styles.hovered : styles.transparent);
+  return /* @__PURE__ */ jsx(
+    FilterAltOutlined,
+    {
+      onClick: props.onClick,
+      sx: mergeSx(
+        styles.filterButton,
+        props.filterLevel > 1 && styles.filterTooLossy,
+        visibilityStyle
+      )
+    }
+  );
+};
+const ColumnHeader = React.forwardRef((props, ref) => {
+  const {
+    className,
+    label,
+    numeric,
+    sortSignedRank,
+    filterLevel,
+    onSortClick,
+    onFilterClick,
+    onContextMenu,
+    style
+  } = props;
+  const [hovered, setHovered] = React.useState();
+  const onHover = React.useCallback((evt) => {
+    setHovered(evt.type === "mouseenter");
+  }, []);
+  const topmostDiv = useRef();
+  const handleFilterClick = React.useMemo(() => {
+    if (!onFilterClick) {
+      return void 0;
+    }
+    return (evt) => {
+      onFilterClick(evt, topmostDiv.current);
+    };
+  }, [onFilterClick]);
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      ref: topmostDiv,
+      onMouseEnter: onHover,
+      onMouseLeave: onHover,
+      sx: mergeSx(styles.divFlex, numeric && styles.divNum),
+      className,
+      style,
+      onContextMenu,
+      children: [
+        /* @__PURE__ */ jsx(Box, { ref, sx: styles.label, children: label }),
+        onSortClick && /* @__PURE__ */ jsx(
+          SortButton,
+          {
+            headerHovered: hovered,
+            onClick: onSortClick,
+            signedRank: sortSignedRank
+          }
+        ),
+        handleFilterClick && /* @__PURE__ */ jsx(
+          FilterButton,
+          {
+            headerHovered: hovered,
+            onClick: handleFilterClick,
+            filterLevel
+          }
+        )
+      ]
+    }
+  );
+});
+const ColumnHeader$1 = styled(ColumnHeader)({});
+export {
+  ColumnHeader,
+  ColumnHeader$1 as default
+};