@arcblock/ux 3.4.14 → 3.5.0

package/src/PageScroller/story/PageContain.jsx

@@ -1,59 +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-contain">
-      <h3 className="demo-page-contain__hint">
-        You need to focus or hover page scroller to make scroll, keys or touch work
-      </h3>
-      <div style={{ width: 360, height: 640, position: 'relative' }}>
-        <PageScroller onChange={(i) => setCurrent(i)} width={360} height={640} 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>
-      <div className="pagination-additional-class">{pageNumbers}</div>
-    </div>
-  );
-}

package/src/PageScroller/story/PageScroller.stories.jsx

@@ -1,18 +0,0 @@
-import FullPage from './FullPage';
-import PageContain from './PageContain';
-
-export default {
-  title: 'Deprecated/PageScroller',
-};
-
-export function _FullPage() {
-  return <FullPage />;
-}
-
-_FullPage.storyName = 'full page';
-
-export function _PageContain() {
-  return <PageContain />;
-}
-
-_PageContain.storyName = 'page contain';

package/src/PageScroller/story/SecondComponent.jsx

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

package/src/PageScroller/story/ThirdComponent.jsx

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

package/src/PageScroller/story/index.css

@@ -1,115 +0,0 @@
-html,
-body {
-  margin: 0;
-  height: 100%;
-  width: 100%;
-  overflow: hidden;
-}
-
-.links {
-  display: flex;
-  flex-direction: column;
-  margin-left: 50px;
-}
-
-.links .link {
-  margin-top: 20px;
-}
-
-.component {
-  height: 100%;
-  width: 100%;
-  display: flex;
-}
-
-.component.first-component {
-  background-color: gray;
-  position: relative;
-}
-
-.first-component--inside-scroller {
-  position: absolute;
-  right: 20px;
-  top: 100px;
-}
-
-.component.second-component {
-  background-color: red;
-}
-
-.component.third-component {
-  background-color: blue;
-}
-
-.component.fourth-component {
-  background-color: yellow;
-}
-
-.component.fifth-component {
-  background-color: purple;
-}
-
-h2 {
-  margin: auto;
-  text-align: center;
-}
-
-.pagination-additional-class {
-  margin: 0;
-  position: fixed;
-  top: 20px;
-  display: flex;
-  justify-content: center;
-  width: 100%;
-}
-
-.pagination-additional-class > li:not(:last-of-type) > a,
-.pagination-additional-class > li:not(:last-of-type) > span {
-  margin-right: 50px;
-}
-
-.demo-page-contain {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 100vh;
-  flex-direction: column;
-}
-
-.demo-page-contain__hint {
-  margin-bottom: 20px;
-}
-
-@media (max-width: 768px) {
-  .pagination-additional-class > li:not(:last-of-type) > a,
-  .pagination-additional-class > li:not(:last-of-type) > span {
-    margin-right: 5px;
-  }
-}
-
-.demo-page-full {
-  position: relative;
-}
-.progress {
-  position: absolute;
-  left: 0;
-  bottom: 0;
-  width: 0;
-  overflow: hidden;
-  transition: all 0.2s linear;
-}
-.progress,
-.progress:before {
-  height: 6px;
-}
-.progress:before {
-  display: block;
-  width: 100%;
-  background-color: #4e6af6;
-  content: '';
-  transform-origin: 0 100%;
-  transform: skewX(45deg);
-}
-.progress[style*='100%']:before {
-  transform: none;
-}

package/src/PageScroller/usePrevValue.ts

@@ -1,11 +0,0 @@
-import { useEffect, useRef } from 'react';
-
-export default function usePrevious<T>(value: T) {
-  const ref = useRef<T>(undefined);
-
-  useEffect(() => {
-    ref.current = value;
-  }, [value]);
-
-  return ref.current;
-}

package/src/Passport/index.ts

@@ -1,3 +0,0 @@
-import PassportItem from './passport';
-
-export default PassportItem;

package/src/Passport/passport.tsx

