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

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

@@ -0,0 +1,607 @@
+import PropTypes from 'prop-types';
+import Button from '@arcblock/ux/lib/Button';
+import Dialog from '@arcblock/ux/lib/Dialog';
+import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
+import Autocomplete from '@mui/material/Autocomplete';
+import Box from '@mui/material/Box';
+import FormControl from '@mui/material/FormControl';
+import IconButton from '@mui/material/IconButton';
+import InputAdornment from '@mui/material/InputAdornment';
+import TextField from '@mui/material/TextField';
+import Typography from '@mui/material/Typography';
+import { useAsyncEffect, useBoolean, useReactive } from 'ahooks';
+import omit from 'lodash/omit';
+import pick from 'lodash/pick';
+import values from 'lodash/values';
+import without from 'lodash/without';
+import isEmpty from 'lodash/isEmpty';
+import isString from 'lodash/isString';
+import isObject from 'lodash/isObject';
+import cloneDeep from 'lodash/cloneDeep';
+import Toast from '@arcblock/ux/lib/Toast';
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { Controller, useForm } from 'react-hook-form';
+import { Icon, loadIcon } from '@iconify/react';
+import { isMatchSection, checkLink, flattenNavigation } from '@blocklet/meta/lib/parse-navigation-from-blocklet';
+import urljoin from 'url-join';
+import { withoutTrailingSlash } from 'ufo/dist/index.mjs';
+import isAbsoluteUrl from 'is-absolute-url';
+import { SUPPORTED_LANGUAGES } from '@blocklet/constant';
+import LocaleTabs from './locale-tabs';
+import SimpleSelect from './simple-select';
+import { useTeamContext } from '../../../contexts/team';
+import { useBlockletContext } from '../../../contexts/blocklet';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const MAX_TITLE_LENGTH = 24;
+const defaultType = 'add';
+const defaultLocale = 'en';
+const initialFormState = {
+  title: {
+    [defaultLocale]: ''
+  },
+  link: {
+    [defaultLocale]: ''
+  }
+};
+function IconSuffix({
+  icon
+}) {
+  const [loaded, setLoaded] = useState(false);
+  useAsyncEffect(async () => {
+    setLoaded(false);
+    await loadIcon(icon);
+    setLoaded(true);
+  }, [icon]);
+  if (icon) {
+    if (loaded) {
+      return /*#__PURE__*/_jsx(Icon, {
+        icon: icon
+      });
+    }
+    return /*#__PURE__*/_jsx(Icon, {
+      color: "#f06f6e",
+      icon: "ic:baseline-error"
+    });
+  }
+  return /*#__PURE__*/_jsx(Icon, {
+    icon: "codicon:blank"
+  });
+}
+IconSuffix.propTypes = {
+  icon: PropTypes.string.isRequired
+};
+const NavigationDialog = /*#__PURE__*/forwardRef(function NavigationDialog({
+  section,
+  components,
+  rawNavigations
+}, ref) {
+  const {
+    roles
+  } = useTeamContext();
+  const {
+    t,
+    locale
+  } = useLocaleContext();
+  const {
+    blocklet
+  } = useBlockletContext();
+  const config = blocklet.environments.find(x => x.key === 'BLOCKLET_APP_LANGUAGES');
+  const languages = config ? config.value.split(',') : ['en', 'zh'];
+  const localeMap = languages.filter(x => SUPPORTED_LANGUAGES[x]).reduce((acc, x) => {
+    acc[x] = SUPPORTED_LANGUAGES[x].nativeName;
+    return acc;
+  }, {});
+  const saveFn = useRef(() => {});
+  const [show, {
+    setFalse,
+    setTrue
+  }] = useBoolean(false);
+  const state = useReactive({
+    isRoot: true,
+    type: defaultType,
+    linkDisabled: false,
+    locale: defaultLocale,
+    formState: cloneDeep(initialFormState),
+    get localeList() {
+      // eslint-disable-next-line react/no-this-in-sfc
+      return without(Object.keys(this.formState.title), defaultLocale);
+    }
+  });
+  const {
+    handleSubmit,
+    control,
+    watch,
+    setValue,
+    clearErrors,
+    formState: {
+      errors
+    }
+  } = useForm({
+    mode: 'onChange',
+    defaultValues: {
+      id: undefined,
+      title: undefined,
+      icon: undefined,
+      link: undefined,
+      component: undefined,
+      parent: undefined,
+      role: []
+    }
+  });
+  useEffect(() => {
+    setValue('title', state.formState.title[state.locale]);
+    setValue('link', state.formState.link[state.locale]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [setValue, state.locale, show]);
+  const watchComponent = watch('component');
+  const watchTitle = watch('title');
+  const watchLink = watch('link');
+  const watchIcon = watch('icon');
+  const watchParent = watch('parent');
+  useEffect(() => {
+    state.formState.title[state.locale] = watchTitle;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [watchTitle]);
+  useEffect(() => {
+    state.formState.link[state.locale] = watchLink;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [watchLink]);
+  const selectedOption = useMemo(() => {
+    const parentData = rawNavigations.find(item => {
+      if (watchComponent) {
+        const findComponent = components.find(x => x.name === watchComponent);
+        return findComponent.did === item.id;
+      }
+      return item.id === watchParent;
+    });
+    return parentData;
+  }, [components, rawNavigations, watchComponent, watchParent]);
+  const linkPrefix = useMemo(() => {
+    if (selectedOption?.component) {
+      const findComponent = components.find(item => item.name === selectedOption.component);
+      const {
+        link
+      } = findComponent || {};
+      const stringLink = isObject(link) ? link[state.locale] : link;
+      if (watchComponent) {
+        return withoutTrailingSlash(stringLink);
+      }
+      const selectedLink = isObject(selectedOption.link) ? selectedOption.link[state.locale] : selectedOption.link;
+      return withoutTrailingSlash(urljoin(stringLink, selectedLink || '/'));
+    }
+    return null;
+  }, [components, state.locale, selectedOption, watchComponent]);
+  const autocompleteOptions = useMemo(() => {
+    const {
+      component
+    } = selectedOption || {};
+    const componentBlocklet = components.find(item => item.name === component);
+    const {
+      navigation = []
+    } = componentBlocklet || {};
+    const flattenedNavigation = flattenNavigation(navigation, {
+      transform(item, parent) {
+        if (parent?.section) {
+          item.section = item.section || parent.section;
+        }
+        return item;
+      }
+    });
+    return flattenedNavigation.filter(item => item.link)
+    // 在指定 section 下只展示能够展示的 navigation
+    .filter(item => isMatchSection(item.section, section)).map(item => {
+      return {
+        label: item.link,
+        title: item.title[locale] || item.title
+      };
+    });
+  }, [selectedOption, components, section, locale]);
+  const name = useMemo(() => {
+    const typeMap = {
+      add: t('common.create'),
+      edit: t('common.edit')
+    };
+    const typeName = typeMap[state.type];
+    if (typeName) {
+      return `${typeName} ${t('navigation.navigation')}`;
+    }
+    return '--';
+  }, [state.type, t]);
+  const reset = useCallback(() => {
+    state.isRoot = true;
+    state.locale = defaultLocale;
+    state.type = defaultType;
+    state.linkDisabled = false;
+    saveFn.current = () => {};
+    setValue('id', undefined);
+    setValue('icon', undefined);
+    setValue('title', undefined);
+    setValue('link', undefined);
+    setValue('component', undefined);
+    setValue('parent', undefined);
+    setValue('role', []);
+    state.formState = cloneDeep(initialFormState);
+    clearErrors();
+  }, [clearErrors, setValue, state]);
+  const patchFormValues = useCallback((params = {}) => {
+    if (state.localeList.length > 0) {
+      if (new Set(values(state.formState.title)).size > 1) {
+        params.title = state.formState.title;
+      }
+      if (new Set(values(state.formState.link)).size > 1) {
+        params.link = state.formState.link;
+      }
+    }
+    if (isEmpty(params.role)) {
+      params.role = undefined;
+    }
+    return params;
+  }, [state.formState.link, state.formState.title, state.localeList]);
+  const close = useCallback(() => {
+    setFalse();
+    setTimeout(() => {
+      reset();
+    });
+  }, [reset, setFalse]);
+  const add = useCallback(({
+    parent
+  } = {}, cb = () => {}) => {
+    state.type = 'add';
+    state.isRoot = !parent;
+    setValue('parent', parent?.id);
+    saveFn.current = params => {
+      cb(close, params);
+    };
+    setTrue();
+  }, [close, setTrue, setValue, state]);
+  const edit = useCallback((data = {}, cb = () => {}) => {
+    const {
+      id,
+      title,
+      icon,
+      link,
+      parent,
+      component,
+      role = []
+    } = data;
+    setValue('id', id);
+    setValue('icon', icon);
+    if (data.from === 'tmpl') {
+      state.linkDisabled = true;
+    }
+    if (isString(title)) {
+      state.formState.title = state.localeList.reduce((resData, localeItem) => {
+        resData[localeItem] = title;
+        return resData;
+      }, {
+        [defaultLocale]: title
+      });
+    } else if (isObject(title)) {
+      state.formState.title = cloneDeep(title);
+    } else {
+      state.formState.title = {};
+    }
+    if (isString(link)) {
+      state.formState.link = state.localeList.reduce((resData, localeItem) => {
+        resData[localeItem] = link;
+        return resData;
+      }, {
+        [defaultLocale]: link
+      });
+    } else if (isObject(link)) {
+      state.formState.link = cloneDeep(link);
+    } else {
+      state.formState.link = {};
+    }
+    setValue('component', component);
+    setValue('parent', parent);
+    setValue('role', role || []);
+    setTrue();
+    state.type = 'edit';
+    state.isRoot = !parent;
+    saveFn.current = params => {
+      const pickData = pick(params, ['id', 'title', 'icon', 'link', 'role']);
+      cb(close, pickData);
+    };
+  }, [close, setTrue, setValue, state]);
+  useImperativeHandle(ref, () => {
+    return {
+      add,
+      edit,
+      close
+    };
+  }, [add, close, edit]);
+  function validTitle(raw) {
+    const value = raw?.trim();
+    if (!value) return t('common.requiredErrorText', {
+      name: t('navigation.form.title')
+    });
+    if (value.length > MAX_TITLE_LENGTH) return t('navigation.form.titleTooLong', {
+      len: MAX_TITLE_LENGTH
+    });
+    return true;
+  }
+  async function validIcon(raw) {
+    const value = raw?.trim();
+    if (value) {
+      try {
+        await loadIcon(value);
+      } catch {
+        return t('navigation.form.invalidIcon');
+      }
+    }
+    return true;
+  }
+  function validLink(raw) {
+    const value = raw?.trim();
+    if (!value) {
+      if (!state.isRoot) {
+        return t('common.requiredErrorText', {
+          name: t('navigation.form.link')
+        });
+      }
+      return true;
+    }
+    if (!checkLink(value)) {
+      return t('navigation.form.invalidLink');
+    }
+    return true;
+  }
+  const handleChangeLocale = useCallback(currentLocale => {
+    state.locale = currentLocale;
+    if (!state.formState.title[currentLocale]) {
+      state.formState.title[currentLocale] = '';
+    }
+    if (!state.formState.link[currentLocale]) {
+      state.formState.link[currentLocale] = '';
+    }
+    setTimeout(() => {
+      clearErrors();
+    });
+  }, [clearErrors, state]);
+  const checkFormState = useCallback(() => {
+    const {
+      title,
+      link
+    } = state.formState;
+    for (const key of Object.keys(title)) {
+      const validRes = validTitle(title[key]);
+      if (validRes !== true) {
+        return validRes;
+      }
+    }
+    for (const key of Object.keys(link)) {
+      const validRes = validLink(link[key]);
+      if (validRes !== true) {
+        return validRes;
+      }
+    }
+    return true;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [state.formState]);
+  const handleFormSubmit = useCallback(params => {
+    const checkRes = checkFormState();
+    if (checkRes === true) {
+      saveFn.current(patchFormValues(params));
+    } else {
+      Toast.error(checkRes);
+    }
+  }, [checkFormState, patchFormValues]);
+  const handleRemoveLocale = useCallback(currentLocale => {
+    state.formState.title = omit(state.formState.title, currentLocale);
+    state.formState.link = omit(state.formState.link, currentLocale);
+  }, [state.formState]);
+  const handleAddLocale = useCallback(newLocale => {
+    state.locale = newLocale;
+    state.formState.title[newLocale] = state.formState.title?.[defaultLocale];
+    state.formState.link[newLocale] = state.formState.link?.[defaultLocale];
+    setTimeout(() => {
+      clearErrors();
+    });
+  }, [clearErrors, state]);
+  return /*#__PURE__*/_jsxs(Dialog, {
+    open: show,
+    title: name,
+    onClose: close,
+    actions: /*#__PURE__*/_jsx(Button, {
+      onClick: handleSubmit(handleFormSubmit),
+      color: "primary",
+      autoFocus: true,
+      variant: "contained",
+      children: t('common.confirm')
+    }),
+    children: [/*#__PURE__*/_jsx(LocaleTabs, {
+      sx: {
+        mb: 1
+      },
+      onAdd: handleAddLocale,
+      onChange: handleChangeLocale,
+      onRemoveLocale: handleRemoveLocale,
+      localeMap: localeMap,
+      locales: state.localeList
+    }), /*#__PURE__*/_jsxs("form", {
+      noValidate: true,
+      autoComplete: "off",
+      children: [/*#__PURE__*/_jsx(Controller, {
+        name: "title",
+        control: control,
+        rules: {
+          validate: validTitle
+        },
+        render: ({
+          field
+        }) => /*#__PURE__*/_jsx(TextField, {
+          fullWidth: true,
+          variant: "outlined",
+          margin: "dense",
+          required: true,
+          placeholder: t('navigation.form.titlePlaceholder'),
+          label: t('navigation.form.title'),
+          disabled: state.isEdit,
+          error: !!errors?.title?.message,
+          helperText: errors?.title?.message || ' ',
+          ...field
+        })
+      }), /*#__PURE__*/_jsx(Controller, {
+        name: "icon",
+        control: control,
+        rules: {
+          validate: validIcon
+        },
+        render: ({
+          field
+        }) => /*#__PURE__*/_jsx(TextField, {
+          fullWidth: true,
+          variant: "outlined",
+          margin: "dense",
+          placeholder: t('navigation.form.iconPlaceholder'),
+          label: t('navigation.form.icon'),
+          error: !!errors?.icon?.message,
+          disabled: state.locale !== defaultLocale,
+          helperText: errors?.icon?.message || /*#__PURE__*/_jsx(Box, {
+            display: "flex",
+            children: /*#__PURE__*/_jsxs(Box, {
+              component: "a",
+              href: "https://icones.js.org",
+              target: "_blank",
+              display: "flex",
+              alignItems: "center",
+              children: [t('navigation.form.findMoreIcon'), ' ', /*#__PURE__*/_jsx(Icon, {
+                style: {
+                  marginLeft: 4
+                },
+                icon: "radix-icons:external-link"
+              })]
+            })
+          }),
+          ...field,
+          InputProps: {
+            endAdornment: /*#__PURE__*/_jsx(InputAdornment, {
+              position: "end",
+              children: /*#__PURE__*/_jsx(IconButton, {
+                sx: {
+                  cursor: 'default'
+                },
+                disableFocusRipple: true,
+                disableRipple: true,
+                children: watchIcon && /*#__PURE__*/_jsx(IconSuffix, {
+                  icon: watchIcon
+                })
+              })
+            })
+          }
+        })
+      }), state.isRoot && /*#__PURE__*/_jsx(Controller, {
+        name: "component",
+        control: control,
+        render: ({
+          field
+        }) => /*#__PURE__*/_jsx(SimpleSelect, {
+          fullWidth: true,
+          margin: "dense",
+          disabled: state.type === 'edit' || state.locale !== defaultLocale,
+          label: t('navigation.form.component'),
+          placeholer: t('navigation.form.componentPlaceholder'),
+          options: components.map(item => ({
+            title: item.title,
+            value: item.name,
+            description: item.link
+          })),
+          error: !!errors?.component?.message,
+          helperText: errors?.component?.message || ' ',
+          ...omit(field, 'ref')
+        })
+      }), /*#__PURE__*/_jsx(Controller, {
+        name: "link",
+        control: control,
+        rules: {
+          validate: validLink
+        },
+        render: ({
+          field
+        }) => /*#__PURE__*/_jsx(FormControl, {
+          fullWidth: true,
+          margin: "dense",
+          children: /*#__PURE__*/_jsx(Autocomplete, {
+            disablePortal: true,
+            freeSolo: true,
+            blurOnSelect: true,
+            autoSelect: true,
+            fullWidth: true,
+            disabled: state.linkDisabled,
+            isOptionEqualToValue: option => option.label,
+            options: autocompleteOptions,
+            renderInput: params => {
+              return /*#__PURE__*/_jsx(TextField, {
+                ...params,
+                placeholder: t('navigation.form.linkPlaceholder'),
+                label: t('navigation.form.link'),
+                error: !!errors?.link?.message,
+                helperText: errors?.link?.message || '/abc/bcd or /abc or https://arcblock.io'
+                // FIXME: 添加了 startAdornment 后，autocomplete 选项无法显示，之后换成 antd 的 autocomplete 可以解决这个问题
+                ,
+                InputProps: {
+                  startAdornment: linkPrefix ? /*#__PURE__*/_jsx(InputAdornment, {
+                    position: "start",
+                    sx: {
+                      textDecoration: isAbsoluteUrl(watchLink || '') ? 'line-through' : ''
+                    },
+                    children: linkPrefix
+                  }) : null
+                }
+              });
+            },
+            renderOption: (props, option) => /*#__PURE__*/_jsxs(Box, {
+              component: "li",
+              ...props,
+              children: [option.label, /*#__PURE__*/_jsx(Typography, {
+                marginLeft: 1,
+                component: "span",
+                variant: "body2",
+                color: "text.secondary",
+                children: option.title
+              })]
+            }),
+            margin: "dense",
+            ...field,
+            onChange: () => {},
+            onInputChange: (e, value) => {
+              field.onChange(value);
+            }
+          })
+        })
+      }), ['dashboard', 'sessionManager'].includes(section) && /*#__PURE__*/_jsx(Controller, {
+        name: "role",
+        control: control,
+        render: ({
+          field
+        }) => /*#__PURE__*/_jsx(SimpleSelect, {
+          fullWidth: true,
+          multiple: true,
+          margin: "dense",
+          label: t('navigation.form.role'),
+          placeholer: t('navigation.form.rolePlaceholder'),
+          options: roles.map(role => ({
+            title: role.title,
+            value: role.name
+          })),
+          error: !!errors?.role?.message,
+          helperText: errors?.role?.message || ' ',
+          ...omit(field, 'ref')
+        })
+      })]
+    })]
+  });
+});
+NavigationDialog.propTypes = {
+  section: PropTypes.string,
+  components: PropTypes.array,
+  rawNavigations: PropTypes.array
+};
+NavigationDialog.defaultProps = {
+  section: '',
+  components: [],
+  rawNavigations: []
+};
+export default NavigationDialog;

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

@@ -0,0 +1,101 @@
+import PropTypes from 'prop-types';
+import Header from '@blocklet/ui-react/lib/Header';
+import Footer from '@blocklet/ui-react/lib/Footer';
+import Dashboard from '@blocklet/ui-react/lib/Dashboard';
+import LinkBlocker from '@blocklet/ui-react/lib/common/link-blocker';
+import Box from '@mui/material/Box';
+import Grid from '@mui/material/Grid';
+import Skeleton from '@mui/material/Skeleton';
+import styled from '@emotion/styled';
+import { useBlockletContext } from '../../../contexts/blocklet';
+import useAppLogo from '../../../hooks/use-app-logo';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+function NavigationPreview({
+  className,
+  navigation
+}) {
+  const {
+    blocklet
+  } = useBlockletContext();
+  const {
+    logoUrl
+  } = useAppLogo({
+    blocklet
+  });
+  const blockletInfo = {
+    appId: blocklet.appDid,
+    appLogo: logoUrl,
+    appName: blocklet.meta.title,
+    enableConnect: true,
+    enableLocale: false,
+    navigation
+  };
+  return /*#__PURE__*/_jsx(LinkBlocker, {
+    children: /*#__PURE__*/_jsxs(Box, {
+      className: className,
+      children: [/*#__PURE__*/_jsx(Header, {
+        meta: blockletInfo
+      }), /*#__PURE__*/_jsx(Box, {
+        children: /*#__PURE__*/_jsx(Dashboard, {
+          meta: blockletInfo,
+          invalidPathFallback: () => {},
+          headerProps: {
+            style: {
+              display: 'none'
+            }
+          },
+          children: /*#__PURE__*/_jsx(Grid, {
+            container: true,
+            spacing: 2,
+            children: new Array(6).fill().map((item, index) => {
+              return (
+                /*#__PURE__*/
+                // eslint-disable-next-line react/no-array-index-key
+                _jsxs(Grid, {
+                  item: true,
+                  xs: 4,
+                  children: [/*#__PURE__*/_jsx(Skeleton, {
+                    animation: false,
+                    variant: "rectangular",
+                    width: "100%",
+                    height: 120
+                  }), /*#__PURE__*/_jsxs(Box, {
+                    sx: {
+                      pt: 0.5
+                    },
+                    children: [/*#__PURE__*/_jsx(Skeleton, {
+                      animation: false
+                    }), /*#__PURE__*/_jsx(Skeleton, {
+                      width: "60%",
+                      animation: false
+                    })]
+                  })]
+                }, index)
+              );
+            })
+          })
+        })
+      }), /*#__PURE__*/_jsx(Footer, {
+        meta: blockletInfo
+      })]
+    })
+  });
+}
+NavigationPreview.propTypes = {
+  className: PropTypes.string,
+  navigation: PropTypes.array
+};
+NavigationPreview.defaultProps = {
+  className: '',
+  navigation: []
+};
+const StyledNavigationPreview = styled(NavigationPreview)`
+  .dashboard {
+    height: auto !important;
+  }
+  .dashboard-content + div {
+    display: none;
+  }
+`;
+export default StyledNavigationPreview;