@abtnode/ux 1.15.17 → 1.16.0-beta-b16cb035

package/lib/blocklet/component/line.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Line;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function Line(_ref) {
+  let {
+    depth
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+    ml: Math.max((depth - 1) * 2, 0),
+    sx: {
+      borderBottom: 1,
+      borderColor: 'rgba(0,0,0,0.12)'
+    }
+  }, "group-collapse-box");
+}
+Line.propTypes = {
+  depth: _propTypes.default.number
+};
+Line.defaultProps = {
+  depth: 1
+};

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

@@ -0,0 +1,218 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _ahooks = require("ahooks");
+var _lodash = require("lodash");
+var _react = require("react");
+var _react2 = require("@iconify/react");
+var _material = require("@mui/material");
+var _context = require("@arcblock/ux/lib/Locale/context");
+var _simpleSelect = _interopRequireDefault(require("./simple-select"));
+var _locales = _interopRequireDefault(require("../../../util/locales"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/* eslint-disable react/jsx-no-bind */
+
+const defaultLocale = 'en';
+function LocaleTabs(_ref) {
+  let {
+    sx,
+    onChange,
+    locales,
+    onRemoveLocale
+  } = _ref;
+  const {
+    t
+  } = (0, _context.useLocaleContext)();
+  const inputRef = (0, _react.useRef)();
+  const [addLocaleButtonEl, setAddLocaleButtonEl] = (0, _react.useState)(null);
+  const state = (0, _ahooks.useReactive)({
+    currentLocale: defaultLocale,
+    localeList: [],
+    inputLocale: '',
+    localeError: ''
+  });
+  const openChooseLocale = (0, _react.useMemo)(() => {
+    return !!addLocaleButtonEl;
+  }, [addLocaleButtonEl]);
+  const localeOptions = (0, _react.useMemo)(() => {
+    return Object.keys((0, _lodash.omit)(_locales.default, [...state.localeList, defaultLocale])).map(locale => ({
+      title: _locales.default[locale],
+      value: locale
+    }));
+  }, [state.localeList]);
+  (0, _react.useEffect)(() => {
+    onChange(state.currentLocale);
+  }, [onChange, state.currentLocale]);
+  (0, _react.useEffect)(() => {
+    state.localeList = [...locales];
+  }, [locales, state]);
+  (0, _ahooks.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() {
+    let locale = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+    const value = locale === null || locale === void 0 ? void 0 : locale.trim();
+    const checkResult = checkLocale(value);
+    if (checkResult !== true) {
+      state.localeError = checkResult;
+    } else {
+      state.localeError = '';
+    }
+    return checkResult;
+  }
+  function handleAddLocale() {
+    var _state$inputLocale;
+    const value = (_state$inputLocale = state.inputLocale) === null || _state$inputLocale === void 0 ? void 0 : _state$inputLocale.trim();
+    const checkResult = checkValidLocale(value);
+    if (checkResult === true) {
+      close();
+      state.localeList.push(value);
+      state.currentLocale = value;
+    }
+  }
+  function close() {
+    setAddLocaleButtonEl(null);
+    state.inputLocale = '';
+    state.localeError = '';
+  }
+  function handleRemoveLocale(e, locale) {
+    e.preventDefault();
+    e.stopPropagation();
+    state.localeList = (0, _lodash.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__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Tabs, {
+      sx: sx,
+      value: state.currentLocale,
+      onChange: (e, value) => {
+        state.currentLocale = value;
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tab, {
+        label: "Default (".concat(_locales.default[defaultLocale], ")"),
+        value: "en"
+      }), state.localeList.map(item => /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tab, {
+        sx: {
+          position: 'relative'
+        },
+        label: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+          children: [_locales.default[item], /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.IconButton, {
+            size: "small",
+            color: "inherit",
+            sx: {
+              position: 'absolute',
+              top: 0,
+              right: 0
+            },
+            onClick: e => {
+              handleRemoveLocale(e, item);
+            },
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Icon, {
+              icon: "mdi:close",
+              height: 14
+            })
+          })]
+        }),
+        value: item
+      }, item)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.IconButton, {
+        color: "primary",
+        disableFocusRipple: true,
+        sx: {
+          width: '48px'
+        },
+        onClick: e => {
+          setAddLocaleButtonEl(e.currentTarget);
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Icon, {
+          icon: "mdi:plus"
+        })
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Popover, {
+      open: openChooseLocale,
+      anchorEl: addLocaleButtonEl,
+      onClose: close,
+      anchorOrigin: {
+        vertical: 'bottom',
+        horizontal: 'left'
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+        sx: {
+          p: 2,
+          width: '270px'
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+          variant: "subtitle2",
+          children: t('navigation.form.localePlaceholder')
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+          mt: 1,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_simpleSelect.default, {
+            required: true,
+            fullWidth: true,
+            label: "Locale",
+            value: state.inputLocale,
+            options: localeOptions,
+            onChange: handleChangeLocale,
+            error: !!state.localeError,
+            helperText: state.localeError || ' '
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+          display: "flex",
+          justifyContent: "flex-end",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Button, {
+            size: "small",
+            variant: "contained",
+            onClick: handleAddLocale,
+            children: t('common.confirm')
+          })
+        })]
+      })
+    })]
+  });
+}
+LocaleTabs.propTypes = {
+  sx: _propTypes.default.any,
+  onChange: _propTypes.default.func,
+  onRemoveLocale: _propTypes.default.func,
+  locales: _propTypes.default.array
+};
+LocaleTabs.defaultProps = {
+  sx: null,
+  onChange: () => {},
+  onRemoveLocale: () => {},
+  locales: []
+};
+var _default = LocaleTabs;
+exports.default = _default;

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

