x-star-design 0.0.36 → 0.0.38

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/dist/ac-animation/index.js +12 -13
  2. package/dist/ali-player/index.js +9 -5
  3. package/dist/draggable-layout/index.js +78 -79
  4. package/dist/loading-mask/index.js +1 -0
  5. package/dist/rainbow-cat/index.js +3 -1
  6. package/dist/status-tag/index.js +4 -1
  7. package/dist/styles/index.css +1 -1
  8. package/dist/submission-status/index.d.ts +1 -1
  9. package/dist/submission-status/index.js +1 -0
  10. package/dist/title-with-icon/index.js +3 -0
  11. package/package.json +16 -3
package/dist/ac-animation/index.js CHANGED
@@ -46,17 +46,15 @@ var AcAnimation = function AcAnimation(_ref) {
46
46
  var img = new Image();
47
47
  img.src = imgUrl || '';
48
48
  useEffect(function () {
49
- if (canvas) {
50
- canvas.style.zIndex = '9999';
51
- canvas.style.width = '60vw';
52
- canvas.style.height = '60vh';
53
- canvas.style.position = 'absolute';
54
- canvas.style.top = '50%';
55
- canvas.style.left = '50%';
56
- canvas.style.transform = 'translate(-50%, -50%)';
57
- canvas.width = window.innerWidth;
58
- canvas.height = window.innerHeight;
59
- }
49
+ canvas.style.zIndex = '9999';
50
+ canvas.style.width = '60vw';
51
+ canvas.style.height = '60vh';
52
+ canvas.style.position = 'absolute';
53
+ canvas.style.top = '50%';
54
+ canvas.style.left = '50%';
55
+ canvas.style.transform = 'translate(-50%, -50%)';
56
+ canvas.width = window.innerWidth;
57
+ canvas.height = window.innerHeight;
60
58
  }, [canvas]);
61
59
  var resizeCanvas = function resizeCanvas() {
62
60
  canvas.width = window.innerWidth;
@@ -75,10 +73,10 @@ var AcAnimation = function AcAnimation(_ref) {
75
73
  ctx.shadowBlur = 4;
76
74
  ctx.textAlign = 'center';
77
75
  ctx.textBaseline = 'middle';
78
- ctx.font = "bold \n\t\t".concat((titleStyle === null || titleStyle === void 0 ? void 0 : titleStyle.fontSize) || 36, "px \n\t\t").concat((titleStyle === null || titleStyle === void 0 ? void 0 : titleStyle.fontFamily) || 'Arial');
76
+ ctx.font = "bold ".concat((titleStyle === null || titleStyle === void 0 ? void 0 : titleStyle.fontSize) || 36, "px ").concat((titleStyle === null || titleStyle === void 0 ? void 0 : titleStyle.fontFamily) || 'Arial');
79
77
  ctx.fillStyle = (titleStyle === null || titleStyle === void 0 ? void 0 : titleStyle.color) || '#022679';
80
78
  ctx.shadowColor = (titleStyle === null || titleStyle === void 0 ? void 0 : titleStyle.fontFamily) || 'rgba(2,38,121,0.2)';
81
- ctx.fillText(title || '', canvas.width / 2 + ((titleStyle === null || titleStyle === void 0 ? void 0 : titleStyle.offsetX) || 0), canvas.height / 2 + ((titleStyle === null || titleStyle === void 0 ? void 0 : titleStyle.offsetY) || 0));
79
+ ctx.fillText(title, canvas.width / 2 + ((titleStyle === null || titleStyle === void 0 ? void 0 : titleStyle.offsetX) || 0), canvas.height / 2 + ((titleStyle === null || titleStyle === void 0 ? void 0 : titleStyle.offsetY) || 0));
82
80
  ctx.restore();
83
81
  };
84
82
  var randomRange = function randomRange(min, max) {
@@ -175,6 +173,7 @@ var AcAnimation = function AcAnimation(_ref) {
175
173
  (_document$getElementB = document.getElementById('ac-canvas')) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.appendChild(canvas);
176
174
  }, []);
177
175
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
176
+ "data-testid": "ac-canvas",
178
177
  id: "ac-canvas",
179
178
  onClick: function onClick() {
180
179
  shutDownCanvas();
package/dist/ali-player/index.js CHANGED
@@ -42,10 +42,10 @@ var Aliplayer = function Aliplayer(_ref) {
42
42
  });
43
43
  useEffect(resize, [size, resize]);
44
44
  useEffect(function () {
45
- if (!(config !== null && config !== void 0 && config.playauth && config !== null && config !== void 0 && config.vid)) {
46
- return;
45
+ if (player.current) {
46
+ player.current.dispose();
47
+ player.current = undefined;
47
48
  }
48
- if (player.current) player.current.dispose();
49
49
  var create = function create() {
50
50
  var run = function run(retry) {
51
51
  var Aliplayer = window.Aliplayer;
@@ -75,12 +75,16 @@ var Aliplayer = function Aliplayer(_ref) {
75
75
  * 组件卸载时销毁 Aliplayer
76
76
  */
77
77
  useUnmount(function () {
78
- return player.current && player.current.dispose();
78
+ if (player.current) {
79
+ player.current.dispose();
80
+ player.current = undefined;
81
+ }
79
82
  });
80
83
  return /*#__PURE__*/React.createElement("div", {
81
84
  ref: wrapper
82
85
  }, /*#__PURE__*/React.createElement("div", {
83
- id: id
86
+ id: id,
87
+ "data-testid": "aliplayer-wrapper"
84
88
  }));
85
89
  };
86
90
  export default Aliplayer;
package/dist/draggable-layout/index.js CHANGED
@@ -31,110 +31,108 @@ var DraggableLayout = function DraggableLayout(_ref) {
31
31
  var leftRef = useRef(null);
32
32
  var rightRef = useRef(null);
33
33
  var enableTransition = useMemoizedFn(function () {
34
- if (dividerRef.current && leftRef.current && rightRef.current) {
35
- dividerRef.current.style.transition = 'color 0.3s, background 0.3s, border 0.3s, left 0.3s';
36
- leftRef.current.style.transition = 'left 0.3s, right 0.3s';
37
- rightRef.current.style.transition = 'left 0.3s, right 0.3s';
38
- }
34
+ dividerRef.current.style.transition = 'color 0.3s, background 0.3s, border 0.3s, left 0.3s';
35
+ leftRef.current.style.transition = 'left 0.3s, right 0.3s';
36
+ rightRef.current.style.transition = 'left 0.3s, right 0.3s';
39
37
  });
40
38
  var disableTransition = useMemoizedFn(function () {
41
- if (dividerRef.current && leftRef.current && rightRef.current) {
42
- dividerRef.current.style.transition = 'color 0.3s, background 0.3s, border 0.3s';
43
- leftRef.current.style.transition = '';
44
- rightRef.current.style.transition = '';
45
- }
39
+ dividerRef.current.style.transition = 'color 0.3s, background 0.3s, border 0.3s';
40
+ leftRef.current.style.transition = '';
41
+ rightRef.current.style.transition = '';
46
42
  });
47
43
  var dragHandler = useMemoizedFn(function (e) {
48
- if (!transition.current && wrapperRef.current && dividerRef.current && leftRef.current && rightRef.current) {
49
- if (collapsible[0] && e.offsetX < leftRef.current.offsetWidth / 2) {
50
- if (leftRef.current.style.right !== '100%') {
51
- // 左侧收起
52
- enableTransition();
53
- transition.current = true;
54
- setTimeout(function () {
55
- return transition.current = false;
56
- }, 300);
57
- dividerRef.current.classList.add("".concat(prefix, "draggable-divider-active"));
58
- dividerRef.current.style.left = '0';
59
- leftRef.current.style.left = "-".concat(minWidth[0]);
60
- leftRef.current.style.right = '100%';
61
- rightRef.current.style.left = dividerWidth;
62
- rightRef.current.style.right = '0';
63
- }
64
- } else if (collapsible[1] && e.offsetX > wrapperRef.current.offsetWidth - rightRef.current.offsetWidth / 2) {
65
- if (rightRef.current.style.left !== '100%') {
66
- // 右侧收起
67
- enableTransition();
68
- transition.current = true;
69
- setTimeout(function () {
70
- return transition.current = false;
71
- }, 300);
72
- dividerRef.current.classList.add("".concat(prefix, "draggable-divider-active"));
73
- dividerRef.current.style.left = "calc(100% - ".concat(dividerWidth, ")");
74
- leftRef.current.style.left = '0';
75
- leftRef.current.style.right = dividerWidth;
76
- rightRef.current.style.left = '100%';
77
- rightRef.current.style.right = "-".concat(minWidth[1]);
78
- }
79
- } else {
80
- // 同时展示
81
- if (leftRef.current.style.right === '100%' || rightRef.current.style.left === '100%') {
82
- transition.current = true;
83
- setTimeout(function () {
84
- transition.current = false;
85
- disableTransition();
86
- }, 300);
87
- }
88
- var width = "min(max(".concat(e.offsetX, "px, calc(").concat(minWidth[0], " + ").concat(dividerWidth, " / 2)), calc(100% - ").concat(minWidth[1], " - ").concat(dividerWidth, " / 2))");
89
- dividerRef.current.classList.remove("".concat(prefix, "draggable-divider-active"));
90
- dividerRef.current.style.left = "calc(".concat(width, " - ").concat(dividerWidth, " / 2)");
91
- leftRef.current.style.left = '0';
92
- leftRef.current.style.right = "calc(100% - ".concat(width, " + ").concat(dividerWidth, " / 2)");
93
- rightRef.current.style.left = "calc(".concat(width, " + ").concat(dividerWidth, " / 2)");
94
- rightRef.current.style.right = '0';
44
+ if (transition.current) {
45
+ return;
46
+ }
47
+ var wrapper = wrapperRef.current;
48
+ var divider = dividerRef.current;
49
+ var left = leftRef.current;
50
+ var right = rightRef.current;
51
+ var offsetX = e.clientX - wrapper.getBoundingClientRect().left;
52
+ if (collapsible[0] && offsetX < left.offsetWidth / 2) {
53
+ if (left.style.right !== '100%') {
54
+ // 左侧收起
55
+ enableTransition();
56
+ transition.current = true;
57
+ setTimeout(function () {
58
+ return transition.current = false;
59
+ }, 300);
60
+ divider.classList.add("".concat(prefix, "draggable-divider-active"));
61
+ divider.style.left = '0';
62
+ left.style.left = "-".concat(minWidth[0]);
63
+ left.style.right = '100%';
64
+ right.style.left = dividerWidth;
65
+ right.style.right = '0';
66
+ }
67
+ } else if (collapsible[1] && offsetX > wrapper.offsetWidth - right.offsetWidth / 2) {
68
+ if (right.style.left !== '100%') {
69
+ // 右侧收起
70
+ enableTransition();
71
+ transition.current = true;
72
+ setTimeout(function () {
73
+ return transition.current = false;
74
+ }, 300);
75
+ divider.classList.add("".concat(prefix, "draggable-divider-active"));
76
+ divider.style.left = "calc(100% - ".concat(dividerWidth, ")");
77
+ left.style.left = '0';
78
+ left.style.right = dividerWidth;
79
+ right.style.left = '100%';
80
+ right.style.right = "-".concat(minWidth[1]);
95
81
  }
82
+ } else {
83
+ // 同时展示
84
+ if (left.style.right === '100%' || right.style.left === '100%') {
85
+ transition.current = true;
86
+ setTimeout(function () {
87
+ transition.current = false;
88
+ disableTransition();
89
+ }, 300);
90
+ }
91
+ var width = "min(max(".concat(offsetX, "px, calc(").concat(minWidth[0], " + ").concat(dividerWidth, " / 2)), calc(100% - ").concat(minWidth[1], " - ").concat(dividerWidth, " / 2))");
92
+ divider.classList.remove("".concat(prefix, "draggable-divider-active"));
93
+ divider.style.left = "calc(".concat(width, " - ").concat(dividerWidth, " / 2)");
94
+ left.style.left = '0';
95
+ left.style.right = "calc(100% - ".concat(width, " + ").concat(dividerWidth, " / 2)");
96
+ right.style.left = "calc(".concat(width, " + ").concat(dividerWidth, " / 2)");
97
+ right.style.right = '0';
96
98
  }
97
99
  });
98
100
  var dragStart = useMemoizedFn(function () {
101
+ var wrapper = wrapperRef.current;
99
102
  setDragging(true);
100
- if (wrapperRef.current) {
101
- wrapperRef.current.style.cursor = 'col-resize';
102
- wrapperRef.current.addEventListener('mousemove', dragHandler, {
103
- capture: true,
104
- passive: true
105
- });
106
- document.addEventListener('mouseup', function () {
107
- setDragging(false);
108
- if (wrapperRef.current) {
109
- wrapperRef.current.style.cursor = 'unset';
110
- wrapperRef.current.removeEventListener('mousemove', dragHandler, {
111
- capture: true
112
- });
113
- }
114
- }, {
115
- capture: true,
116
- passive: true,
117
- once: true
103
+ wrapper.style.cursor = 'col-resize';
104
+ wrapper.addEventListener('mousemove', dragHandler, {
105
+ capture: true
106
+ });
107
+ document.addEventListener('mouseup', function () {
108
+ setDragging(false);
109
+ wrapper.style.cursor = 'unset';
110
+ wrapper.removeEventListener('mousemove', dragHandler, {
111
+ capture: true
118
112
  });
119
- }
113
+ }, {
114
+ capture: true,
115
+ once: true
116
+ });
120
117
  });
121
118
  return /*#__PURE__*/React.createElement("div", {
119
+ "data-testid": "wrapper",
122
120
  ref: wrapperRef,
123
121
  className: classNames("".concat(prefix, "draggable-layout"), className),
124
122
  style: style
125
123
  }, /*#__PURE__*/React.createElement("div", {
124
+ "data-testid": "divider",
126
125
  ref: dividerRef,
127
126
  className: dividerClassName !== null && dividerClassName !== void 0 ? dividerClassName : classNames("".concat(prefix, "draggable-divider")),
128
127
  style: {
129
128
  left: "calc(".concat(defaultWidth, " - ").concat(dividerWidth, " / 2)")
130
129
  },
131
- onDragStart: function onDragStart(e) {
132
- return e.preventDefault();
133
- },
134
130
  onMouseDown: dragStart
135
131
  }, dividerChildren), dragging && /*#__PURE__*/React.createElement("div", {
132
+ "data-testid": "mask",
136
133
  className: "".concat(prefix, "draggable-mask")
137
134
  }), /*#__PURE__*/React.createElement("div", {
135
+ "data-testid": "left",
138
136
  ref: leftRef,
139
137
  className: "".concat(prefix, "draggable-children"),
140
138
  style: {
@@ -142,6 +140,7 @@ var DraggableLayout = function DraggableLayout(_ref) {
142
140
  right: "calc(100% - ".concat(defaultWidth, " + ").concat(dividerWidth, " / 2)")
143
141
  }
144
142
  }, left), /*#__PURE__*/React.createElement("div", {
143
+ "data-testid": "right",
145
144
  ref: rightRef,
146
145
  className: "".concat(prefix, "draggable-children"),
147
146
  style: {
package/dist/loading-mask/index.js CHANGED
@@ -13,6 +13,7 @@ var LoadingMask = function LoadingMask(_ref) {
13
13
  mount = _useDelayedMount2[0],
14
14
  visible = _useDelayedMount2[1];
15
15
  return /*#__PURE__*/React.createElement(React.Fragment, null, mount && /*#__PURE__*/React.createElement("div", {
16
+ "data-testid": 'loadingMask',
16
17
  className: classNames("".concat(prefix, "loadingMask"), "".concat(visible ? '' : "".concat(prefix, "loadingHide")))
17
18
  }, /*#__PURE__*/React.createElement("div", {
18
19
  className: "".concat(prefix, "loadingLoader")
package/dist/rainbow-cat/index.js CHANGED
@@ -7,7 +7,9 @@ var RainbowCat = function RainbowCat(_ref) {
7
7
  }, /*#__PURE__*/React.createElement("img", {
8
8
  src: "https://static.production.xjoi.net/images/emoticon-1.gif",
9
9
  alt: ""
10
- }), /*#__PURE__*/React.createElement("div", null, text, /*#__PURE__*/React.createElement("span", {
10
+ }), /*#__PURE__*/React.createElement("div", {
11
+ "data-testid": "text"
12
+ }, text, /*#__PURE__*/React.createElement("span", {
11
13
  className: "".concat(prefix, "rainbowDot")
12
14
  }, "...")));
13
15
  };
package/dist/status-tag/index.js CHANGED
@@ -48,7 +48,8 @@ var StatusTag = function StatusTag(_ref) {
48
48
  backgroundColor: '#f6ffed',
49
49
  icon: /*#__PURE__*/React.createElement("img", {
50
50
  src: correctSVG,
51
- alt: ""
51
+ alt: "",
52
+ "data-testid": 'status-icon'
52
53
  })
53
54
  }], ['halfCorrect', {
54
55
  color: '#8585FE',
@@ -81,6 +82,7 @@ var StatusTag = function StatusTag(_ref) {
81
82
  textDecoration: 'line-through'
82
83
  }]]);
83
84
  return /*#__PURE__*/React.createElement("div", {
85
+ "data-testid": 'status-tag',
84
86
  className: classNames("".concat(prefix, "statusTag"), props.className),
85
87
  style: _objectSpread(_objectSpread({}, statusCSSMap.get(status)), {}, {
86
88
  borderRadius: shape === 'circle' ? '50%' : '4px'
@@ -89,6 +91,7 @@ var StatusTag = function StatusTag(_ref) {
89
91
  onMouseEnter: handleMouseEnter,
90
92
  onMouseLeave: handleMouseLeave
91
93
  }, statusCSSMap !== null && statusCSSMap !== void 0 && (_statusCSSMap$get = statusCSSMap.get(status)) !== null && _statusCSSMap$get !== void 0 && _statusCSSMap$get.icon ? hover ? showContent ? children : statusCSSMap === null || statusCSSMap === void 0 ? void 0 : (_statusCSSMap$get2 = statusCSSMap.get(status)) === null || _statusCSSMap$get2 === void 0 ? void 0 : _statusCSSMap$get2.icon : statusCSSMap === null || statusCSSMap === void 0 ? void 0 : (_statusCSSMap$get3 = statusCSSMap.get(status)) === null || _statusCSSMap$get3 === void 0 ? void 0 : _statusCSSMap$get3.icon : children, required && /*#__PURE__*/React.createElement("img", {
94
+ "data-testid": 'required-icon',
92
95
  src: diamondSVG,
93
96
  className: classNames("".concat(prefix, "required"), (_classNames = {}, _defineProperty(_classNames, "".concat(prefix, "circleRequired"), shape === 'circle'), _defineProperty(_classNames, "".concat(prefix, "rectRequired"), shape !== 'circle'), _classNames))
94
97
  }));
package/dist/styles/index.css CHANGED
@@ -69,7 +69,7 @@
69
69
  }
70
70
 
71
71
  .x-star-design-draggable-mask {
72
- position: absolute;
72
+ position: fixed;
73
73
  inset: 0;
74
74
  z-index: 99;
75
75
  }
package/dist/submission-status/index.d.ts CHANGED
@@ -20,7 +20,7 @@ export declare enum Status {
20
20
  WrongAnswer = "Wrong Answer"
21
21
  }
22
22
  type SubmissionStatusProps = {
23
- status: Status;
23
+ status: string;
24
24
  className?: string;
25
25
  onClick?: () => void;
26
26
  style?: React.CSSProperties;
package/dist/submission-status/index.js CHANGED
@@ -37,6 +37,7 @@ var SubmissionStatus = function SubmissionStatus(_ref) {
37
37
  return /*#__PURE__*/React.createElement(ConfigProviderWrapper, null, /*#__PURE__*/React.createElement(Tooltip, {
38
38
  title: locale === 'zh_CN' && (statusZh === null || statusZh === void 0 ? void 0 : statusZh.get(status))
39
39
  }, /*#__PURE__*/React.createElement("div", {
40
+ "data-testid": 'submissionStatus',
40
41
  className: classNames(className),
41
42
  style: _objectSpread({
42
43
  cursor: onClick ? 'pointer' : 'initial',
package/dist/title-with-icon/index.js CHANGED
@@ -8,14 +8,17 @@ var TitleWithIcon = function TitleWithIcon(_ref) {
8
8
  description = _ref.description,
9
9
  id = _ref.id;
10
10
  return /*#__PURE__*/React.createElement("div", {
11
+ "data-testid": "wrapper",
11
12
  className: classNames(className, "".concat(prefix, "titleSection")),
12
13
  id: id
13
14
  }, /*#__PURE__*/React.createElement("img", {
14
15
  src: rightSvg,
15
16
  alt: ""
16
17
  }), /*#__PURE__*/React.createElement("span", {
18
+ "data-testid": "title",
17
19
  className: "".concat(prefix, "title")
18
20
  }, title), /*#__PURE__*/React.createElement("span", {
21
+ "data-testid": "description",
19
22
  className: "".concat(prefix, "description")
20
23
  }, description));
21
24
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "x-star-design",
3
- "version": "0.0.36",
3
+ "version": "0.0.38",
4
4
  "description": "A react component library developed by turingstar",
5
5
  "license": "MIT",
6
6
  "module": "dist/index.js",
@@ -19,7 +19,8 @@
19
19
  "lint:es": "eslint \"{src,test}/**/*.{js,jsx,ts,tsx}\"",
20
20
  "prepare": "husky install && dumi setup",
21
21
  "prepublishOnly": "father doctor && npm run build",
22
- "start": "npm run dev"
22
+ "start": "npm run dev",
23
+ "test": "jest"
23
24
  },
24
25
  "commitlint": {
25
26
  "extends": [
@@ -63,21 +64,33 @@
63
64
  "rc-resize-observer": "^1.3.1",
64
65
  "react-sortable-hoc": "^2.0.0",
65
66
  "react-window": "^1.8.9",
66
- "x-star-utils": "^0.0.4"
67
+ "x-star-utils": "^0.0.9"
67
68
  },
68
69
  "devDependencies": {
69
70
  "@ant-design/icons": "4.7.0",
71
+ "@babel/core": "^7.23.3",
72
+ "@babel/preset-env": "^7.23.3",
73
+ "@babel/preset-react": "^7.23.3",
74
+ "@babel/preset-typescript": "^7.23.3",
70
75
  "@commitlint/cli": "^17.1.2",
71
76
  "@commitlint/config-conventional": "^17.1.0",
77
+ "@jest/globals": "^29.7.0",
78
+ "@testing-library/jest-dom": "^6.1.4",
79
+ "@testing-library/react": "^14.1.0",
80
+ "@testing-library/user-event": "^14.5.1",
72
81
  "@types/react": "^18.0.0",
73
82
  "@types/react-dom": "^18.0.0",
74
83
  "@types/react-window": "^1.8.5",
75
84
  "@umijs/lint": "^4.0.0",
76
85
  "antd": "5.2.2",
86
+ "babel-plugin-inline-import-data-uri": "^1.0.1",
77
87
  "dumi": "^2.2.0",
78
88
  "eslint": "^8.23.0",
79
89
  "father": "^4.1.0",
80
90
  "husky": "^8.0.1",
91
+ "jest": "^29.7.0",
92
+ "jest-canvas-mock": "^2.5.2",
93
+ "jest-environment-jsdom": "^29.7.0",
81
94
  "lint-staged": "^13.0.3",
82
95
  "prettier": "^2.7.1",
83
96
  "prettier-plugin-organize-imports": "^3.0.0",