@arcblock/ux 2.13.70 → 3.0.0

package/src/Datatable/DatatableContext.jsx

@@ -1,4 +1,4 @@
-import { createContext, useContext, useState } from 'react';
+import { createContext, use, useState } from 'react';
 
 const DatatableContext = createContext({});
 
@@ -29,7 +29,7 @@ function DatatableProvider({ children }) {
 }
 
 function useDatatableContext() {
-  return useContext(DatatableContext);
+  return use(DatatableContext);
 }
 
 export { DatatableProvider, useDatatableContext };

package/src/Datatable/TableSearch.jsx

@@ -1,17 +1,21 @@
 import { useState, useRef } from 'react';
 import PropTypes from 'prop-types';
-import IconButton from '@mui/material/IconButton';
-import Tooltip from '@mui/material/Tooltip';
-import SearchIcon from '@mui/icons-material/Search';
-import TextField from '@mui/material/TextField';
-import ClearIcon from '@mui/icons-material/Clear';
+import { IconButton, Tooltip, TextField } from '@mui/material';
+import { Search as SearchIcon, Clear as ClearIcon } from '@mui/icons-material';
 import clsx from 'clsx';
 import noop from 'lodash/noop';
 
 import { useDatatableContext } from './DatatableContext';
 import { styled } from '../Theme';
 
