@abtnode/ux 1.16.14-beta-ab7f615e → 1.16.14-beta-cb53c14b

package/es/blocklet/component/line.js

@@ -0,0 +1,20 @@
+import PropTypes from 'prop-types';
+import Box from '@mui/material/Box';
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function Line({
+  depth
+}) {
+  return /*#__PURE__*/_jsx(Box, {
+    ml: Math.max((depth - 1) * 2, 0),
+    sx: {
+      borderBottom: 1,
+      borderColor: 'rgba(0,0,0,0.12)'
+    }
+  }, "group-collapse-box");
+}
+Line.propTypes = {
+  depth: PropTypes.number
+};
+Line.defaultProps = {
+  depth: 1
+};

package/es/blocklet/component/navigation/locale-tabs.js

@@ -0,0 +1,225 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+/* eslint-disable react/jsx-no-bind */
+import PropTypes from 'prop-types';
+import { useKeyPress, useReactive } from 'ahooks';
+import { omit, without } from 'lodash';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { Icon } from '@iconify/react';
+import Tabs from '@mui/material/Tabs';
+import Tab from '@mui/material/Tab';
+import IconButton from '@mui/material/IconButton';
+import Popover from '@mui/material/Popover';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import Button from '@mui/material/Button';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import SimpleSelect from './simple-select';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const defaultLocale = 'en';
+function LocaleTabs({
+  sx,
+  onAdd,
+  onChange,
+  locales,
+  localeMap,
+  onRemoveLocale
+}) {
+  const {
+    t
+  } = useLocaleContext();
+  const inputRef = useRef();
+  const [addLocaleButtonEl, setAddLocaleButtonEl] = useState(null);
+  const state = useReactive({
+    currentLocale: defaultLocale,
+    localeList: [],
+    inputLocale: '',
+    localeError: ''
+  });
+  const openChooseLocale = useMemo(() => {
+    return !!addLocaleButtonEl;
+  }, [addLocaleButtonEl]);
+  const showLocale = useMemo(() => {
+    if (locales.includes(state.currentLocale)) {
+      return state.currentLocale;
+    }
+    return defaultLocale;
+  }, [locales, state.currentLocale]);
+  const localeOptions = useMemo(() => {
+    return Object.keys(omit(localeMap, [...state.localeList, defaultLocale])).map(locale => ({
+      title: localeMap[locale],
+      value: locale
+    }));
+  }, [state.localeList]);
+  useEffect(() => {
+    state.localeList = [...locales];
+  }, [locales, state]);
+  useKeyPress('enter', () => {
+    // HACK: 必须加一个延时，否则无法正确关闭 chooseLocale 弹窗
+    setTimeout(() => {
+      handleAddLocale();
+    });
+  }, {
+    target: inputRef
+  });
+  function checkLocale(locale) {
+    if (!locale) {
+      return t('common.requiredErrorText', {
+        name: 'Locale'
+      });
+    }
+    if (locale === 'en' || state.localeList.includes(locale)) {
+      return t('navigation.form.localeExists', {
+        value: locale
+      });
+    }
+    return true;
+  }
+  function checkValidLocale(locale = '') {
+    const value = locale?.trim();
+    const checkResult = checkLocale(value);
+    if (checkResult !== true) {
+      state.localeError = checkResult;
+    } else {
+      state.localeError = '';
+    }
+    return checkResult;
+  }
+  function handleAddLocale() {
+    const value = state.inputLocale?.trim();
+    const checkResult = checkValidLocale(value);
+    if (checkResult === true) {
+      close();
+      state.localeList.push(value);
+      state.currentLocale = value;
+      onAdd(value);
+    }
+  }
+  function close() {
+    setAddLocaleButtonEl(null);
+    state.inputLocale = '';
+    state.localeError = '';
+  }
+  function handleRemoveLocale(e, locale) {
+    e.preventDefault();
+    e.stopPropagation();
+    state.localeList = without(state.localeList, locale);
+    onRemoveLocale(locale);
+    if (locale === state.currentLocale) {
+      state.currentLocale = defaultLocale;
+    }
+  }
+  function handleChangeLocale(e) {
+    const {
+      value
+    } = e.target;
+    checkValidLocale(value);
+    state.inputLocale = value;
+  }
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsxs(Tabs, {
+      sx: sx,
+      value: showLocale,
+      onChange: (e, value) => {
+        state.currentLocale = value;
+        onChange(value);
+      },
+      children: [/*#__PURE__*/_jsx(Tab, {
+        label: `Default (${localeMap[defaultLocale]})`,
+        value: "en"
+      }), state.localeList.map(item => /*#__PURE__*/_jsx(Tab, {
+        sx: {
+          position: 'relative'
+        },
+        label: /*#__PURE__*/_jsxs(_Fragment, {
+          children: [localeMap[item], /*#__PURE__*/_jsx(IconButton, {
+            size: "small",
+            color: "inherit",
+            sx: {
+              position: 'absolute',
+              top: 0,
+              right: 0
+            },
+            onClick: e => {
+              handleRemoveLocale(e, item);
+            },
+            children: /*#__PURE__*/_jsx(Icon, {
+              icon: "mdi:close",
+              height: 14
+            })
+          })]
+        }),
+        value: item
+      }, item)), /*#__PURE__*/_jsx(IconButton, {
+        color: "primary",
+        disableFocusRipple: true,
+        sx: {
+          width: '48px'
+        },
+        onClick: e => {
+          setAddLocaleButtonEl(e.currentTarget);
+        },
+        children: /*#__PURE__*/_jsx(Icon, {
+          icon: "mdi:plus"
+        })
+      })]
+    }), /*#__PURE__*/_jsx(Popover, {
+      open: openChooseLocale,
+      anchorEl: addLocaleButtonEl,
+      onClose: close,
+      anchorOrigin: {
+        vertical: 'bottom',
+        horizontal: 'left'
+      },
+      children: /*#__PURE__*/_jsxs(Box, {
+        sx: {
+          p: 2,
+          width: '270px'
+        },
+        children: [/*#__PURE__*/_jsx(Typography, {
+          variant: "subtitle2",
+          children: t('navigation.form.localePlaceholder')
+        }), /*#__PURE__*/_jsx(Box, {
+          mt: 1,
+          children: /*#__PURE__*/_jsx(SimpleSelect, {
+            required: true,
+            fullWidth: true,
+            label: "Locale",
+            value: state.inputLocale,
+            options: localeOptions,
+            onChange: handleChangeLocale,
+            error: !!state.localeError,
+            helperText: state.localeError || ' '
+          })
+        }), /*#__PURE__*/_jsx(Box, {
+          display: "flex",
+          justifyContent: "flex-end",
+          children: /*#__PURE__*/_jsx(Button, {
+            size: "small",
+            variant: "contained",
+            onClick: handleAddLocale,
+            children: t('common.confirm')
+          })
+        })]
+      })
+    })]
+  });
+}
+LocaleTabs.propTypes = {
+  sx: PropTypes.any,
+  onAdd: PropTypes.func,
+  onChange: PropTypes.func,
+  onRemoveLocale: PropTypes.func,
+  localeMap: PropTypes.object,
+  locales: PropTypes.array
+};
+LocaleTabs.defaultProps = {
+  sx: null,
+  onAdd: () => {},
+  onChange: () => {},
+  onRemoveLocale: () => {},
+  localeMap: {},
+  locales: []
+};
+export default LocaleTabs;

