@abtnode/ux 1.16.14-beta-c308dc3b → 1.16.14-beta-963cb583

package/es/form/form-select-input.js

@@ -0,0 +1,184 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import Box from '@mui/material/Box';
+import CircularProgress from '@mui/material/CircularProgress';
+import CloseIcon from '@mui/icons-material/Close';
+import DoneIcon from '@mui/icons-material/Done';
+import IconButton from '@mui/material/IconButton';
+import MenuItem from '@mui/material/MenuItem';
+import Select from '@mui/material/Select';
+import Chip from '@mui/material/Chip';
+import { useTheme } from '@mui/material/styles';
+import Required from './required';
+import FormWrapper from './form-wrapper';
+import InputTriggers from './input-triggers';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+const ITEM_HEIGHT = 48;
+const ITEM_PADDING_TOP = 8;
+const MenuProps = {
+  PaperProps: {
+    style: {
+      maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
+      width: 250
+    }
+  }
+};
+const getStyles = (current, selected, theme) => {
+  return {
+    fontWeight: selected.indexOf(current) === -1 ? theme.typography.fontWeightRegular : theme.typography.fontWeightMedium
+  };
+};
+export default function FormSelectInput({
+  label,
+  disabled,
+  required,
+  initialValue,
+  onChange,
+  style,
+  onSubmit,
+  triggers,
+  options,
+  formatterBeforeSubmit,
+  ...rest
+}) {
+  const theme = useTheme();
+  const [editing, setEditing] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [defaultValue, setDefaultValue] = useState(initialValue);
+  const [value, setValue] = useState(defaultValue);
+  const handleSubmit = async () => {
+    setLoading(true);
+    try {
+      const shouldUpdate = await onSubmit(typeof formatterBeforeSubmit === 'function' ? formatterBeforeSubmit(value) : value);
+      if (shouldUpdate === false) {
+        setValue(defaultValue);
+      } else {
+        setValue(value);
+        setDefaultValue(value);
+      }
+    } catch (err) {
+      setValue(defaultValue);
+    } finally {
+      setLoading(false);
+      setEditing(false);
+    }
+  };
+  const onInputChange = e => {
+    let {
+      value: selected
+    } = e.target;
+    selected = typeof selected === 'string' ? selected.split(',') : selected;
+    setValue(selected);
+    onChange(selected);
+  };
+  const input = editing ? /*#__PURE__*/_jsx(Select, {
+    value: value,
+    onChange: onInputChange,
+    fullWidth: true,
+    multiple: true,
+    variant: "outlined",
+    margin: "dense",
+    renderValue: selected => /*#__PURE__*/_jsx(Box, {
+      sx: {
+        display: 'flex',
+        flexWrap: 'wrap'
+      },
+      children: selected.filter(x => options.some(o => o.code === x)).map(x => /*#__PURE__*/_jsx(Chip, {
+        label: options.find(o => o.code === x).name,
+        style: {
+          marginRight: 8
+        },
+        size: "small"
+      }, x))
+    }),
+    MenuProps: MenuProps,
+    ...rest,
+    children: options.map(x => /*#__PURE__*/_jsx(MenuItem, {
+      value: x.code,
+      style: getStyles(x.code, value, theme),
+      children: x.name
+    }, x.code))
+  }) : /*#__PURE__*/_jsx(Box, {
+    px: 1,
+    className: "form-item-input slot",
+    style: {
+      whiteSpace: 'pre-wrap'
+    },
+    children: value.filter(x => options.some(o => o.code === x)).map(x => /*#__PURE__*/_jsx(Chip, {
+      label: options.find(o => o.code === x).name,
+      style: {
+        marginRight: 8
+      },
+      size: "small"
+    }, x))
+  });
+  return /*#__PURE__*/_jsx(FormWrapper, {
+    className: "form",
+    style: style,
+    children: /*#__PURE__*/_jsxs(Box, {
+      className: "form-item",
+      children: [/*#__PURE__*/_jsxs(Box, {
+        className: "form-item-label",
+        children: [label, required && /*#__PURE__*/_jsx(Required, {})]
+      }), /*#__PURE__*/_jsxs(Box, {
+        className: "form-item-body",
+        children: [/*#__PURE__*/_jsx(Box, {
+          className: "form-item-input",
+          children: input
+        }), /*#__PURE__*/_jsx(Box, {
+          className: "form-item-action",
+          children: editing ? /*#__PURE__*/_jsxs(_Fragment, {
+            children: [/*#__PURE__*/_jsx(IconButton, {
+              "data-cy": "schema-form-item-confirm",
+              onClick: handleSubmit,
+              disabled: disabled || loading,
+              size: "large",
+              children: loading ? /*#__PURE__*/_jsx(CircularProgress, {
+                size: 24
+              }) : /*#__PURE__*/_jsx(DoneIcon, {})
+            }), /*#__PURE__*/_jsx(IconButton, {
+              "data-cy": "schema-form-item-cancel",
+              onClick: () => {
+                setValue(defaultValue);
+                setEditing(false);
+              },
+              disabled: disabled || loading,
+              size: "large",
+              children: /*#__PURE__*/_jsx(CloseIcon, {})
+            })]
+          }) : /*#__PURE__*/_jsx(InputTriggers, {
+            triggers: triggers,
+            onEnterEdit: () => setEditing(true),
+            disabled: disabled
+          })
+        })]
+      })]
+    })
+  });
+}
+FormSelectInput.propTypes = {
+  style: PropTypes.object,
+  onSubmit: PropTypes.func,
+  onChange: PropTypes.func,
+  label: PropTypes.string,
+  initialValue: PropTypes.string,
+  required: PropTypes.bool,
+  disabled: PropTypes.bool,
+  triggers: PropTypes.array,
+  options: PropTypes.array,
+  formatterBeforeSubmit: PropTypes.func
+};
+FormSelectInput.defaultProps = {
+  style: {},
+  onSubmit: () => {},
+  onChange: () => {},
+  label: '',
+  initialValue: '',
+  required: false,
+  disabled: false,
+  triggers: [],
+  options: [],
+  formatterBeforeSubmit: x => x.join(',')
+};

