@arcblock/ux 2.6.8 → 2.7.0

package/es/Address/responsive-did-address.js

@@ -0,0 +1,88 @@
+import { useState, createRef, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import useMeasure from 'react-use/lib/useMeasure';
+import { styled } from '../Theme';
+import DidAddress from './did-address';
+
+/**
+ * 根据父容器宽度自动切换 compact 模式
+ *
+ * 实现逻辑:
+ * - DidAddress 外层包裹一个容器, 其宽度自动撑满父容器宽度 (即这个容器需要是块级元素或 100% 宽的 inline-block)
+ * - DidAddress 本身以 inline 形式渲染 (方便探测 did-address 的 full-width)
+ * - 组件 mounted 时记录 did address 的 full-width (非 compact 模式的宽度)
+ * - 监听容器宽度变化, 当容器宽度变化时, 对比容器宽度和 did address full-width, => 切换 compact 模式
+ * - TODO: 初始化时, 在确定是否应该以 compact 模式渲染前, 隐藏显示, 避免闪烁问题
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function ResponsiveDidAddress({
+  style,
+  className,
+  component,
+  ...rest
+}) {
+  const [compact, setCompact] = useState(false);
+  // did address 完整显示时的宽度
+  const [addressFullWidth, setAddressFullWidth] = useState(null);
+  const [containerRef, {
+    width: containerWidth
+  }] = useMeasure();
+  const ref = /*#__PURE__*/createRef();
+  // 存储完整显示时 address 组件的宽度
+  useEffect(() => {
+    if (!compact && addressFullWidth === null) {
+      setAddressFullWidth(ref.current.offsetWidth);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  useEffect(() => {
+    if (containerWidth && addressFullWidth) {
+      setCompact(containerWidth < addressFullWidth);
+    }
+  }, [containerWidth, addressFullWidth]);
+  return /*#__PURE__*/_jsx(Root, {
+    as: component,
+    inline: rest.inline,
+    ref: containerRef,
+    style: style,
+    className: className,
+    children: /*#__PURE__*/_jsx(StyledDidAddress, {
+      ...rest,
+      component: component,
+      inline: true,
+      compact: compact,
+      ref: ref
+    })
+  });
+}
+ResponsiveDidAddress.propTypes = {
+  style: PropTypes.object,
+  className: PropTypes.string,
+  component: PropTypes.string
+};
+ResponsiveDidAddress.defaultProps = {
+  style: {},
+  className: '',
+  component: 'span'
+};
+const Root = styled('div')`
+  display: block;
+  overflow: hidden;
+  ${({
+  inline
+}) => inline && `
+    display: inline-block;
+    width: 100%;
+  `}
+`;
+const StyledDidAddress = styled(DidAddress)`
+  && {
+    max-width: none;
+  }
+  .did-address-text {
+    /* 禁止文本 Ellipsis/截断, 以便测量真实的宽度 */
+    white-space: nowrap;
+    overflow: visible;
+    text-overflow: unset;
+  }
+`;

package/es/Alert/index.js

@@ -0,0 +1,134 @@
+import PropTypes from 'prop-types';
+import Typography from '@mui/material/Typography';
+import { blueGrey } from '@mui/material/colors';
+import Icon from '../Icon';
+import { mergeProps } from '../Util';
+import colors from '../Colors';
+import { styled } from '../Theme';
+import { withDeprecated } from '../Util/deprecate';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const types = {
+  error: {
+    icon: 'exclamation-circle',
+    color: colors.error.main,
+    borderColor: '#e35b54',
+    backgroundColor: 'rgba(227, 91, 84, 0.2)'
+  },
+  warning: {
+    icon: 'exclamation-triangle',
+    color: colors.warning.main,
+    borderColor: '#f7d040',
+    backgroundColor: 'rgba(247, 208, 64, 0.2)'
+  },
+  success: {
+    icon: 'check-circle',
+    color: colors.success.main,
+    borderColor: '#89ddd9',
+    backgroundColor: 'rgba(137, 221, 217, 0.2)'
+  },
+  tip: {
+    icon: 'info-circle',
+    color: colors.grey[500],
+    borderColor: '#222222',
+    backgroundColor: '#EEEEEE'
+  }
+};
+
+/**
+ * Alert notification component
+ * @typedef {{
+ *  type?: 'error' | 'warning' | 'success' | 'tip';
+ *  children: any;
+ *  className?: string;
+ *  style?: object | string;
+ *  variant?: 'border' | 'icon';
+ * } & import('react').ComponentPropsWithoutRef<"div"> } AlertProps
+ */
+
+/**
+ * Alert notification component
+ * @param {AlertProps} props
+ * @returns {JSX.Element}
+ */
+function Alert(props) {
+  /** @type {AlertProps} */
+  const newProps = mergeProps(props, Alert, ['style']);
+  const {
+    type,
+    children,
+    style,
+    className,
+    variant,
+    ...rest
+  } = newProps;
+  const {
+    icon,
+    color,
+    backgroundColor,
+    borderColor
+  } = types[type] || types.success;
+
+  /** @type {import('react').CSSProperties} */
+  const styles = Object.assign({
+    color: blueGrey[500],
+    backgroundColor: variant === 'border' ? backgroundColor : 'transparent',
+    borderLeft: variant === 'border' ? `5px solid ${borderColor}` : 'none'
+  }, style);
+  return /*#__PURE__*/_jsxs(Container, {
+    ...rest,
+    className: `alert alert--${type} alert--${variant} ${className}`.trim(),
+    style: styles,
+    children: [variant === 'icon' && /*#__PURE__*/_jsx(Icon, {
+      className: "alert-icon",
+      name: icon,
+      size: 24,
+      style: {
+        color
+      }
+    }), /*#__PURE__*/_jsx(Typography, {
+      component: "div",
+      className: "alert-content",
+      children: children
+    })]
+  });
+}
+Alert.propTypes = {
+  type: PropTypes.oneOf(Object.keys(types)),
+  children: PropTypes.any.isRequired,
+  className: PropTypes.string,
+  style: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
+  variant: PropTypes.oneOf(['border', 'icon'])
+};
+Alert.defaultProps = {
+  type: 'tip',
+  className: '',
+  style: '{}',
+  variant: 'border'
+};
+export default withDeprecated(Alert, {
+  name: 'Alert',
+  alternative: '@mui/material/Alert'
+});
+const Container = styled('div')`
+  display: flex;
+  align-items: center;
+  font-size: 16px;
+  margin: 0;
+  padding: 16px;
+  margin: 16px 0;
+
+  strong {
+    margin: 0 5px;
+  }
+
+  .alert-icon {
+    margin-right: 16px;
+  }
+
+  .alert-content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+  }
+`;