package/es/blocklet/component/navigation/navigation-actions.js

@@ -0,0 +1,112 @@
+import PropTypes from 'prop-types';
+import { Icon } from '@iconify/react';
+import IconButton from '@mui/material/IconButton';
+import { useCallback, isValidElement } from 'react';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+function NavigationActions({
+  className,
+  add,
+  edit,
+  toggle,
+  del,
+  data,
+  section
+}) {
+  const {
+    t
+  } = useLocaleContext();
+  const isDisabled = ['yaml', 'tmpl'].includes(data.from);
+  const isUninstalled = /*#__PURE__*/isValidElement(data.subtitle);
+  function handleClick(e) {
+    e.preventDefault();
+    e.stopPropagation();
+  }
+  const handleClickAdd = useCallback(e => {
+    handleClick(e);
+    add(data);
+  }, [add, data]);
+  const handleClickEdit = useCallback(e => {
+    handleClick(e);
+    edit(data);
+  }, [edit, data]);
+  const handleClickToggle = useCallback(e => {
+    handleClick(e);
+    toggle(data);
+  }, [toggle, data]);
+  const handleClickDelete = useCallback(e => {
+    handleClick(e);
+    del(data);
+  }, [del, data]);
+  return /*#__PURE__*/_jsxs("div", {
+    className: className,
+    children: [!data.parent && ['header', 'footer', 'dashboard'].includes(section) && /*#__PURE__*/_jsx("span", {
+      title: isUninstalled ? t('navigation.action.noAddSub') : t('navigation.action.addSub'),
+      children: /*#__PURE__*/_jsx(IconButton, {
+        size: "small",
+        color: "success",
+        onClick: handleClickAdd,
+        disabled: isUninstalled,
+        children: /*#__PURE__*/_jsx(Icon, {
+          icon: "mdi:plus-box-outline"
+        })
+      })
+    }), /*#__PURE__*/_jsx("span", {
+      title: isUninstalled ? t('navigation.action.noEdit') : t('navigation.action.edit'),
+      children: /*#__PURE__*/_jsx(IconButton, {
+        size: "small",
+        color: "primary",
+        onClick: handleClickEdit,
+        disabled: isUninstalled,
+        children: /*#__PURE__*/_jsx(Icon, {
+          icon: "mdi:pencil"
+        })
+      })
+    }), /*#__PURE__*/_jsx("span", {
+      title:
+      // eslint-disable-next-line no-nested-ternary
+      isUninstalled ? t('navigation.action.noEdit') : data.visible ? t('navigation.action.hide') : t('navigation.action.show'),
+      children: /*#__PURE__*/_jsx(IconButton, {
+        size: "small",
+        color: "warning",
+        onClick: handleClickToggle,
+        disabled: isUninstalled,
+        children: data.visible === false ? /*#__PURE__*/_jsx(Icon, {
+          icon: "mdi:eye-off-outline"
+        }) : /*#__PURE__*/_jsx(Icon, {
+          icon: "mdi:eye-outline"
+        })
+      })
+    }), /*#__PURE__*/_jsx("span", {
+      title: isDisabled && !isUninstalled ? t('navigation.action.noDel') : t('navigation.action.del'),
+      children: /*#__PURE__*/_jsx(IconButton, {
+        disabled: isDisabled && !isUninstalled,
+        size: "small",
+        color: "error",
+        onClick: handleClickDelete,
+        children: /*#__PURE__*/_jsx(Icon, {
+          icon: "mdi:delete"
+        })
+      })
+    })]
+  });
+}
+NavigationActions.propTypes = {
+  data: PropTypes.object.isRequired,
+  className: PropTypes.string,
+  add: PropTypes.func,
+  edit: PropTypes.func,
+  toggle: PropTypes.func,
+  del: PropTypes.func,
+  section: PropTypes.string
+};
+NavigationActions.defaultProps = {
+  className: '',
+  add: () => {},
+  edit: () => {},
+  toggle: () => {},
+  del: () => {},
+  section: ''
+};
+export default NavigationActions;