package/es/form/form-text-input.js

@@ -0,0 +1,178 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import Box from '@mui/material/Box';
+import TextField from '@mui/material/TextField';
+import CircularProgress from '@mui/material/CircularProgress';
+import CloseIcon from '@mui/icons-material/Close';
+import DoneIcon from '@mui/icons-material/Done';
+import IconButton from '@mui/material/IconButton';
+import Required from './required';
+import FormWrapper from './form-wrapper';
+import InputTriggers from './input-triggers';
+
+/**
+ * @param {*} value value 空时, null 表示未修改, '' 表示已修改
+ * @returns
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+const getDisplayValue = (value, secure, initialValue) => {
+  if (value === null && secure && initialValue) {
+    return '******';
+  }
+  if (!value) {
+    return '';
+  }
+  if (secure) {
+    return '******';
+  }
+  return value;
+};
+export default function FormTextInput({
+  label,
+  disabled,
+  required,
+  initialValue,
+  onChange,
+  placeholder,
+  style,
+  onSubmit,
+  secure,
+  triggers,
+  formatterBeforeSubmit,
+  ...rest
+}) {
+  const [editing, setEditing] = useState(false);
+  const [loading, setLoading] = useState(false);
+
+  // value 空时, null 表示未修改, '' 表示已修改
+  const [defaultValue, setDefaultValue] = useState(secure && initialValue === '__encrypted__' ? null : initialValue);
+  const [value, setValue] = useState(defaultValue);
+  const handleSubmit = async () => {
+    setLoading(true);
+    try {
+      const shouldUpdate = await onSubmit(value);
+      if (shouldUpdate === false) {
+        setValue(defaultValue);
+      } else {
+        let tmpValue = value;
+        if (typeof formatterBeforeSubmit === 'function') {
+          tmpValue = formatterBeforeSubmit(value);
+        }
+        setValue(tmpValue);
+        setDefaultValue(tmpValue);
+      }
+    } catch (err) {
+      setValue(defaultValue);
+    } finally {
+      setLoading(false);
+      setEditing(false);
+    }
+  };
+  const onInputChange = changeValue => {
+    setValue(changeValue);
+    onChange(changeValue);
+  };
+
+  // enter keydown
+  const handleKeydown = e => {
+    if (e.key === 'Enter') {
+      handleSubmit();
+    }
+  };
+  const input = editing ? /*#__PURE__*/_jsx(TextField, {
+    style: {
+      flex: 1
+    },
+    fullWidth: true,
+    value: value,
+    onChange: e => {
+      onInputChange(e.target.value);
+    },
+    autoFocus: true,
+    size: "small",
+    variant: "outlined",
+    placeholder: placeholder,
+    onKeyDown: handleKeydown,
+    disabled: disabled,
+    type: secure ? 'password' : 'text',
+    ...rest
+  }) : /*#__PURE__*/_jsx(Box, {
+    px: 1,
+    className: "form-item-input slot",
+    style: {
+      whiteSpace: 'pre-wrap'
+    },
+    children: getDisplayValue(value, secure, initialValue)
+  });
+  return /*#__PURE__*/_jsx(FormWrapper, {
+    className: "form",
+    style: style,
+    children: /*#__PURE__*/_jsxs(Box, {
+      className: "form-item",
+      children: [/*#__PURE__*/_jsxs(Box, {
+        className: "form-item-label",
+        children: [label, required && /*#__PURE__*/_jsx(Required, {})]
+      }), /*#__PURE__*/_jsxs(Box, {
+        className: "form-item-body",
+        children: [/*#__PURE__*/_jsx(Box, {
+          className: "form-item-input",
+          children: input
+        }), /*#__PURE__*/_jsx(Box, {
+          className: "form-item-action",
+          children: editing ? /*#__PURE__*/_jsxs(_Fragment, {
+            children: [/*#__PURE__*/_jsx(IconButton, {
+              "data-cy": "schema-form-item-confirm",
+              onClick: handleSubmit,
+              disabled: disabled || loading,
+              size: "large",
+              children: loading ? /*#__PURE__*/_jsx(CircularProgress, {
+                size: 24
+              }) : /*#__PURE__*/_jsx(DoneIcon, {})
+            }), /*#__PURE__*/_jsx(IconButton, {
+              "data-cy": "schema-form-item-cancel",
+              onClick: () => {
+                setValue(defaultValue);
+                setEditing(false);
+              },
+              disabled: disabled || loading,
+              size: "large",
+              children: /*#__PURE__*/_jsx(CloseIcon, {})
+            })]
+          }) : /*#__PURE__*/_jsx(InputTriggers, {
+            triggers: triggers,
+            onEnterEdit: () => setEditing(true),
+            disabled: disabled
+          })
+        })]
+      })]
+    })
+  });
+}
+FormTextInput.propTypes = {
+  style: PropTypes.object,
+  onSubmit: PropTypes.func,
+  onChange: PropTypes.func,
+  label: PropTypes.string,
+  initialValue: PropTypes.string,
+  placeholder: PropTypes.string,
+  required: PropTypes.bool,
+  disabled: PropTypes.bool,
+  secure: PropTypes.bool,
+  triggers: PropTypes.array,
+  formatterBeforeSubmit: PropTypes.func
+};
+FormTextInput.defaultProps = {
+  style: {},
+  onSubmit: () => {},
+  onChange: () => {},
+  label: '',
+  initialValue: '',
+  placeholder: '',
+  required: false,
+  disabled: false,
+  secure: false,
+  triggers: [],
+  formatterBeforeSubmit: null
+};