@@ -0,0 +1,120 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = require("@iconify/react");
+var _material = require("@mui/material");
+var _react2 = require("react");
+var _context = require("@arcblock/ux/lib/Locale/context");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function NavigationActions(_ref) {
+  let {
+    className,
+    add,
+    edit,
+    toggle,
+    del,
+    data,
+    section
+  } = _ref;
+  const {
+    t
+  } = (0, _context.useLocaleContext)();
+  const isDisabled = ['yaml', 'tmpl'].includes(data.from);
+  const isUninstalled = /*#__PURE__*/(0, _react2.isValidElement)(data.subtitle);
+  function handleClick(e) {
+    e.preventDefault();
+    e.stopPropagation();
+  }
+  const handleClickAdd = (0, _react2.useCallback)(e => {
+    handleClick(e);
+    add(data);
+  }, [add, data]);
+  const handleClickEdit = (0, _react2.useCallback)(e => {
+    handleClick(e);
+    edit(data);
+  }, [edit, data]);
+  const handleClickToggle = (0, _react2.useCallback)(e => {
+    handleClick(e);
+    toggle(data);
+  }, [toggle, data]);
+  const handleClickDelete = (0, _react2.useCallback)(e => {
+    handleClick(e);
+    del(data);
+  }, [del, data]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: className,
+    children: [!data.parent && ['header', 'footer', 'dashboard'].includes(section) && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      title: isUninstalled ? t('navigation.action.noAddSub') : t('navigation.action.addSub'),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.IconButton, {
+        size: "small",
+        color: "success",
+        onClick: handleClickAdd,
+        disabled: isUninstalled,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Icon, {
+          icon: "mdi:plus-box-outline"
+        })
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      title: isUninstalled ? t('navigation.action.noEdit') : t('navigation.action.edit'),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.IconButton, {
+        size: "small",
+        color: "primary",
+        onClick: handleClickEdit,
+        disabled: isUninstalled,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Icon, {
+          icon: "mdi:pencil"
+        })
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.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__*/(0, _jsxRuntime.jsx)(_material.IconButton, {
+        size: "small",
+        color: "warning",
+        onClick: handleClickToggle,
+        disabled: isUninstalled,
+        children: data.visible === false ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Icon, {
+          icon: "mdi:eye-off-outline"
+        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Icon, {
+          icon: "mdi:eye-outline"
+        })
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      title: isDisabled && !isUninstalled ? t('navigation.action.noDel') : t('navigation.action.del'),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.IconButton, {
+        disabled: isDisabled && !isUninstalled,
+        size: "small",
+        color: "error",
+        onClick: handleClickDelete,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Icon, {
+          icon: "mdi:delete"
+        })
+      })
+    })]
+  });
+}
+NavigationActions.propTypes = {
+  data: _propTypes.default.object.isRequired,
+  className: _propTypes.default.string,
+  add: _propTypes.default.func,
+  edit: _propTypes.default.func,
+  toggle: _propTypes.default.func,
+  del: _propTypes.default.func,
+  section: _propTypes.default.string
+};
+NavigationActions.defaultProps = {
+  className: '',
+  add: () => {},
+  edit: () => {},
+  toggle: () => {},
+  del: () => {},
+  section: ''
+};
+var _default = NavigationActions;
+exports.default = _default;