@arcblock/ux 3.4.14 → 3.5.0

package/src/OrgTransfer/selector.tsx

@@ -1,252 +0,0 @@
-/**
- * Org transfer selector
- */
-import { useImperativeHandle, useState } from 'react';
-import { useReactive, useDebounce, useInfiniteScroll, useMemoizedFn } from 'ahooks';
-import { Button, Typography, Box, Autocomplete, TextField, CircularProgress } from '@mui/material';
-import { AxiosError } from 'axios';
-import { getBlockletSDK } from '@blocklet/js-sdk';
-
-import Toast from '../Toast';
-import Dialog from '../Dialog';
-import { Org, OrgTransferSelectorProps } from './type';
-import { OrgQueryType } from '../Util/client';
-import { formatAxiosError } from '../Util';
-import { translate } from '../Locale/util';
-import translations from './locales';
-
-const PAGE_SIZE = 20;
-
-export default function OrgTransferSelector({
-  ref,
-  org,
-  onSuccess,
-  resourceId,
-  locale = 'en',
-  dialogProps,
-}: OrgTransferSelectorProps) {
-  const t = useMemoizedFn((key, data = {}) => {
-    return translate(translations, key, locale, 'en', data);
-  });
-  const client = getBlockletSDK();
-  const [searchText, setSearchText] = useState('');
-
-  const state = useReactive<{
-    open: boolean;
-    selectedOrg: Org | null;
-  }>({
-    open: false,
-    selectedOrg: null,
-  });
-
-  const debouncedSearchText = useDebounce(searchText, { wait: 500 });
-
-  const { data, loadMore, loadingMore, loading, reload } = useInfiniteScroll(
-    async (d) => {
-      // 只有对话框打开时才发起请求
-      if (!state.open) return { list: [], total: 0 };
-
-      const page = d ? Math.ceil(d.list.length / PAGE_SIZE) + 1 : 1;
-      const params = { page, pageSize: PAGE_SIZE, search: debouncedSearchText, type: OrgQueryType.OWNED };
-      const response = await client.user.getOrgs(params);
-
-      const { orgs: resultOrgs = [], paging } = response || {};
-      return { list: resultOrgs, total: paging?.total || 0 };
-    },
-    {
-      reloadDeps: [debouncedSearchText],
-      isNoMore: (d) => {
-        if (!d?.list.length) return true;
-        return d.list.length >= d?.total;
-      },
-      onError: (error) => {
-        // eslint-disable-next-line no-console
-        console.error('Get orgs failed', error);
-      },
-      manual: true, // 手动触发，在对话框打开时再加载
-    }
-  );
-
-  const handleClose = useMemoizedFn(() => {
-    state.open = false;
-    state.selectedOrg = null;
-    setSearchText(''); // 关闭时重置搜索
-  });
-
-  const handleConfirm = useMemoizedFn(async () => {
-    try {
-      if (!resourceId) {
-        throw new Error(t('resourceIdRequired'));
-      }
-      if (!state.selectedOrg) {
-        throw new Error(t('placeholder'));
-      }
-      if (state.selectedOrg.id === org.id) {
-        throw new Error(t('organizationSameAsCurrent'));
-      }
-      await client.user.migrateResourceToOrg({ form: org.id, to: state.selectedOrg.id, resourceId });
-      handleClose();
-      onSuccess?.(state.selectedOrg);
-      Toast.success(t('tranferSuccess'));
-    } catch (error) {
-      console.error('Resource transfer failed', error);
-      Toast.error(formatAxiosError(error as AxiosError));
-    }
-  });
-
-  useImperativeHandle(ref, () => ({
-    open: (options = {}) => {
-      Object.assign(state, { open: true, selectedOrg: null }, options);
-      // 对话框打开时重新加载数据
-      setTimeout(() => {
-        if (state.open) {
-          reload();
-        }
-      }, 0);
-    },
-    close: handleClose,
-  }));
-
-  const organizations = data?.list || [];
-  // const hasMore = data ? data.list.length < data.total : false;
-
-  const { placeholder = '', ...rest } = dialogProps || {};
-  return (
-    <Dialog
-      title={t('transferOrg')}
-      fullWidth
-      maxWidth="sm"
-      open={state.open}
-      onClose={handleClose}
-      actions={
-        <>
-          <Button onClick={handleClose} color="secondary" variant="outlined">
-            {t('cancel')}
-          </Button>
-          <Button onClick={handleConfirm} color="primary" variant="contained" disabled={!state.selectedOrg}>
-            {t('confirm')}
-          </Button>
-        </>
-      }
-      {...(rest || {})}>
-      <Box>
-        <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
-          {placeholder || t('placeholder')}
-        </Typography>
-
-        <Autocomplete
-          options={organizations}
-          getOptionLabel={(option) => option?.name || ''}
-          isOptionEqualToValue={(option, value) => option?.id === value?.id}
-          value={state.selectedOrg}
-          onChange={(_, newValue) => {
-            // 如果点击的是加载项，触发加载更多
-            if (newValue?.isLoadingItem && !loadingMore) {
-              loadMore();
-              return;
-            }
-            // 忽略加载项的选择
-            if (newValue?.isLoadingItem) {
-              return;
-            }
-            state.selectedOrg = newValue;
-            // 选择选项后清空搜索文本
-            if (newValue) {
-              setSearchText('');
-            }
-          }}
-          inputValue={state.selectedOrg ? state.selectedOrg.name : searchText}
-          onInputChange={(_, newInputValue, reason) => {
-            // 只有用户键盘输入时才更新搜索文本
-            if (reason === 'input') {
-              // 用户开始输入时，清除当前选中的组织，进入搜索模式
-              if (state.selectedOrg) {
-                state.selectedOrg = null;
-              }
-              setSearchText(newInputValue);
-            }
-          }}
-          loading={loading}
-          loadingText={t('loading')}
-          noOptionsText={loading ? t('loading') : t('noResults')}
-          renderInput={(params) => (
-            <TextField
-              {...params}
-              variant="outlined"
-              fullWidth
-              InputProps={{
-                ...params.InputProps,
-                endAdornment: (
-                  <>
-                    {loading && <CircularProgress color="inherit" size={20} />}
-                    {params.InputProps.endAdornment}
-                  </>
-                ),
-              }}
-            />
-          )}
-          renderOption={(props, option) => {
-            // 特殊处理加载项
-            if (option.isLoadingItem) {
-              return (
-                <Box component="li" {...props} key={option.id}>
-                  <Box
-                    sx={{
-                      display: 'flex',
-                      alignItems: 'center',
-                      justifyContent: 'center',
-                      flex: 1,
-                      py: 1,
-                      color: 'primary.main',
-                      cursor: 'pointer',
-                    }}>
-                    {loadingMore && <CircularProgress size={16} sx={{ mr: 1 }} />}
-                    <Typography variant="body2" sx={{ fontStyle: loadingMore ? 'italic' : 'normal' }}>
-                      {option.name}
-                    </Typography>
-                  </Box>
-                </Box>
-              );
-            }
-
-            // 正常组织项的渲染
-            return (
-              <Box component="li" {...props} key={option.id}>
-                <Box sx={{ display: 'flex', flexDirection: 'column', flex: 1, minWidth: 0 }}>
-                  <Typography
-                    variant="body1"
-                    sx={{
-                      overflow: 'hidden',
-                      textOverflow: 'ellipsis',
-                      whiteSpace: 'nowrap',
-                    }}>
-                    {option.name}
-                  </Typography>
-                  {option.description && (
-                    <Typography
-                      variant="body2"
-                      color="text.secondary"
-                      sx={{
-                        display: '-webkit-box',
-                        WebkitLineClamp: 3,
-                        WebkitBoxOrient: 'vertical',
-                        overflow: 'hidden',
-                        textOverflow: 'ellipsis',
-                      }}>
-                      {option.description}
-                    </Typography>
-                  )}
-                </Box>
-              </Box>
-            );
-          }}
-          sx={{
-            '& .MuiAutocomplete-listbox': {
-              maxHeight: 200,
-            },
-          }}
-        />
-      </Box>
-    </Dialog>
-  );
-}