@@ -1,118 +0,0 @@
-import upperFirst from 'lodash/upperFirst';
-import { Box, type BoxProps } from '@mui/material';
-import RevokeIcon from '@arcblock/icons/lib/RevokeIcon';
-
-import NFTDisplay from '../NFTDisplay';
-import { useLocaleContext } from '../Locale/context';
-import { Passport as PassportType, User } from '../type';
-
-export interface PassportProps extends BoxProps {
-  passport: PassportType;
-  user: User;
-  color: string;
-  width?: number;
-  icon?: React.ReactNode;
-  createPassportSvg: (props: any) => string;
-}
-
-export default function Passport({
-  passport,
-  user,
-  color,
-  width = 150,
-  icon = null,
-  createPassportSvg,
-  // inherit props
-  children,
-  ...rest
-}: PassportProps) {
-  const { t } = useLocaleContext();
-  return (
-    <Box
-      {...rest}
-      sx={{
-        display: 'flex',
-        alignItems: 'center',
-        ...rest?.sx,
-      }}>
-      {!!passport.display && (
-        <Box className="passport-item__display" sx={{ width }}>
-          <NFTDisplay
-            address={passport.id}
-            data={passport.display}
-            imageFilter={typeof width === 'number' ? { imageFilter: 'resize', w: width } : null}
-          />
-        </Box>
-      )}
-      {!passport.display && (
-        <Box
-          className="passport-item__display"
-          // eslint-disable-next-line react/no-danger
-          dangerouslySetInnerHTML={{
-            __html: createPassportSvg({
-              title: passport.scope === 'kyc' ? passport.name : passport.title,
-              issuer: passport.issuer && passport.issuer.name,
-              issuerDid: passport.issuer && passport.issuer.id,
-              ownerName: user.fullName,
-              ownerDid: user.did,
-              ownerAvatarUrl: user.avatar,
-              revoked: passport.revoked,
-              scope: passport.scope,
-              role: passport.role,
-              display: passport.display,
-              preferredColor: color,
-              width,
-            }),
-          }}
-        />
-      )}
-      <Box
-        className="passport-item__body"
-        sx={{
-          p: 0,
-          ml: 3,
-          mt: 0,
-        }}>
-        <Box
-          className="passport-item__title"
-          sx={{
-            display: 'flex',
-            alignItems: 'center',
-            fontWeight: 400,
-            fontSize: '16px',
-            lineHeight: 1.1875,
-            color: 'text.primary',
-          }}>
-          {upperFirst(passport.title)}
-          <Box
-            className="passport-item__status-icon"
-            sx={{
-              svg: {
-                fill: '#bfbfbf',
-                height: '1.2em',
-                marginLeft: '0.4em',
-              },
-            }}>
-            {icon}
-            {passport.revoked && <RevokeIcon />}
-          </Box>
-        </Box>
-        {passport.expirationDate && (
-          <Box
-            className="passport-item__title"
-            sx={{
-              display: 'flex',
-              alignItems: 'center',
-              fontWeight: 400,
-              fontSize: '16px',
-              lineHeight: 1.1875,
-              color: 'text.primary',
-            }}>
-            {t('team.passport.validUntil', { date: passport.expirationDate })}
-          </Box>
-        )}
-        {children}
-      </Box>
-    </Box>
-  );
-}

package/src/PhoneInput/PhoneInput.stories.jsx

@@ -1,12 +0,0 @@
-export { default as Basic } from './demo/basic';
-
-export default {
-  title: 'Data Display/PhoneInput',
-  parameters: {
-    docs: {
-      description: {
-        component: 'Used to input phone number with country code.',
-      },
-    },
-  },
-};

package/src/PhoneInput/country-select.tsx

