x-star-design 0.0.63 → 0.0.65

package/dist/anchor-x-tabs/index.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+interface AnchorTabProps {
+    items: {
+        key: string;
+        title: string;
+        icon: React.ReactNode;
+        children: React.ReactNode;
+    }[];
+    rootMargin?: string;
+    stickyOffset?: number;
+}
+declare const AnchorXTabs: ({ items, rootMargin, stickyOffset, }: AnchorTabProps) => React.JSX.Element;
+export default AnchorXTabs;

package/dist/anchor-x-tabs/index.js

@@ -0,0 +1,88 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import { useInViewport, useMemoizedFn } from 'ahooks';
+import { Flex } from 'antd';
+import { ConfigContext } from 'antd/es/config-provider';
+import classNames from 'classnames';
+import React, { useContext, useEffect, useRef, useState } from 'react';
+import { hexToRgb } from "../utils/color";
+import { prefix } from "../utils/global";
+var AnchorXTabs = function AnchorXTabs(_ref) {
+  var _theme$token;
+  var items = _ref.items,
+    _ref$rootMargin = _ref.rootMargin,
+    rootMargin = _ref$rootMargin === void 0 ? '-50% 0px -50% 0px' : _ref$rootMargin,
+    _ref$stickyOffset = _ref.stickyOffset,
+    stickyOffset = _ref$stickyOffset === void 0 ? 64 : _ref$stickyOffset;
+  var colorThemeRef = useRef(null);
+  var _useContext = useContext(ConfigContext),
+    theme = _useContext.theme;
+  var _ref2 = (_theme$token = theme === null || theme === void 0 ? void 0 : theme.token) !== null && _theme$token !== void 0 ? _theme$token : {},
+    _ref2$colorPrimary = _ref2.colorPrimary,
+    colorPrimary = _ref2$colorPrimary === void 0 ? '#1990fe' : _ref2$colorPrimary;
+  useEffect(function () {
+    var _colorThemeRef$curren, _colorThemeRef$curren2;
+    // 设置主题色
+    (_colorThemeRef$curren = colorThemeRef.current) === null || _colorThemeRef$curren === void 0 ? void 0 : _colorThemeRef$curren.style.setProperty('--anchor-x-tabs-primary-color', colorPrimary);
+    (_colorThemeRef$curren2 = colorThemeRef.current) === null || _colorThemeRef$curren2 === void 0 ? void 0 : _colorThemeRef$curren2.style.setProperty('--anchor-x-tabs-secondary-color', hexToRgb(colorPrimary, 0.15));
+  }, [colorPrimary]);
+  var targetRef = useRef([]);
+  var _useState = useState(''),
+    _useState2 = _slicedToArray(_useState, 2),
+    activeItem = _useState2[0],
+    setActiveItem = _useState2[1];
+  var callback = useMemoizedFn(function (entry) {
+    if (entry.isIntersecting) {
+      var key = entry.target.getAttribute('id');
+      setActiveItem(key);
+    }
+  });
+  var handleMenuClick = function handleMenuClick(key) {
+    var element = document.getElementById(key);
+    element === null || element === void 0 ? void 0 : element.scrollIntoView({
+      behavior: 'smooth',
+      block: 'center',
+      inline: 'nearest'
+    });
+  };
+  useInViewport(targetRef.current, {
+    callback: callback,
+    rootMargin: rootMargin
+  });
+  return /*#__PURE__*/React.createElement(Flex, {
+    "data-testid": "container",
+    gap: 30
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: colorThemeRef,
+    className: "".concat(prefix, "-anchor-x-tabs")
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: 'sticky',
+      top: stickyOffset
+    }
+  }, items.map(function (item) {
+    var isActive = item.key === activeItem;
+    var anchorItemClassName = classNames("".concat(prefix, "-anchor-item"), _defineProperty({}, "".concat(prefix, "-active"), isActive));
+    return /*#__PURE__*/React.createElement("div", {
+      "data-testid": "anchor-x-tabs-".concat(item.key),
+      key: item.key,
+      className: anchorItemClassName,
+      onClick: function onClick() {
+        return handleMenuClick(item.key);
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "".concat(prefix, "-icon")
+    }, item.icon), /*#__PURE__*/React.createElement("div", {
+      className: "".concat(prefix, "-title")
+    }, item.title));
+  }))), /*#__PURE__*/React.createElement("div", null, items.map(function (item, index) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: item.key,
+      ref: function ref(el) {
+        return targetRef.current[index] = el;
+      },
+      id: item.key
+    }, item.children);
+  })));
+};
+export default AnchorXTabs;

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 export { default as AcAnimation } from './ac-animation';
 export { default as Aliplayer } from './aliplayer';
 export type { AliplayerConfig, AliplayerInstance } from './aliplayer';