package/src/OrgTransfer/type.ts

@@ -1,31 +0,0 @@
-import type { ComponentProps } from 'react';
-import { ButtonProps } from '@mui/material';
-import Dialog from '../Dialog';
-
-export type Org = {
-  id: string;
-  name: string;
-  description?: string;
-  ownerDid: string;
-  metadata?: Record<string, any>;
-};
-
-type DialogProps = ComponentProps<typeof Dialog> & {
-  placeholder?: string; // 搜索框的 placeholder
-};
-
-export type OrgTransferSelectorProps = Omit<OrgTransferProps, 'children' | 'buttonProps' | 'buttonText'> & {
-  ref: React.RefObject<unknown | null>;
-};
-
-export interface OrgTransferProps {
-  resourceId: string;
-  onSuccess?: (org: Org) => void;
-  org?: Org; // 当前所在的 Org
-  children?: React.ReactNode;
-  buttonProps?: ButtonProps;
-  buttonText?: string;
-  dialogProps?: DialogProps;
-  locale?: string;
-  [key: string]: any;
-}

package/src/PageScroller/index.tsx

@@ -1,316 +0,0 @@
-/* eslint-disable jsx-a11y/no-noninteractive-tabindex */
-import { Children, cloneElement, useCallback, useEffect, useRef, useState } from 'react';
-import isEqual from 'lodash/isEqual';
-import isNil from 'lodash/isNil';
-import isNull from 'lodash/isNull';
-
-import usePrevious from './usePrevValue';
-import { withDeprecated } from '../Util/deprecate';
-
-const Events = {
-  TOUCHMOVE: 'touchmove',
-  KEYDOWN: 'keydown',
-} as const;
-
-const DEFAULT_ANIMATION_TIMER = 500;
-const DEFAULT_ANIMATION = 'ease-in-out';
-const DEFAULT_CONTAINER_HEIGHT = '100vh';
-const DEFAULT_CONTAINER_WIDTH = '100vw';
-const DEFAULT_COMPONENT_INDEX = 0;
-const DEFAULT_COMPONENTS_TO_RENDER_LENGTH = 0;
-
-const ANIMATION_TIMER_BUFFER = 100;
-const KEY_UP = 38;
-const KEY_DOWN = 40;
-const DISABLED_CLASS_NAME = 'rps-scroll--disabled';
-
-let previousTouchMove: number | null = null;
-let isScrolling = false;
-let isMounted = false;
-let isBodyScrollEnabled = true;
-let isTransitionAfterComponentsToRenderChanged = false;
-const containers: boolean[] = [];
-
-export interface PageScrollerProps {
-  animationTimer?: number;
-  blockScrollDown?: false | true;
-  blockScrollUp?: false | true;
-  children?: React.ReactElement<any> | React.ReactElement<any>[];
-  height?: number | string;
-  width?: number | string;
-  customPageNumber?: number;
-  onScrollUnavailable?: () => void;
-  onChange?: (index: number) => void;
-  renderAllPagesOnFirstRender?: false | true;
-  transitionTimingFunction?: string;
-}
-
-function PageScroller({
-  animationTimer = DEFAULT_ANIMATION_TIMER,
-  blockScrollDown = false,
-  blockScrollUp = false,
-  children: _children = undefined,
-  height = DEFAULT_CONTAINER_HEIGHT,
-  width = DEFAULT_CONTAINER_WIDTH,
-  customPageNumber = undefined,
-  onScrollUnavailable = undefined,
-  onChange = undefined,
-  renderAllPagesOnFirstRender = false,
-  transitionTimingFunction = DEFAULT_ANIMATION,
-}: PageScrollerProps) {
-  const [componentIndex, setComponentIndex] = useState(DEFAULT_COMPONENT_INDEX);
-  const [componentsToRenderLength, setComponentsToRenderLength] = useState(DEFAULT_COMPONENTS_TO_RENDER_LENGTH);
-  const prevComponentIndex = usePrevious(componentIndex);
-  const pageContainer = useRef<HTMLDivElement>(null);
-  const children = Children.toArray(_children) as React.ReactElement<any>[];
-
-  const addNextComponent = useCallback(
-    (componentsToRenderOnMountLength?: number) => {
-      let tempComponentsToRenderLength = 0;
-
-      if (!isNil(componentsToRenderOnMountLength)) {
-        tempComponentsToRenderLength = componentsToRenderOnMountLength;
-      }
-
-      tempComponentsToRenderLength = Math.max(tempComponentsToRenderLength, componentsToRenderLength);
-
-      if (tempComponentsToRenderLength <= componentIndex + 1) {
-        if (!isNil(children[componentIndex + 1])) {
-          tempComponentsToRenderLength++;
-        }
-      }
-
-      setComponentsToRenderLength(tempComponentsToRenderLength);
-    },
-    [children, componentIndex, componentsToRenderLength]
-  );
-
-  const checkRenderOnMount = useCallback(() => {
-    if (renderAllPagesOnFirstRender) {
-      setComponentsToRenderLength(Children.count(children));
-    } else if (!isNil(children[DEFAULT_COMPONENT_INDEX + 1])) {
-      addNextComponent(DEFAULT_COMPONENTS_TO_RENDER_LENGTH + 1);
-    }
-  }, [addNextComponent, children, renderAllPagesOnFirstRender]);
-
-  const disableScroll = useCallback(() => {
-    if (isBodyScrollEnabled) {
-      isBodyScrollEnabled = false;
-      window.scrollTo({
-        left: 0,
-        top: 0,
-        behavior: 'smooth',
-      });
-      document.body.classList.add(DISABLED_CLASS_NAME);
-      document.documentElement.classList.add(DISABLED_CLASS_NAME);
-    }
-  }, []);
-
-  const enableDocumentScroll = useCallback(() => {
-    if (!isBodyScrollEnabled) {
-      isBodyScrollEnabled = true;
-      document.body.classList.remove(DISABLED_CLASS_NAME);
-      document.documentElement.classList.remove(DISABLED_CLASS_NAME);
-    }
-  }, []);
-
-  const setRenderComponents = useCallback(() => {
-    const newComponentsToRender = [];
-
-    let i = 0;
-
-    while (i < componentsToRenderLength && !isNil(children[i])) {
-      containers[i] = true;
-      newComponentsToRender.push(
-        <div key={i} style={{ height: '100%', width: '100%' }}>
-          {cloneElement(children[i], { ...children[i].props })}
-        </div>
-      );
-      i++;
-    }
-
-    return newComponentsToRender;
-  }, [children, componentsToRenderLength]);
-
-  const scrollWindowDown = useCallback(() => {
-    if (!isScrolling && !blockScrollDown) {
-      if (!isNil(containers[componentIndex + 1])) {
-        disableScroll();
-        isScrolling = true;
-        pageContainer.current!.style.transform = `translate3d(0, ${(componentIndex + 1) * -100}%, 0)`; // prettier-ignore
-
-        setTimeout(() => {
-          if (isMounted) {
-            setComponentIndex((prevState) => prevState + 1);
-          }
-        }, animationTimer + ANIMATION_TIMER_BUFFER);
-      } else {
-        enableDocumentScroll();
-        if (onScrollUnavailable) {
-          onScrollUnavailable();
-        }
-      }
-    }
-  }, [animationTimer, blockScrollDown, componentIndex, disableScroll, enableDocumentScroll, onScrollUnavailable]);
-
-  const scrollWindowUp = useCallback(() => {
-    if (!isScrolling && !blockScrollUp) {
-      if (!isNil(containers[componentIndex - 1])) {
-        disableScroll();
-        isScrolling = true;
-        pageContainer.current!.style.transform = `translate3d(0, ${(componentIndex - 1) * -100}%, 0)`; // prettier-ignore
-
-        setTimeout(() => {
-          if (isMounted) {
-            setComponentIndex((prevState) => prevState - 1);
-          }
-        }, animationTimer + ANIMATION_TIMER_BUFFER);
-      } else {
-        enableDocumentScroll();
-        if (onScrollUnavailable) {
-          onScrollUnavailable();
-        }
-      }
-    }
-  }, [animationTimer, blockScrollUp, componentIndex, disableScroll, enableDocumentScroll, onScrollUnavailable]);
-
-  const touchMove = useCallback(
-    (event: TouchEvent) => {
-      if (!isNull(previousTouchMove)) {
-        if (event.touches[0].clientY > previousTouchMove) {
-          scrollWindowUp();
-        } else {
-          scrollWindowDown();
-        }
-      } else {
-        previousTouchMove = event.touches[0].clientY;
-      }
-    },
-    [scrollWindowDown, scrollWindowUp]
-  );
-
-  const wheelScroll = useCallback(
-    (event: React.WheelEvent<HTMLDivElement>) => {
-      if (event.deltaY < 0) {
-        scrollWindowUp();
-      } else {
-        scrollWindowDown();
-      }
-    },
-    [scrollWindowDown, scrollWindowUp]
-  );
-
-  const keyPress = useCallback(
-    (event: KeyboardEvent) => {
-      if (isEqual(event.keyCode, KEY_UP)) {
-        scrollWindowUp();
-      }
-      if (isEqual(event.keyCode, KEY_DOWN)) {
-        scrollWindowDown();
-      }
-    },
-    [scrollWindowDown, scrollWindowUp]
-  );
-
-  useEffect(() => {
-    pageContainer.current?.addEventListener(Events.TOUCHMOVE, touchMove);
-    pageContainer.current?.addEventListener(Events.KEYDOWN, keyPress);
-    return () => {
-      if (pageContainer.current?.removeEventListener) {
-        pageContainer.current.removeEventListener(Events.TOUCHMOVE, touchMove);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-        pageContainer.current.removeEventListener(Events.KEYDOWN, keyPress);
-      }
-    };
-  }, [touchMove, keyPress]);
-
-  useEffect(() => {
-    isMounted = true;
-
-    checkRenderOnMount();
-    return () => {
-      isMounted = false;
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  useEffect(() => {
-    isScrolling = false;
-    previousTouchMove = null;
-    if (prevComponentIndex !== undefined && componentIndex > prevComponentIndex) {
-      addNextComponent();
-    }
-  }, [addNextComponent, componentIndex, prevComponentIndex]);
-
-  useEffect(() => {
-    if (onChange) {
-      onChange(componentIndex);
-    }
-  }, [onChange, componentIndex]);
-
-  useEffect(() => {
-    if (!isNil(customPageNumber) && !isEqual(customPageNumber, componentIndex)) {
-      let newComponentsToRenderLength = componentsToRenderLength;
-
-      if (!isEqual(componentIndex, customPageNumber)) {
-        if (!isNil(containers[customPageNumber]) && !isScrolling) {
-          isScrolling = true;
-          pageContainer.current!.style.transform = `translate3d(0, ${customPageNumber * -100}%, 0)`;
-
-          if (isNil(containers[customPageNumber]) && !isNil(children[customPageNumber])) {
-            newComponentsToRenderLength++;
-          }
-
-          setTimeout(() => {
-            setComponentIndex(customPageNumber);
-            setComponentsToRenderLength(newComponentsToRenderLength);
-          }, animationTimer + ANIMATION_TIMER_BUFFER);
-        } else if (!isScrolling && !isNil(children[customPageNumber])) {
-          for (let i = componentsToRenderLength; i <= customPageNumber; i++) {
-            newComponentsToRenderLength++;
-          }
-
-          if (!isNil(children[customPageNumber])) {
-            newComponentsToRenderLength++;
-          }
-
-          isScrolling = true;
-          isTransitionAfterComponentsToRenderChanged = true;
-          setComponentsToRenderLength(newComponentsToRenderLength);
-        }
-      }
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [customPageNumber]);
-
-  useEffect(() => {
-    if (isTransitionAfterComponentsToRenderChanged) {
-      isTransitionAfterComponentsToRenderChanged = false;
-
-      pageContainer.current!.style.transform = `translate3d(0, ${customPageNumber! * -100}%, 0)`;
-
-      setTimeout(() => {
-        setComponentIndex(customPageNumber!);
-      }, animationTimer + ANIMATION_TIMER_BUFFER);
-    }
-  }, [animationTimer, componentsToRenderLength, customPageNumber]);
-
-  return (
-    <div style={{ height, width, overflow: 'hidden' }}>
-      <div
-        ref={pageContainer}
-        onWheel={wheelScroll}
-        style={{
-          height: '100%',
-          width: '100%',
-          transition: `transform ${animationTimer}ms ${transitionTimingFunction}`,
-          outline: 'none',
-        }}
-        tabIndex={0}>
-        {setRenderComponents()}
-      </div>
-    </div>
-  );
-}
-
-export default withDeprecated(PageScroller, { name: 'PageScroller' });

package/src/PageScroller/story/FifthComponent.jsx

@@ -1,7 +0,0 @@
-export default function FifthComponent() {
-  return (
-    <div className="component fifth-component">
-      <h2>Fifth Component</h2>
-    </div>
-  );
-}

package/src/PageScroller/story/FirstComponent.jsx

@@ -1,7 +0,0 @@
-export default function FirstComponent() {
-  return (
-    <div className="component first-component">
-      <h2>First Component</h2>
-    </div>
-  );
-}

package/src/PageScroller/story/FourthComponent.jsx

@@ -1,7 +0,0 @@
-export default function FourthComponent() {
-  return (
-    <div className="component fourth-component">
-      <h2 style={{ margin: 'auto' }}>Fourth Component</h2>
-    </div>
-  );
-}

package/src/PageScroller/story/FullPage.jsx

@@ -1,55 +0,0 @@
-/* eslint-disable jsx-a11y/control-has-associated-label */
-import { useState } from 'react';
-
-import Button from '../../Button';
-import PageScroller from '..';
-
-import FirstComponent from './FirstComponent';
-import SecondComponent from './SecondComponent';
-import ThirdComponent from './ThirdComponent';
-import FourthComponent from './FourthComponent';
-import FifthComponent from './FifthComponent';
-
-import './index.css';
-
-export default function FullPage() {
-  const [current, setCurrent] = useState(0);
-
-  const pageNumbers = [];
-  for (let i = 0; i < 5; i++) {
-    pageNumbers.push(
-      <Button
-        key={i}
-        variant={i === current ? 'contained' : 'outlined'}
-        size="small"
-        onClick={() => setCurrent(i)}
-        color={i === current ? 'primary' : 'secondary'}>
-        {i + 1}
-      </Button>
-    );
-  }
-
-  const progress = (current / (5 - 1)) * 100;
-
-  return (
-    <div className="demo-page-full">
-      <PageScroller onChange={(i) => setCurrent(i)} customPageNumber={current}>
-        <FirstComponent />
-        <SecondComponent />
-        <ThirdComponent />
-        <FourthComponent />
-        <FifthComponent />
-      </PageScroller>
-      <div
-        className="progress"
-        role="progressbar"
-        aria-valuemin="0"
-        aria-valuemax="100"
-        aria-valuenow={progress}
-        aria-valuetext={`Page Scroller Progress: ${progress}`}
-        style={{ width: `${progress}%` }}
-      />
-      <div className="pagination-additional-class">{pageNumbers}</div>
-    </div>
-  );
-}