@nethru/ui 2.1.0 → 2.1.2

package/base/AddableFormList.js

@@ -8,6 +8,7 @@ import { Fragment as _Fragment } from "react/jsx-runtime";
 const AddableFormList = /*#__PURE__*/forwardRef(({
   forms = [],
   renderForm,
+  renderButton = () => [true, true],
   onAdd,
   onRemove,
   readOnly,
@@ -33,7 +34,7 @@ const AddableFormList = /*#__PURE__*/forwardRef(({
           alignItems: "start",
           gap: 1,
           marginTop: `${margins[index > 0 ? 1 : 0]}px`,
-          children: [showRemoveButton && /*#__PURE__*/_jsx(Tooltip, {
+          children: [showRemoveButton && renderButton(form, index)[0] && /*#__PURE__*/_jsx(Tooltip, {
             title: "\uC0AD\uC81C",
             children: /*#__PURE__*/_jsx(IconButton, {
               variant: "menu",
@@ -46,7 +47,7 @@ const AddableFormList = /*#__PURE__*/forwardRef(({
                 }
               })
             })
-          }), showAddButton && /*#__PURE__*/_jsx(Tooltip, {
+          }), showAddButton && renderButton(form, index)[1] && /*#__PURE__*/_jsx(Tooltip, {
             title: "\uCD94\uAC00",
             children: /*#__PURE__*/_jsx(IconButton, {
               variant: "menu",

package/base/editor/Editor.js

@@ -7,6 +7,8 @@ import { nScript } from './nScript';
 import { Decoration, EditorView } from "@codemirror/view";
 import { RegExpCursor, SearchCursor } from '@codemirror/search';
 import { StateEffect, StateField } from "@codemirror/state";
+import { keymap as keyMapper } from '@codemirror/view';
+import { defaultKeymap } from '@codemirror/commands';
 import borderRadius from "../styles/borderRadius";
 import { blue, grey, red, yellow } from "../colors";
 import typography from "../styles/typography";
@@ -19,6 +21,7 @@ export default function Editor({
   error = false,
   helperText,
   basicSetup,
+  keymap = [],
   extensions = [],
   format = 'javascript',
   keyword,
@@ -139,8 +142,11 @@ export default function Editor({
         });
     }
   }, [format]);
+  const keymapExtension = useMemo(() => {
+    return [keyMapper.of(keymap), keyMapper.of(defaultKeymap)];
+  }, [keymap]);
   const extensionList = useMemo(() => {
-    const result = [languageExtension, EditorView.lineWrapping, highlight.extension];
+    const result = [languageExtension, EditorView.lineWrapping, highlight.extension, ...keymapExtension];
     if (onScroll) {
       result.push(EditorView.domEventHandlers({
         scroll(event, view) {
@@ -151,7 +157,7 @@ export default function Editor({
     }
     result.push(...extensions);
     return result;
-  }, [languageExtension, highlight.extension, extensions, onScroll]);
+  }, [languageExtension, highlight.extension, keymapExtension, extensions, onScroll]);
   const handleUpdate = viewUpdate => {
     setFocused(viewUpdate.view.hasFocus);
     if (onUpdate) onUpdate(viewUpdate);

package/base/index.js

@@ -42,15 +42,12 @@ export * from './frame/sidebar/SidebarContext';
 export { default as Error } from "./error/Error";
 export { default as HttpError } from "./error/HttpError";
 export { default as AppendableFormList } from "./deprecated/AppendableFormList";
-export { default as AvatarDropdown } from "./deprecated/AvatarDropdown";
 export { default as CircularProgress } from "./deprecated/CircularProgress";
 export { default as FormLabel } from "./deprecated/FormLabel";
-export { default as GroupSelect } from "./deprecated/GroupSelect";
 export { default as ListItem } from "./deprecated/ListItem";
 export { default as ListItemDivider } from "./deprecated/ListItemDivider";
 export { default as ListItemGrid } from "./deprecated/ListItemGrid";
 export { default as ListItemText } from "./deprecated/ListItemText";
 export { default as ShadowedSection } from "./deprecated/ShadowedSection";
-export { default as StatusChip } from "./deprecated/StatusChip";
 export { default as TabbedSection } from "./deprecated/TabbedSection";
 export { default as Tabs } from "./deprecated/Tabs";

package/base/styles/createTheme.js

@@ -22,6 +22,7 @@ import * as formLabel from "./mui/formLabel";
 import * as outlinedInput from "./mui/outlinedInput";
 import * as formHelperText from "./mui/formHelperText";
 import * as inputLabel from "./mui/inputLabel";
+import * as inputAdornment from "./mui/inputAdornment";
 import * as popover from "./mui/popover";
 import * as paper from "./mui/paper";
 import * as list from "./mui/list";
@@ -72,6 +73,7 @@ export default function createTheme() {
       MuiFormControlLabel: formControlLabel.styles,
       MuiFormLabel: formLabel.styles,
       MuiInputLabel: inputLabel.styles,
+      MuiInputAdornment: inputAdornment.styles,
       MuiOutlinedInput: outlinedInput.styles,
       MuiFormHelperText: formHelperText.styles,
       MuiPopover: popover.styles,

package/base/styles/mui/inputAdornment.js

@@ -0,0 +1,9 @@
+import typography from "../typography";
+export const styles = {
+  styleOverrides: {
+    root: {
+      fontFamily: typography.fontFamily,
+      ...typography.bodySmRegular
+    }
+  }
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nethru/ui",
-  "version": "2.1.0",
+  "version": "2.1.2",
   "main": "base/index.js",
   "files": [
     "/base"

package/base/deprecated/AvatarDropdown.js

@@ -1,80 +0,0 @@
-import { useMemo, useState } from 'react';
-import { Avatar, Box, IconButton } from '@mui/material';
-import Menu from '@mui/material/Menu';
-import MenuItem from '@mui/material/MenuItem';
-import ListItemIcon from '@mui/material/ListItemIcon';
-import Divider from '@mui/material/Divider';
-import LogoutRoundedIcon from '@mui/icons-material/LogoutRounded';
-import { red } from '@mui/material/colors';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-export default function AvatarDropdown({
-  name,
-  color,
-  bgcolor,
-  children,
-  onProfileClick,
-  onLogoutClick,
-  ...props
-}) {
-  const [anchorEl, setAnchorEl] = useState(null);
-  const open = Boolean(anchorEl);
-  const firstLetter = useMemo(() => {
-    return name && name.length > 0 ? name[0].toUpperCase() : "?";
-  }, [name]);
-  const handleClick = event => setAnchorEl(event.currentTarget);
-  const handleClose = () => setAnchorEl(null);
-  const styles = {
-    color: color ? color : '#fff',
-    bgcolor: bgcolor ? bgcolor : red[900],
-    width: 32,
-    height: 32,
-    fontSize: 16
-  };
-  return /*#__PURE__*/_jsxs(Box, {
-    ...props,
-    children: [/*#__PURE__*/_jsx(IconButton, {
-      onClick: handleClick,
-      size: "small",
-      sx: {
-        ml: 2
-      },
-      children: /*#__PURE__*/_jsx(Avatar, {
-        sx: styles,
-        children: firstLetter
-      })
-    }), /*#__PURE__*/_jsxs(Menu, {
-      anchorEl: anchorEl,
-      open: open,
-      onClose: handleClose,
-      onClick: handleClose,
-      sx: {
-        '.MuiButtonBase-root.MuiMenuItem-root': {
-          fontSize: 14
-        }
-      },
-      children: [/*#__PURE__*/_jsxs(MenuItem, {
-        onClick: onProfileClick,
-        children: [/*#__PURE__*/_jsx(ListItemIcon, {
-          children: /*#__PURE__*/_jsx(Avatar, {
-            sx: {
-              ...styles,
-              mr: 1,
-              fontSize: 13,
-              width: 22,
-              height: 22
-            },
-            children: firstLetter
-          })
-        }), name]
-      }), /*#__PURE__*/_jsx(Divider, {}), children, children && /*#__PURE__*/_jsx(Divider, {}), /*#__PURE__*/_jsxs(MenuItem, {
-        onClick: onLogoutClick,
-        children: [/*#__PURE__*/_jsx(ListItemIcon, {
-          children: /*#__PURE__*/_jsx(LogoutRoundedIcon, {
-            fontSize: "small"
-          })
-        }), "\uB85C\uADF8\uC544\uC6C3"]
-      })]
-    })]
-  });
-}

package/base/deprecated/GroupSelect.js

@@ -1,67 +0,0 @@
-import { Autocomplete, TextField } from "@mui/material";
-import Paper from "@mui/material/Paper";
-import { jsx as _jsx } from "react/jsx-runtime";
-export default function GroupSelect({
-  id,
-  options,
-  groupKey,
-  value,
-  onSelect,
-  placeholder,
-  disableClearable = false,
-  sx,
-  ...props
-}) {
-  const styles = {
-    '.MuiInputLabel-root, .MuiInputBase-input': {
-      fontSize: '0.875rem'
-    }
-  };
-  const paperStyles = {
-    '& .MuiAutocomplete-groupLabel': {
-      fontSize: '0.8rem',
-      paddingTop: 0,
-      paddingBottom: 0
-    },
-    '& .MuiAutocomplete-option': {
-      color: '#333',
-      fontSize: '0.875rem',
-      paddingTop: '3px',
-      paddingBottom: '3px'
-    },
-    '& .MuiAutocomplete-noOptions': {
-      fontSize: '0.8rem'
-    }
-  };
-  const handleSelect = (event, value, reason) => {
-    if (reason !== 'selectOption') return;
-    if (onSelect) onSelect(id, value);
-  };
-  function CustomPaper(props) {
-    return /*#__PURE__*/_jsx(Paper, {
-      ...props,
-      sx: paperStyles
-    });
-  }
-  return /*#__PURE__*/_jsx(Autocomplete, {
-    id: id,
-    size: "small",
-    options: options,
-    groupBy: option => option[groupKey],
-    value: value,
-    onChange: handleSelect,
-    blurOnSelect: true,
-    disableClearable: disableClearable,
-    noOptionsText: "\uC77C\uCE58\uD558\uB294 \uD56D\uBAA9\uC774 \uC5C6\uC2B5\uB2C8\uB2E4",
-    PaperComponent: CustomPaper,
-    renderInput: params => /*#__PURE__*/_jsx(TextField, {
-      ...params,
-      label: placeholder
-    }),
-    sx: {
-      ...sx,
-      ...styles
-    },
-    ...props
-  });
-}

package/base/deprecated/StatusChip.js

@@ -1,34 +0,0 @@
-import { Chip } from "@mui/material";
-import CheckCircleIcon from "@mui/icons-material/CheckCircle";
-import ErrorIcon from "@mui/icons-material/Error";
-import { jsx as _jsx } from "react/jsx-runtime";
-export default function StatusChip({
-  id,
-  label,
-  status,
-  onOperate,
-  sx,
-  ...props
-}) {
-  const styles = {
-    '&': {
-      bgcolor: status === 'normal' ? '#4caf50' : '#fff'
-    },
-    '.MuiSvgIcon-root.MuiChip-deleteIcon': {
-      cursor: onOperate ? 'pointer' : 'default'
-    }
-  };
-  return /*#__PURE__*/_jsx(Chip, {
-    id: id,
-    label: label,
-    variant: status === 'normal' ? 'filled' : 'outlined',
-    color: status === 'normal' ? 'success' : 'default',
-    deleteIcon: status === 'normal' ? /*#__PURE__*/_jsx(CheckCircleIcon, {}) : /*#__PURE__*/_jsx(ErrorIcon, {}),
-    onDelete: _ => onOperate && onOperate(id, status),
-    sx: {
-      ...sx,
-      ...styles
-    },
-    ...props
-  });
-}