+export { default as AnchorXTabs } from './anchor-x-tabs';
 export { default as CodeDetailModal } from './code-detail-modal';
 export { default as CodeMirrorWrapper } from './code-mirror-wrapper';
 export { LangId, Language, Theme } from './code-mirror-wrapper/define';

package/dist/index.js

@@ -1,5 +1,6 @@
 export { default as AcAnimation } from "./ac-animation";
 export { default as Aliplayer } from "./aliplayer";
+export { default as AnchorXTabs } from "./anchor-x-tabs";
 export { default as CodeDetailModal } from "./code-detail-modal";
 export { default as CodeMirrorWrapper } from "./code-mirror-wrapper";
 export { LangId, Language, Theme } from "./code-mirror-wrapper/define";

package/dist/input-numbers/index.d.ts

@@ -1,12 +1,13 @@
-import { InputNumberProps } from 'antd';
+import type { InputNumberProps } from 'antd';
 import React from 'react';
 export interface InputNumbersValue {
     start?: string | number | null;
     end?: string | number | null;
 }
-interface InputNumbersProps extends Omit<InputNumberProps, 'value' | 'onChange'> {
+interface InputNumbersProps extends Omit<InputNumberProps, 'defaultValue' | 'value' | 'onChange'> {
+    defaultValue?: InputNumbersValue;
     value?: InputNumbersValue;
     onChange?: (value: InputNumbersValue) => void;
 }
-declare const InputNumbers: ({ value, onChange, ...props }: InputNumbersProps) => React.JSX.Element;
+declare const InputNumbers: ({ defaultValue, value, onChange, ...props }: InputNumbersProps) => React.JSX.Element;
 export default InputNumbers;

package/dist/input-numbers/index.js

@@ -1,50 +1,56 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["value", "onChange"];
+var _excluded = ["defaultValue", "value", "onChange"];
+import { useUpdateEffect } from 'ahooks';
 import { InputNumber, Space } from 'antd';
 import React, { useState } from 'react';
 import ConfigProviderWrapper from "../config-provider-wrapper";
 var InputNumbers = function InputNumbers(_ref) {
-  var value = _ref.value,
+  var _mergedValue$start, _mergedValue$end;
+  var defaultValue = _ref.defaultValue,
+    value = _ref.value,
     _onChange = _ref.onChange,
     props = _objectWithoutProperties(_ref, _excluded);
-  var _useState = useState(value === null || value === void 0 ? void 0 : value.start),
+  var _useState = useState(value !== null && value !== void 0 ? value : defaultValue),
     _useState2 = _slicedToArray(_useState, 2),
-    start = _useState2[0],
-    setStart = _useState2[1];
-  var _useState3 = useState(value === null || value === void 0 ? void 0 : value.end),
-    _useState4 = _slicedToArray(_useState3, 2),
-    end = _useState4[0],
-    setEnd = _useState4[1];
+    innerValue = _useState2[0],
+    setInnerValue = _useState2[1];
+  var mergedValue = value !== undefined ? value : innerValue;
+  useUpdateEffect(function () {
+    if (value === undefined) {
+      setInnerValue(undefined);
+    }
+  }, [value]);
   return /*#__PURE__*/React.createElement(ConfigProviderWrapper, null, /*#__PURE__*/React.createElement(Space, {
-    split: '-',
-    align: "center"
+    align: "center",
+    split: "-"
   }, /*#__PURE__*/React.createElement(InputNumber, _extends({
     "data-testid": "start-input",
     min: 0,
     max: 100
   }, props, {
-    value: (value === null || value === void 0 ? void 0 : value.start) || start,
+    value: mergedValue ? (_mergedValue$start = mergedValue.start) !== null && _mergedValue$start !== void 0 ? _mergedValue$start : '' : undefined,
     onChange: function onChange(v) {
-      setStart(v);
-      _onChange === null || _onChange === void 0 ? void 0 : _onChange({
-        start: v,
-        end: end
+      var newValue = _objectSpread(_objectSpread({}, mergedValue), {}, {
+        start: v
       });
+      setInnerValue(newValue);
+      _onChange === null || _onChange === void 0 ? void 0 : _onChange(newValue);
     }
   })), /*#__PURE__*/React.createElement(InputNumber, _extends({
     "data-testid": "end-input",
     min: 0,
-    max: 100,
-    value: (value === null || value === void 0 ? void 0 : value.end) || end
+    max: 100
   }, props, {
+    value: mergedValue ? (_mergedValue$end = mergedValue.end) !== null && _mergedValue$end !== void 0 ? _mergedValue$end : '' : undefined,
     onChange: function onChange(v) {
-      setEnd(v);
-      _onChange === null || _onChange === void 0 ? void 0 : _onChange({
-        start: start,
+      var newValue = _objectSpread(_objectSpread({}, innerValue), {}, {
         end: v
       });
+      setInnerValue(newValue);
+      _onChange === null || _onChange === void 0 ? void 0 : _onChange(newValue);
     }
   }))));
 };

package/dist/styles/index.css

@@ -1,4 +1,39 @@
 @charset "UTF-8";
+.x-star-design-anchor-x-tabs {
+  width: 120px;
+  background-color: var(--anchor-x-tabs-secondary-color);
+}
+.x-star-design-anchor-x-tabs .x-star-design-anchor-item {
+  min-height: 120px;
+  padding: 14px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  word-break: break-all;
+  font-size: 16px;
+  font-weight: 500;
+  color: #a5a5a5;
+  background-color: transparent;
+  cursor: pointer;
+}
+.x-star-design-anchor-x-tabs .x-star-design-anchor-item .x-star-design-icon {
+  font-size: 40px;
+  color: #a5a5a5;
+}
+.x-star-design-anchor-x-tabs .x-star-design-anchor-item .x-star-design-title {
+  text-align: center;
+}
+.x-star-design-anchor-x-tabs .x-star-design-active {
+  color: var(--anchor-x-tabs-primary-color);
+  background-color: #fff;
+  border-left: 6px solid var(--anchor-x-tabs-primary-color);
+}
+.x-star-design-anchor-x-tabs .x-star-design-active .x-star-design-icon {
+  font-size: 40px;
+  color: var(--anchor-x-tabs-primary-color);
+}
+
 .x-star-design-codeDetailModal .x-star-design-codeCompileResult {
   padding: 10px 20px;
   background-color: #fafafa;

package/dist/submission-status/index.d.ts

@@ -5,6 +5,7 @@ export declare enum Status {
     CheckerJudgementFailed = "Checker Judgement Failed",
     CompileError = "Compile Error",
     DangerousSyscall = "Dangerous Syscall",
+    Hidden = "Hidden",
     JudgeFailed = "Judge Failed",
     JudgementFailed = "Judgement Failed",
     MemoryLimitExceeded = "Memory Limit Exceeded",
@@ -16,7 +17,6 @@ export declare enum Status {
     Skipped = "Skipped",
     SpecialJudgeError = "Special Judge Error",
     TimeLimitExceeded = "Time Limit Exceeded",
-    Unknown = "Unknown",
     WrongAnswer = "Wrong Answer"
 }
 interface SubmissionStatusProps {

package/dist/submission-status/index.js

@@ -9,6 +9,7 @@ export var Status = /*#__PURE__*/function (Status) {
   Status["CheckerJudgementFailed"] = "Checker Judgement Failed";
   Status["CompileError"] = "Compile Error";
   Status["DangerousSyscall"] = "Dangerous Syscall";
+  Status["Hidden"] = "Hidden";
   Status["JudgeFailed"] = "Judge Failed";
   Status["JudgementFailed"] = "Judgement Failed";
   Status["MemoryLimitExceeded"] = "Memory Limit Exceeded";
@@ -20,12 +21,11 @@ export var Status = /*#__PURE__*/function (Status) {
   Status["Skipped"] = "Skipped";
   Status["SpecialJudgeError"] = "Special Judge Error";
   Status["TimeLimitExceeded"] = "Time Limit Exceeded";
-  Status["Unknown"] = "Unknown";
   Status["WrongAnswer"] = "Wrong Answer";
   return Status;
 }({});
-var scopeColor = new Map([[Status.Accepted, '#00ad07'], [Status.WrongAnswer, '#f44336'], [Status.TimeLimitExceeded, '#56A2F5'], [Status.CompileError, '#F5B13D'], [Status.RuntimeError, '#F56ED3'], [Status.MemoryLimitExceeded, '#9256F5'], [Status.Running, '#ffa500'], [Status.Abnormal, '#9256F5'], [Status.Pending, '#ffa500']]);
-var statusZh = new Map([[Status.Abnormal, ''], [Status.Accepted, '答案正确'], [Status.CheckerJudgementFailed, '代码检查失败'], [Status.CompileError, '编译错误'], [Status.DangerousSyscall, '危险系统调用'], [Status.JudgeFailed, '评测失败'], [Status.JudgementFailed, '评测失败'], [Status.MemoryLimitExceeded, '内存超限'], [Status.OutputLimitExceeded, '输出超限'], [Status.Pending, '排队'], [Status.PresentationError, '段错误'], [Status.Running, '运行'], [Status.RuntimeError, '运行出错'], [Status.Skipped, '忽略'], [Status.SpecialJudgeError, ''], [Status.TimeLimitExceeded, '运行超时'], [Status.Unknown, 'OI赛制提交结果不可见'], [Status.WrongAnswer, '答案错误']]);
+var statusColor = new Map([[Status.Abnormal, '#8b008b'], [Status.Accepted, '#00ad07'], [Status.CheckerJudgementFailed, '#ff4500'], [Status.CompileError, '#f5b13d'], [Status.DangerousSyscall, '#ff69b4'], [Status.Hidden, '#808080'], [Status.JudgeFailed, '#2f4f4f'], [Status.JudgementFailed, '#4b0082'], [Status.MemoryLimitExceeded, '#9256f5'], [Status.OutputLimitExceeded, '#4682b4'], [Status.Pending, '#ffa500'], [Status.PresentationError, '#1e90ff'], [Status.Running, '#ff8c00'], [Status.RuntimeError, '#f56ed3'], [Status.Skipped, '#20b2aa'], [Status.SpecialJudgeError, '#ffd700'], [Status.TimeLimitExceeded, '#56a2f5'], [Status.WrongAnswer, '#f44336']]);
+var statusZh = new Map([[Status.Abnormal, '评测异常'], [Status.Accepted, '评测通过'], [Status.CheckerJudgementFailed, '检查器评测失败'], [Status.CompileError, '编译错误'], [Status.DangerousSyscall, '危险系统调用'], [Status.Hidden, '结果隐藏'], [Status.JudgeFailed, '评测失败'], [Status.JudgementFailed, '评测失败'], [Status.MemoryLimitExceeded, '内存超限'], [Status.OutputLimitExceeded, '输出超限'], [Status.Pending, '等待'], [Status.PresentationError, '格式错误'], [Status.Running, '运行中'], [Status.RuntimeError, '运行时错误'], [Status.Skipped, '跳过'], [Status.SpecialJudgeError, '特判器错误'], [Status.TimeLimitExceeded, '时间超限'], [Status.WrongAnswer, '答案错误']]);
 var SubmissionStatus = function SubmissionStatus(_ref) {
   var className = _ref.className,
     style = _ref.style,
@@ -34,13 +34,13 @@ var SubmissionStatus = function SubmissionStatus(_ref) {
   var _useLocale = useLocale('CodeDetailModal'),
     locale = _useLocale.locale;
   return /*#__PURE__*/React.createElement(ConfigProviderWrapper, null, /*#__PURE__*/React.createElement(Tooltip, {
-    title: locale === 'zh_CN' && (statusZh === null || statusZh === void 0 ? void 0 : statusZh.get(status))
+    title: locale === 'zh_CN' && statusZh.get(status)
   }, /*#__PURE__*/React.createElement("div", {
     "data-testid": 'submissionStatus',
     className: className,
     style: _objectSpread({
       fontWeight: 'bold',
-      color: scopeColor.get(status),
+      color: statusColor.get(status),
       cursor: onClick ? 'pointer' : 'unset'
     }, style),
     onClick: onClick

package/dist/utils/color.d.ts

@@ -0,0 +1,8 @@
+/**
+ * 将 16 进制颜色转换成 RGB
+ *
+ * @param hex 16 进制颜色
+ * @param alpha 透明度
+ * @returns RGB 颜色
+ */
+export declare const hexToRgb: (hex: string, alpha: number) => string;

package/dist/utils/color.js

@@ -0,0 +1,20 @@
+/**
+ * 将 16 进制颜色转换成 RGB
+ *
+ * @param hex 16 进制颜色
+ * @param alpha 透明度
+ * @returns RGB 颜色
+ */
+export var hexToRgb = function hexToRgb(hex, alpha) {
+  var r, g, b;
+  if (hex.length === 4) {
+    r = +"0x".concat(hex[1]).concat(hex[1]);
+    g = +"0x".concat(hex[2]).concat(hex[2]);
+    b = +"0x".concat(hex[3]).concat(hex[3]);
+  } else {
+    r = +"0x".concat(hex[1]).concat(hex[2]);
+    g = +"0x".concat(hex[3]).concat(hex[4]);
+    b = +"0x".concat(hex[5]).concat(hex[6]);
+  }
+  return "rgb(".concat(r, " ").concat(g, " ").concat(b, " / ").concat(alpha, ")");
+};

package/dist/x-tabs/index.js

@@ -7,24 +7,8 @@ import { ConfigContext } from 'antd/es/config-provider';
 import classNames from 'classnames';
 import React, { useContext, useEffect, useMemo, useRef } from 'react';
 import ConfigProviderWrapper from "../config-provider-wrapper";
+import { hexToRgb } from "../utils/color";
 import { prefix } from "../utils/global";
-
-//hash颜色转换rgba
-function hexToRGBA(hex, alpha) {
-  var r = '',
-    g = '',
-    b = '';
-  if (hex.length === 4) {
-    r = '0x' + hex[1] + hex[1];
-    g = '0x' + hex[2] + hex[2];
-    b = '0x' + hex[3] + hex[3];
-  } else {
-    r = '0x' + hex[1] + hex[2];
-    g = '0x' + hex[3] + hex[4];
-    b = '0x' + hex[5] + hex[6];
-  }
-  return "rgba(".concat(+r, ",").concat(+g, ",").concat(+b, ",").concat(alpha, ")");
-}
 var XTabs = function XTabs(_ref) {
   var _theme$token;
   var className = _ref.className,
@@ -38,9 +22,9 @@ var XTabs = function XTabs(_ref) {
     colorPrimary = _ref2$colorPrimary === void 0 ? '#1990fe' : _ref2$colorPrimary;
   useEffect(function () {
     var _colorThemeRef$curren, _colorThemeRef$curren2;
-    //设置主题色
+    // 设置主题色
     (_colorThemeRef$curren = colorThemeRef.current) === null || _colorThemeRef$curren === void 0 ? void 0 : _colorThemeRef$curren.style.setProperty('--x-tabs-primary-color', colorPrimary);
-    (_colorThemeRef$curren2 = colorThemeRef.current) === null || _colorThemeRef$curren2 === void 0 ? void 0 : _colorThemeRef$curren2.style.setProperty('--x-tabs-secondary-color', hexToRGBA(colorPrimary, 0.15));
+    (_colorThemeRef$curren2 = colorThemeRef.current) === null || _colorThemeRef$curren2 === void 0 ? void 0 : _colorThemeRef$curren2.style.setProperty('--x-tabs-secondary-color', hexToRgb(colorPrimary, 0.15));
   }, [colorPrimary]);
   var newItems = useMemo(function () {
     return items === null || items === void 0 ? void 0 : items.map(function (item) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "x-star-design",
-  "version": "0.0.63",
+  "version": "0.0.65",
   "description": "A react component library developed by turingstar",
   "license": "MIT",
   "module": "dist/index.js",
@@ -57,7 +57,7 @@
     "@uiw/codemirror-theme-okaidia": "^4.21.9",
     "@uiw/codemirror-theme-vscode": "^4.21.9",
     "@uiw/react-codemirror": "^4.21.9",
-    "ahooks": "^3.7.8",
+    "ahooks": "^3.8.0",
     "classnames": "^2.3.2",
     "randomcolor": "^0.6.2",
     "react-error-boundary": "^4.0.13",