@@ -1,148 +0,0 @@
-import { useMemo, useState } from 'react';
-import { Box, MenuItem, Select, Typography, SelectProps, TextField, SxProps } from '@mui/material';
-import { FlagEmoji, defaultCountries, parseCountry } from 'react-international-phone';
-import type { CountryIso2 } from 'react-international-phone';
-import { ParsedCountry } from 'react-international-phone/build/types';
-import ArrowDownwardIcon from '@arcblock/icons/lib/ArrowDown';
-import { mergeSx } from '../Util/style';
-
-export interface CountryDisplayOptions {
-  hideFlag?: boolean;
-  hideDialCode?: boolean;
-}
-
-export interface CountrySelectProps<T extends keyof ParsedCountry = 'iso2'>
-  extends Omit<SelectProps, 'value' | 'onChange'> {
-  value: T extends 'iso2' ? CountryIso2 : string;
-  onChange?: (value: T extends 'iso2' ? CountryIso2 : string) => void;
-  selectCountryProps?: CountryDisplayOptions;
-  preview?: boolean;
-  valueField?: T;
-}
-
-// 定义组件类型
-type CountrySelectComponent = <T extends keyof ParsedCountry = 'iso2'>(
-  props: CountrySelectProps<T> & { ref?: React.ForwardedRef<HTMLDivElement> }
-) => React.ReactElement<any>;
-
-// 实现组件
-function CountrySelectInner<T extends keyof ParsedCountry = 'iso2'>({
-  ref = undefined,
-  value,
-  onChange = undefined,
-  sx = {},
-  selectCountryProps = undefined,
-  preview = false,
-  valueField = 'iso2' as T,
-  ...rest
-}: CountrySelectProps<T> & {
-  ref?: React.Ref<unknown>;
-}) {
-  const { hideFlag = true, hideDialCode = false } = selectCountryProps || {};
-  const [searchQuery, setSearchQuery] = useState('');
-
-  const countryDetail = useMemo(() => {
-    const item = defaultCountries.find((v) => v[1] === value);
-    return value && item ? parseCountry(item) : { name: '', iso2: '', dialCode: '' };
-  }, [value]);
-
-  const filteredCountries = useMemo(() => {
-    if (!searchQuery) return defaultCountries;
-
-    const query = searchQuery.toLowerCase();
-    return defaultCountries.filter((country) => {
-      const parsed = parseCountry(country);
-      return (
-        parsed.name.toLowerCase().includes(query) ||
-        parsed.iso2.toLowerCase().includes(query) ||
-        parsed.dialCode.includes(query)
-      );
-    });
-  }, [searchQuery]);
-
-  const renderCountryContent = (
-    <Box
-      sx={{
-        display: 'flex',
-        alignItems: 'center',
-        flexWrap: 'nowrap',
-        gap: 0.5,
-        cursor: preview ? 'default' : 'pointer',
-      }}>
-      {hideFlag ? null : <FlagEmoji iso2={value} style={{ display: 'flex', width: 24, color: 'inherit' }} />}
-      <Typography component="span" sx={{ lineHeight: 1.5 }}>
-        {hideDialCode ? countryDetail?.name : `+${countryDetail?.dialCode}`}
-      </Typography>
-    </Box>
-  );
-
-  if (preview) {
-    return renderCountryContent;
-  }
-
-  return (
-    <Select
-      {...rest}
-      ref={ref}
-      MenuProps={{
-        style: { maxHeight: 400, top: 2, zIndex: 9999 }, // 默认 zIndex 为 1300, 但是在 SwipeableDrawer 中需要设置为 9999
-        anchorOrigin: { vertical: 'bottom', horizontal: 'left' },
-        transformOrigin: { vertical: 'top', horizontal: 'left' },
-        ...(rest.MenuProps ?? {}),
-      }}
-      sx={mergeSx(
-        {
-          '&.Mui-focused:has(div[aria-expanded="false"])': { fieldset: { display: 'block' } },
-          '.MuiSelect-select': { padding: 1, paddingRight: '24px !important' },
-          svg: { right: 4, top: 10 },
-          '&:hover': {
-            'fieldset.MuiOutlinedInput-notchedOutline': {
-              borderColor: 'divider',
-            },
-          },
-          'fieldset.MuiOutlinedInput-notchedOutline': {
-            borderColor: 'divider',
-          },
-          '.MuiMenuItem-root': { justifyContent: 'flex-start' },
-        },
-        sx as SxProps
-      )}
-      value={value}
-      onChange={(e) => onChange?.(e.target.value as T extends 'iso2' ? CountryIso2 : string)}
-      // eslint-disable-next-line react/no-unstable-nested-components
-      IconComponent={(props) => <ArrowDownwardIcon {...props} width={20} height={20} />}
-      renderValue={() => renderCountryContent}>
-      <Box sx={{ p: 1, position: 'sticky', top: 0, bgcolor: 'background.paper', zIndex: 1 }}>
-        <TextField
-          size="small"
-          fullWidth
-          placeholder="Search country..."
-          value={searchQuery}
-          onChange={(e) => setSearchQuery(e.target.value)}
-          onClick={(e) => e.stopPropagation()}
-          onKeyDown={(e) => e.stopPropagation()}
-        />
-      </Box>
-      {filteredCountries.map((c) => {
-        const parsed = parseCountry(c);
-        return (
-          <MenuItem key={parsed.iso2} value={parsed[valueField]}>
-            {hideFlag ? null : <FlagEmoji iso2={parsed.iso2} style={{ marginRight: 8, width: 24 }} />}
-            <Typography
-              sx={{
-                marginRight: 1,
-              }}>
-              {parsed.name}
-            </Typography>
-            {hideDialCode ? null : <Typography color="gray">(+{parsed.dialCode})</Typography>}
-          </MenuItem>
-        );
-      })}
-    </Select>
-  );
-}
-
-// 正确导出泛型组件
-const CountrySelect = CountrySelectInner as CountrySelectComponent;
-
-export default CountrySelect;