package/es/form/form-wrapper.js

@@ -0,0 +1,88 @@
+import styled from '@emotion/styled';
+import Box from '@mui/material/Box';
+export default styled(Box)`
+  width: 100%;
+  flex-grow: 1;
+  overflow-y: auto;
+  ${props => props.theme.breakpoints.down('md')} {
+    width: 100%;
+    flex-shrink: 0;
+    padding: 0 24px;
+    transform: translate(0, 0);
+    /* max-height: 60vh; */
+  }
+
+  .form-item {
+    width: 100%;
+    margin-bottom: 24px;
+    position: relative;
+    ${props => props.theme.breakpoints.down('md')} {
+      flex-wrap: wrap;
+      justify-content: space-between;
+      width: 100%;
+      flex-shrink: 0;
+    }
+  }
+
+  .form-item-body {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    margin-top: 4px;
+  }
+
+  .form-item-label {
+    line-height: 1.2;
+    font-size: 14px;
+    color: #888;
+    font-weight: bold;
+
+    ${props => props.theme.breakpoints.down('md')} {
+      text-align: left;
+      width: auto;
+      flex-grow: 1;
+    }
+  }
+
+  .form-item-input {
+    flex-grow: 1;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+
+    &.slot {
+      height: 40px;
+      line-height: 40px;
+      background: #f8f8f8;
+      font-size: 16px;
+
+      .MuiChip-root {
+        margin-top: -4px;
+      }
+    }
+
+    .MuiSelect-select {
+      padding: 8px;
+    }
+  }
+
+  .form-item-action {
+    // width: 100px;
+    text-align: left;
+    margin-left: 12px;
+    flex-shrink: 0;
+    ${props => props.theme.breakpoints.down('md')} {
+      width: auto;
+      margin-left: 0px;
+    }
+    .MuiIconButton-root {
+      padding: 8px;
+      svg {
+        fill: #888;
+      }
+      &.Mui-disabled {
+        opacity: 0.4;
+      }
+    }
+  }
+`;