-export default function TableSearch({ search, options, searchText, searchTextUpdate, searchClose, onSearchOpen }) {
+export default function TableSearch({
+  search = '',
+  options,
+  searchText = '',
+  searchTextUpdate,
+  searchClose,
+  onSearchOpen = noop,
+}) {
   const { searchOpen, searchPlaceholder, searchAlwaysOpen } = options;
   const [inputExpand, setInputExpand] = useState(!!searchText || searchOpen || false);
   const [innerSearchText, setInnerSearchText] = useState(searchText);
@@ -109,12 +113,6 @@ TableSearch.propTypes = {
   searchClose: PropTypes.func.isRequired,
 };
 
-TableSearch.defaultProps = {
-  search: '',
-  searchText: '',
-  onSearchOpen: noop,
-};
-
 const Container = styled('div')`
   display: flex;
   align-items: center;

package/src/Datatable/index.jsx

@@ -1,5 +1,5 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-import { useEffect, useRef, isValidElement } from 'react';
+import { useRef, isValidElement } from 'react';
 import PropTypes from 'prop-types';
 import MUIDataTable, { TableFilterList, TableFooter } from 'mui-datatables';
 import { css } from '@emotion/react';
@@ -7,7 +7,9 @@ import isObject from 'lodash/isObject';
 import cloneDeep from 'lodash/cloneDeep';
 import get from 'lodash/get';
 import clsx from 'clsx';
-import CircularProgress from '@mui/material/CircularProgress';
+import { useCreation, useDeepCompareEffect } from 'ahooks';
+import { CircularProgress } from '@mui/material';
+
 import Empty from '../Empty';
 import CustomToolbar from './CustomToolbar';
 import { DatatableProvider as DataTableProvider, useDatatableContext } from './DatatableContext';
@@ -78,7 +80,7 @@ const FilterLine = styled('div')`
 
 function WrapFilterList(props) {
   const { filterLabel } = useDatatableContext();
-  const hasFilter = !!props.filterList.filter((e) => e.length).length;
+  const hasFilter = !!(props.filterList ?? []).filter((e) => e.length).length;
   if (hasFilter) {
     return (
       <FilterLine>
@@ -96,10 +98,6 @@ WrapFilterList.propTypes = {
   filterList: PropTypes.array,
 };
 
-WrapFilterList.defaultProps = {
-  filterList: [],
-};
-
 function WrapTableFooter(props) {
   const { loading, disabled } = useDatatableContext();
 
@@ -165,26 +163,26 @@ const fixCellProp = (tempObj, cellProps) => {
  * @returns
  */
 function ReDataTable({
-  data: originData,
+  data: originData = [],
   columns: originColumns,
-  locale,
-  options, // The options object is usually a property supported by mui-datatable
-  style,
-  customPreButtons,
-  customButtons,
-  onChange,
-  loading,
-  disabled,
-  stripped,
-  verticalKeyWidth,
-  hideTableHeader,
-  components,
-  emptyNode,
-  durable,
-  durableKeys,
+  locale = 'en',
+  options = {}, // The options object is usually a property supported by mui-datatable
+  style = {},
+  customPreButtons = [],
+  customButtons = [],
+  onChange = '',
+  loading = false,
+  disabled = false,
+  stripped = false,
+  verticalKeyWidth = '',
+  hideTableHeader = false,
+  components = {},
+  emptyNode = '',
+  durable = '',
+  durableKeys = ['page', 'rowsPerPage', 'searchText', 'sortOrder'],
   bgColor = 'transparent',
-  hoverColor,
-  stripColor,
+  hoverColor = '',
+  stripColor = '',
   ...rest
 }) {
   const oldState = useRef(null);
@@ -275,18 +273,19 @@ function ReDataTable({
     return tempObj;
   });
 
-  // Fixing object-type structures
-  const data = originData.map((e) => {
-    if (!Array.isArray(e) && isObject(e)) {
-      return keys.map((key) => get(e, key));
-    }
-    return e;
-  });
+  const data = useCreation(() => {
+    return originData.map((e) => {
+      if (!Array.isArray(e) && isObject(e)) {
+        return keys.map((key) => get(e, key));
+      }
+      return e;
+    });
+  }, [originData, keys]);
 
-  useEffect(() => setCustomButtons(customButtons || []), [customButtons]);
-  useEffect(() => setCustomPreButtons(customPreButtons || []), [customPreButtons]);
-  useEffect(() => setLoading(loading), [loading]);
-  useEffect(() => setDisabled(disabled), [disabled]);
+  useDeepCompareEffect(() => setCustomButtons(customButtons || []), [customButtons]);
+  useDeepCompareEffect(() => setCustomPreButtons(customPreButtons || []), [customPreButtons]);
+  useDeepCompareEffect(() => setLoading(loading), [loading]);
+  useDeepCompareEffect(() => setDisabled(disabled), [disabled]);
 
   let emptyEl;
   if (loading) {
@@ -346,7 +345,7 @@ function ReDataTable({
     };
   }
 
-  useEffect(() => setFilterLabel(textLabels.filter.title), [textLabels.filter.title]);
+  useDeepCompareEffect(() => setFilterLabel(textLabels.filter.title), [textLabels.filter.title]);
 
   const durableData = getDurableData(durable);
 
@@ -447,27 +446,6 @@ ReDataTable.propTypes = {
   stripColor: PropTypes.string,
 };
 
-ReDataTable.defaultProps = {
-  options: {},
-  style: {},
-  locale: 'en',
-  loading: false,
-  disabled: false,
-  customPreButtons: [],
-  customButtons: [],
-  onChange: '',
-  stripped: false,
-  verticalKeyWidth: '',
-  hideTableHeader: false,
-  components: {},
-  emptyNode: '',
-  durable: '',
-  durableKeys: ['page', 'rowsPerPage', 'searchText', 'sortOrder'],
-  bgColor: 'transparent',
-  hoverColor: '',
-  stripColor: '',
-};
-
 const alignCss = css`
   .MuiTableCell-head {
     [class*='MUIDataTableHeadCell-toolButton'] {

package/src/Datatable/utils.js

@@ -16,8 +16,8 @@ function buildCSV(columns, data, options) {
     typeof columnData === 'string' ? columnData.replace(/"/g, '""') : columnData;
 
   // eslint-disable-next-line no-shadow
-  const buildHead = (columns) => {
-    return `${columns
+  const buildHead = (tmpColumns) => {
+    return `${tmpColumns
       .reduce(
         (soFar, column) =>
           column.download
@@ -33,9 +33,9 @@ function buildCSV(columns, data, options) {
   const CSVHead = buildHead(columns);
 
   // eslint-disable-next-line no-shadow
-  const buildBody = (data) => {
-    if (!data.length) return '';
-    return data
+  const buildBody = (tmpData) => {
+    if (!tmpData.length) return '';
+    return tmpData
       .reduce(
         (soFar, row) =>
           `${soFar}"${row.data
@@ -77,14 +77,14 @@ function downloadCSV(csv, filename) {
 }
 
 // eslint-disable-next-line no-shadow
-function createCSVDownload(columns, data, options, downloadCSV) {
+function createCSVDownload(columns, data, options, tmpDownloadCSV) {
   const csv = buildCSV(columns, data, options);
 
   if (options.onDownload && csv === false) {
     return;
   }
 
-  downloadCSV(csv, options.downloadOptions.filename);
+  tmpDownloadCSV(csv, options.downloadOptions.filename);
 }
 
 export function handleCSVDownload(props) {

package/src/Dialog/Dialog.stories.jsx

@@ -0,0 +1,21 @@
+export { default as Basic } from './demo/basic';
+export { default as WithShortContent } from './demo/with-short-content';
+export { default as CustomSize } from './demo/custom-size';
+export { default as CustomActionsPosition } from './demo/custom-actions-position';
+export { default as HeaderContentActionsStyleOverrides } from './demo/header-content-actions-style-overrides';
+export { default as ConfirmDefault } from './demo/confirm-default';
+export { default as ConfirmButtonCustomization } from './demo/confirm-button-customization';
+export { default as ConfirmWithoutCancelButton } from './demo/confirm-without-cancel-button';
+export { default as ConfirmComplexDescription } from './demo/confirm-complex-description';
+
+export default {
+  title: 'Feedback/Dialog',
+
+  parameters: {
+    docs: {
+      description: {
+        component: 'An easy-to-use dialog component based on MUI Dialog.',
+      },
+    },
+  },
+};

package/src/Dialog/confirm.jsx

@@ -34,13 +34,17 @@ export default function Confirm({
   children,
   onConfirm,
   onCancel,
-  showCloseButton,
-  showCancelButton,
-  showConfirmButton,
-  fullScreen,
-  confirmButton,
-  cancelButton,
-  PaperProps,
+  showCloseButton = true,
+  showCancelButton = true,
+  showConfirmButton = true,
+  fullScreen = false,
+  confirmButton = {
+    text: 'Confirm',
+  },
+  cancelButton = {
+    text: 'Cancel',
+  },
+  PaperProps = {},
   ...rest
 }) {
   // 去除 dialog 默认的 300 最小高度
@@ -137,17 +141,3 @@ Confirm.propTypes = {
   }),
   PaperProps: PropTypes.object,
 };
-
-Confirm.defaultProps = {
-  showCancelButton: true,
-  showConfirmButton: true,
-  showCloseButton: true,
-  fullScreen: false,
-  confirmButton: {
-    text: 'Confirm',
-  },
-  cancelButton: {
-    text: 'Cancel',
-  },
-  PaperProps: {},
-};

package/src/Dialog/dialog.jsx

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import CloseIcon from '@mui/icons-material/Close';
+import { Close as CloseIcon } from '@mui/icons-material';
 import {
   Typography,
   Dialog as MuiDialog,
@@ -52,14 +52,14 @@ import { styled, useTheme } from '../Theme';
  */
 function Dialog({
   children,
-  title,
-  prepend,
-  toolbar,
-  actions,
-  showCloseButton,
-  actionsPosition,
-  PaperProps,
-  slotProps,
+  title = '',
+  prepend = null,
+  toolbar = null,
+  actions = null,
+  showCloseButton = true,
+  actionsPosition = 'right',
+  PaperProps = {},
+  slotProps = {},
   ...rest
 }) {
   const theme = useTheme();
@@ -132,17 +132,6 @@ Dialog.propTypes = {
   onClose: PropTypes.func,
 };
 
-Dialog.defaultProps = {
-  title: '',
-  prepend: null,
-  toolbar: null,
-  actions: null,
-  showCloseButton: true,
-  actionsPosition: 'right',
-  PaperProps: {},
-  slotProps: {},
-  onClose: undefined,
-};
 /**
  * @type {import('@emotion/styled').StyledComponent<import('@mui/material').DialogProps, {}, { ref?: React.Ref<any> | undefined;}>}
  */

package/src/Dialog/use-confirm.jsx

@@ -1,10 +1,11 @@
-import { forwardRef, isValidElement, useImperativeHandle, useRef, useState } from 'react';
+import { isValidElement, useImperativeHandle, useRef, useState } from 'react';
 import { useMemoizedFn, useReactive } from 'ahooks';
 import noop from 'lodash/noop';
 
 import Confirm from './confirm';
 
-const ConfirmHolder = forwardRef((props, ref) => {
+// eslint-disable-next-line react/prop-types
+function ConfirmHolder({ ref, ...props }) {
   // HACK: 这里默认值不使用 null，来避免开发环境中的字段必填警告
   // HACK: useReactive 无法存储 react-node，所以只能使用 useState
   const [title, setTitle] = useState('');
@@ -147,7 +148,7 @@ const ConfirmHolder = forwardRef((props, ref) => {
       {realContent instanceof Function ? realContent() : realContent}
     </Confirm>
   );
-});
+}
 
 export default function useConfirm(props = {}) {
   const confirmRef = useRef(null);

package/src/DidLogo/Logo.stories.jsx

@@ -0,0 +1,8 @@
+export { default as WithDifferentSizes } from './demo/with-different-sizes';
+export { default as WithDifferentStyles } from './demo/with-different-styles';
+export { default as WithInheritStyles } from './demo/with-inherit-styles';
+export { default as MakeALogo } from './demo/make-a-logo';
+
+export default {
+  title: 'DID/Logo',
+};

package/src/DriftBot/index.tsx

@@ -11,7 +11,10 @@ export interface DriftBotProps {
 
 export default class DriftBot extends Component<DriftBotProps> {
   // eslint-disable-next-line react/static-property-placement
-  static defaultProps: { userId: string; attributes: Record<string, any> };
+  static defaultProps: { userId: string; attributes: Record<string, any> } = {
+    userId: '',
+    attributes: {},
+  };
 
   constructor(props: DriftBotProps) {
     super(mergeProps(props, DriftBot, ['attributes']) as DriftBotProps);
@@ -76,8 +79,3 @@ export default class DriftBot extends Component<DriftBotProps> {
     return '';
   }
 }
-
-DriftBot.defaultProps = {
-  userId: '',
-  attributes: {},
-};

package/src/Earth/Earth.stories.jsx

@@ -0,0 +1,39 @@
+import AsyncComponent from '../Async';
+
+const Earth = AsyncComponent(() => import('.'));
+
+export default {
+  title: 'Deprecated/Earth',
+
+  parameters: {
+    readme: {
+      sidebar: '<!-- PROPS -->',
+    },
+  },
+};
+
+export function DarkMode() {
+  return (
+    <div
+      style={{
+        background: '#222',
+      }}>
+      <Earth theme="dark" width={600} enableRotation />
+    </div>
+  );
+}
+
+DarkMode.storyName = 'dark mode';
+
+export function LightMode() {
+  return (
+    <div
+      style={{
+        background: 'transparent',
+      }}>
+      <Earth theme="light" width={600} enableRotation />
+    </div>
+  );
+}
+
+LightMode.storyName = 'light mode';

package/src/Earth/index.tsx

@@ -307,7 +307,7 @@ function Earth({
     if (state.tooltipIndex >= 0) {
       const marker = markers[state.tooltipIndex];
       return (
-        <Tooltip style={{ left: state.mousePosition[0], top: state.mousePosition[1] }}>
+        <Tooltip style={{ left: state.mousePosition?.[0] ?? 0, top: state.mousePosition?.[1] ?? 0 }}>
           <p className="title">{marker.title}</p>
           <p className="description">{marker.description}</p>
           <p className="description">ID: {marker.id}</p>

package/src/Empty/Empty.stories.jsx

@@ -0,0 +1,23 @@
+import Empty from './index';
+
+import Basic from './demo/basic';
+import CustomMessage from './demo/custom-message';
+import ComplexMessage from './demo/complex-message';
+
+export default {
+  title: 'Data Display/Empty',
+  component: Empty,
+  parameters: {
+    docs: {
+      description: {
+        component: 'Empty provides a generic "Empty Content" placeholder.',
+      },
+    },
+  },
+};
+
+Basic.parameters = {
+  layout: 'fullscreen',
+};
+
+export { Basic, CustomMessage, ComplexMessage };

package/src/Empty/index.jsx

@@ -30,7 +30,7 @@ const Wrapper = styled(Box)`
  * @param {EmptyProps} props
  * @returns {JSX.Element}
  */
-function Empty({ color, size, children, ...rest }) {
+function Empty({ color = 'inherit', size = 36, children = null, ...rest }) {
   return (
     <Wrapper {...rest}>
       <EmptyIcon style={{ width: size, height: size, color }} className="empty-icon" />
@@ -44,10 +44,5 @@ Empty.propTypes = {
   size: PropTypes.number,
   children: PropTypes.any,
 };
-Empty.defaultProps = {
-  color: 'inherit',
-  size: 36,
-  children: null,
-};
 
 export default Empty;

package/src/ErrorBoundary/ErrorBoundary.stories.jsx

@@ -0,0 +1,13 @@
+export { default as ErrorFallback } from './demo/error-fallback';
+
+export default {
+  title: 'Basic/ErrorBoundary',
+
+  parameters: {
+    docs: {
+      description: {
+        component: 'ErrorFallback provides a generic error fallback UI',
+      },
+    },
+  },
+};

package/src/ErrorBoundary/fallback.tsx

@@ -30,7 +30,11 @@ function InternalErrorFallback({
       }}>
       {title ? <AlertTitle>{title}</AlertTitle> : null}
       {desc ? (
-        <Typography variant="body2" mb={1}>
+        <Typography
+          variant="body2"
+          sx={{
+            mb: 1,
+          }}>
           {desc}
         </Typography>
       ) : null}

package/src/Footer/Footer.stories.jsx

@@ -0,0 +1,13 @@
+export { default as Basic } from './demo/basic';
+export { default as DarkMode } from './demo/dark-mode';
+export { default as CustomCopyStart } from './demo/custom-copy-start';
+export { default as CustomBrand } from './demo/custom-brand';
+export { default as Addon } from './demo/addon';
+
+export default {
+  title: 'Layout/Footer',
+
+  parameters: {
+    layout: 'fullscreen',
+  },
+};

package/src/Footer/index.tsx

@@ -1,7 +1,5 @@
 /* eslint-disable react/no-unused-prop-types */
-import Typography from '@mui/material/Typography';
-import MuiContainer from '@mui/material/Container';
-import Box from '@mui/material/Box';
+import { Typography, Container as MuiContainer, Box } from '@mui/material';
 
 import { mergeProps } from '../Util';
 import Logo from '../Logo';
@@ -18,7 +16,7 @@ export interface FooterProps {
 
 export default function Footer(props: FooterProps) {
   const newProps = mergeProps(props, Footer, ['dark', 'style']);
-  const { className, copyStart, style, brand, dark, addon } = newProps;
+  const { className = '', copyStart = '2017', style = {}, brand = 'ArcBlock', dark = false, addon = null } = newProps;
 
   const endYearString = `${new Date().getFullYear()}`;
   const copyStartString = `${copyStart}`;
@@ -47,26 +45,20 @@ export default function Footer(props: FooterProps) {
         </Typography>
       </MuiContainer>
       <Box
-        position="absolute"
-        right={16}
-        bottom={0}
-        fontSize={12}
-        sx={{ color: 'transparent', '::selection': { background: '#000', color: '#fff' } }}>
+        sx={{
+          position: 'absolute',
+          right: 16,
+          bottom: 0,
+          fontSize: 12,
+          color: 'transparent',
+          '::selection': { background: '#000', color: '#fff' },
+        }}>
         {window?.blocklet?.version}
       </Box>
     </Container>
   );
 }
 
-Footer.defaultProps = {
-  dark: false,
-  className: '',
-  copyStart: '2017',
-  brand: 'ArcBlock',
-  style: {},
-  addon: null,
-};
-
 type ContainerProps = {
   dark: boolean;
 };

package/src/Header/Header.stories.jsx

@@ -0,0 +1,30 @@
+import Basic from './demo/basic';
+import WithNavigation from './demo/with-navigation';
+import WithNavigationAlignRight from './demo/with-navigation-align-right';
+import ResponsiveHeader from './demo/responsive-header';
+
+export default {
+  title: 'Layout/Header',
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          'A generic page header component that supports common design elements such as logo, brand title, brand description, etc., and provides content slots for displaying navigation and action buttons.',
+      },
+    },
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/E8TSBWCOyXzETmVOjzbqvw/ArcBlock-UI-Kit?node-id=1504%3A4630',
+    },
+  },
+};
+
+const argTypes = {
+  maxWidth: { control: 'select', options: ['xs', 'sm', 'md', 'lg', 'xl', false] },
+};
+
+Basic.argTypes = argTypes;
+ResponsiveHeader.argTypes = argTypes;
+
+export { Basic, WithNavigation, WithNavigationAlignRight, ResponsiveHeader };

package/src/Header/auto-hidden.tsx

@@ -1,4 +1,4 @@
-import Box, { type BoxProps } from '@mui/material/Box';
+import { Box, type BoxProps } from '@mui/material';
 
 import { styled } from '../Theme';