package/es/form/input-triggers.js

@@ -0,0 +1,98 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import EditIcon from '@arcblock/icons/lib/EditIcon';
+import IconButton from '@mui/material/IconButton';
+import Button from '@mui/material/Button';
+import ButtonGroup from '@mui/material/ButtonGroup';
+import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
+import ClickAwayListener from '@mui/material/ClickAwayListener';
+import Paper from '@mui/material/Paper';
+import Popper from '@mui/material/Popper';
+import MenuItem from '@mui/material/MenuItem';
+import MenuList from '@mui/material/MenuList';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+export default function InputTriggers({
+  triggers,
+  onEnterEdit,
+  disabled
+}) {
+  const anchorRef = React.useRef(null);
+  const [open, setOpen] = React.useState(false);
+  const handleTriggerClick = cb => {
+    setOpen(false);
+    cb();
+  };
+  const handleToggle = () => {
+    setOpen(prevOpen => !prevOpen);
+  };
+  const handleClose = event => {
+    if (anchorRef.current && anchorRef.current.contains(event.target)) {
+      return;
+    }
+    setOpen(false);
+  };
+  if (triggers.length === 0) {
+    return /*#__PURE__*/_jsx(IconButton, {
+      "data-cy": "schema-form-item-edit",
+      onClick: onEnterEdit,
+      disabled: disabled,
+      size: "large",
+      children: /*#__PURE__*/_jsx(EditIcon, {})
+    });
+  }
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsxs(ButtonGroup, {
+      variant: "outlined",
+      ref: anchorRef,
+      "aria-label": "split button",
+      children: [/*#__PURE__*/_jsx(Button, {
+        "data-cy": "schema-form-item-edit",
+        onClick: onEnterEdit,
+        disabled: disabled,
+        size: "large",
+        children: /*#__PURE__*/_jsx(EditIcon, {})
+      }), /*#__PURE__*/_jsx(Button, {
+        size: "small",
+        "aria-controls": open ? 'split-button-menu' : undefined,
+        "aria-expanded": open ? 'true' : undefined,
+        onClick: handleToggle,
+        children: /*#__PURE__*/_jsx(ArrowDropDownIcon, {})
+      })]
+    }), /*#__PURE__*/_jsx(Popper, {
+      sx: {
+        zIndex: 9999
+      },
+      open: open,
+      anchorEl: anchorRef.current,
+      role: undefined,
+      placement: "bottom-end",
+      children: /*#__PURE__*/_jsx(Paper, {
+        children: /*#__PURE__*/_jsx(ClickAwayListener, {
+          onClickAway: handleClose,
+          children: /*#__PURE__*/_jsx(MenuList, {
+            id: "split-button-menu",
+            autoFocusItem: true,
+            children: triggers.map(x => /*#__PURE__*/_jsx(MenuItem, {
+              onClick: () => handleTriggerClick(x.handler),
+              children: x.title
+            }, x.key))
+          })
+        })
+      })
+    })]
+  });
+}
+InputTriggers.propTypes = {
+  triggers: PropTypes.arrayOf(PropTypes.shape({
+    key: PropTypes.string.isRequired,
+    title: PropTypes.string.isRequired,
+    handler: PropTypes.func.isRequired
+  })),
+  onEnterEdit: PropTypes.func.isRequired,
+  disabled: PropTypes.bool.isRequired
+};
+InputTriggers.defaultProps = {
+  triggers: []
+};

package/es/form/required.js

@@ -0,0 +1,8 @@
+import styled from '@emotion/styled';
+const Required = styled.span`
+  color: ${props => props.theme.palette.error.main};
+  &::before {
+    content: '*';
+  }
+`;
+export default Required;