@twreporter/react-components 9.7.0-rc.1 → 9.8.0-rc.0
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.
|
@@ -0,0 +1,100 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports["default"] = void 0;
|
|
8
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
9
|
+
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
10
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
11
|
+
var _color = require("@twreporter/core/lib/constants/color");
|
|
12
|
+
var _releaseBranch = require("@twreporter/core/lib/constants/release-branch");
|
|
13
|
+
var _paragraph = require("../text/paragraph");
|
|
14
|
+
var _enums = require("./enums");
|
|
15
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
16
|
+
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
17
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
|
|
18
|
+
// @twreporter
|
|
19
|
+
|
|
20
|
+
// components
|
|
21
|
+
|
|
22
|
+
var Container = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
23
|
+
displayName: "empty-state-v2__Container",
|
|
24
|
+
componentId: "sc-57h6av-0"
|
|
25
|
+
})(["width:100%;max-width:", ";display:flex;flex-direction:column;justify-content:center;align-items:center;"], function (props) {
|
|
26
|
+
return props.$maxWidth;
|
|
27
|
+
});
|
|
28
|
+
var TextContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
29
|
+
displayName: "empty-state-v2__TextContainer",
|
|
30
|
+
componentId: "sc-57h6av-1"
|
|
31
|
+
})(["margin-top:48px;display:flex;flex-direction:column;align-items:center;text-align:center;color:", ";"], _color.colorGrayscale.gray800);
|
|
32
|
+
var GuideContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
33
|
+
displayName: "empty-state-v2__GuideContainer",
|
|
34
|
+
componentId: "sc-57h6av-2"
|
|
35
|
+
})(["display:flex;align-items:baseline;text-align:center;color:", ";svg{background-color:", ";width:18px;height:18px;margin:0 4px;transform:translateY(3px);}"], _color.colorGrayscale.gray600, _color.colorGrayscale.gray600);
|
|
36
|
+
var ButtonContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
37
|
+
displayName: "empty-state-v2__ButtonContainer",
|
|
38
|
+
componentId: "sc-57h6av-3"
|
|
39
|
+
})(["margin-top:24px;display:flex;flex-direction:column;gap:16px;"]);
|
|
40
|
+
var EmptyState = function EmptyState(_ref) {
|
|
41
|
+
var _ref$releaseBranch = _ref.releaseBranch,
|
|
42
|
+
releaseBranch = _ref$releaseBranch === void 0 ? _releaseBranch.BRANCH.master : _ref$releaseBranch,
|
|
43
|
+
_ref$style = _ref.style,
|
|
44
|
+
style = _ref$style === void 0 ? _enums.Style.DEFAULT : _ref$style,
|
|
45
|
+
_ref$maxWidth = _ref.maxWidth,
|
|
46
|
+
maxWidth = _ref$maxWidth === void 0 ? '280px' : _ref$maxWidth,
|
|
47
|
+
_ref$title = _ref.title,
|
|
48
|
+
title = _ref$title === void 0 ? '' : _ref$title,
|
|
49
|
+
_ref$guide = _ref.guide,
|
|
50
|
+
guide = _ref$guide === void 0 ? null : _ref$guide,
|
|
51
|
+
_ref$buttonComponents = _ref.buttonComponents,
|
|
52
|
+
buttonComponents = _ref$buttonComponents === void 0 ? [] : _ref$buttonComponents;
|
|
53
|
+
var _useMemo = (0, _react.useMemo)(function () {
|
|
54
|
+
switch (style) {
|
|
55
|
+
case _enums.Style.DEFAULT:
|
|
56
|
+
default:
|
|
57
|
+
return {
|
|
58
|
+
imageUrl: "https://www.twreporter.org/assets/empty-state/".concat(releaseBranch, "/seek.png"),
|
|
59
|
+
imageWidth: '170'
|
|
60
|
+
};
|
|
61
|
+
case _enums.Style.PENCIL:
|
|
62
|
+
return {
|
|
63
|
+
imageUrl: "https://www.twreporter.org/assets/empty-state/".concat(releaseBranch, "/pencil.png"),
|
|
64
|
+
imageWidth: '232'
|
|
65
|
+
};
|
|
66
|
+
case _enums.Style.UNDER_CONSTRUCTION:
|
|
67
|
+
return {
|
|
68
|
+
imageUrl: "https://www.twreporter.org/assets/empty-state/".concat(releaseBranch, "/under_construction.png"),
|
|
69
|
+
imageWidth: '177'
|
|
70
|
+
};
|
|
71
|
+
}
|
|
72
|
+
}, [style, releaseBranch]),
|
|
73
|
+
imageUrl = _useMemo.imageUrl,
|
|
74
|
+
imageWidth = _useMemo.imageWidth;
|
|
75
|
+
return /*#__PURE__*/_react["default"].createElement(Container, {
|
|
76
|
+
$maxWidth: maxWidth
|
|
77
|
+
}, /*#__PURE__*/_react["default"].createElement("img", {
|
|
78
|
+
src: imageUrl,
|
|
79
|
+
width: imageWidth
|
|
80
|
+
}), /*#__PURE__*/_react["default"].createElement(TextContainer, null, /*#__PURE__*/_react["default"].createElement(_paragraph.P1, {
|
|
81
|
+
text: title,
|
|
82
|
+
weight: _paragraph.P1.Weight.BOLD
|
|
83
|
+
}), guide ? /*#__PURE__*/_react["default"].createElement(GuideContainer, null, typeof guide === 'string' ? /*#__PURE__*/_react["default"].createElement(_paragraph.P2, {
|
|
84
|
+
text: guide
|
|
85
|
+
}) : guide) : null), buttonComponents.length > 0 ? /*#__PURE__*/_react["default"].createElement(ButtonContainer, null, buttonComponents.map(function (button, index) {
|
|
86
|
+
return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, {
|
|
87
|
+
key: index
|
|
88
|
+
}, button);
|
|
89
|
+
})) : null);
|
|
90
|
+
};
|
|
91
|
+
EmptyState.propTypes = {
|
|
92
|
+
releaseBranch: _releaseBranch.BRANCH_PROP_TYPES,
|
|
93
|
+
style: _propTypes["default"].oneOf(Object.values(_enums.Style)),
|
|
94
|
+
title: _propTypes["default"].string,
|
|
95
|
+
maxWidth: _propTypes["default"].string,
|
|
96
|
+
guide: _propTypes["default"].oneOfType([_propTypes["default"].element, _propTypes["default"].string]),
|
|
97
|
+
buttonComponents: _propTypes["default"].arrayOf(_propTypes["default"].element)
|
|
98
|
+
};
|
|
99
|
+
EmptyState.Style = _enums.Style;
|
|
100
|
+
var _default = exports["default"] = EmptyState;
|
package/lib/empty-state/index.js
CHANGED
|
@@ -3,6 +3,13 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
+
exports.EmptyState = void 0;
|
|
7
|
+
Object.defineProperty(exports, "EmptyStateV2", {
|
|
8
|
+
enumerable: true,
|
|
9
|
+
get: function get() {
|
|
10
|
+
return _emptyStateV["default"];
|
|
11
|
+
}
|
|
12
|
+
});
|
|
6
13
|
exports["default"] = void 0;
|
|
7
14
|
var _react = _interopRequireDefault(require("react"));
|
|
8
15
|
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
@@ -13,6 +20,7 @@ var _paragraph = require("../text/paragraph");
|
|
|
13
20
|
var _button = require("../button");
|
|
14
21
|
var _enums = require("./enums");
|
|
15
22
|
var _sharedEnum = require("../shared-enum");
|
|
23
|
+
var _emptyStateV = _interopRequireDefault(require("./empty-state-v2"));
|
|
16
24
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
17
25
|
// @twreporter
|
|
18
26
|
|
|
@@ -41,7 +49,7 @@ var GuideContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
|
|
41
49
|
componentId: "sc-4ba2ko-4"
|
|
42
50
|
})(["display:flex;align-items:baseline;text-align:center;color:", ";svg{background-color:", ";width:18px;height:18px;margin:0 4px;transform:translateY(3px);}"], _color.colorGrayscale.gray600, _color.colorGrayscale.gray600);
|
|
43
51
|
var defaultFunc = function defaultFunc() {};
|
|
44
|
-
var EmptyState = function EmptyState(_ref) {
|
|
52
|
+
var EmptyState = exports.EmptyState = function EmptyState(_ref) {
|
|
45
53
|
var _ref$releaseBranch = _ref.releaseBranch,
|
|
46
54
|
releaseBranch = _ref$releaseBranch === void 0 ? _releaseBranch.BRANCH.master : _ref$releaseBranch,
|
|
47
55
|
_ref$style = _ref.style,
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.emptyStateV2 = exports["default"] = void 0;
|
|
7
|
+
var _react = _interopRequireDefault(require("react"));
|
|
8
|
+
var _index = require("../index");
|
|
9
|
+
var _enums = require("../enums");
|
|
10
|
+
var _getEnumArg = require("../../storybook/utils/get-enum-arg");
|
|
11
|
+
var _constants = require("../../storybook/constants");
|
|
12
|
+
var _button = require("../../button");
|
|
13
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
14
|
+
var _default = exports["default"] = {
|
|
15
|
+
title: 'Empty State',
|
|
16
|
+
component: _index.EmptyStateV2,
|
|
17
|
+
argTypes: {
|
|
18
|
+
releaseBranch: _constants.BRANCH_STORYBOOK_ARG_TYPE,
|
|
19
|
+
style: (0, _getEnumArg.getRadioArg)(_enums.Style, _enums.Style.DEFAULT)
|
|
20
|
+
}
|
|
21
|
+
};
|
|
22
|
+
var emptyStateV2 = exports.emptyStateV2 = {
|
|
23
|
+
args: {
|
|
24
|
+
title: '文字',
|
|
25
|
+
guide: '文字文字',
|
|
26
|
+
maxWidth: '100vw',
|
|
27
|
+
buttonComponents: [/*#__PURE__*/_react["default"].createElement(_button.PillButton, {
|
|
28
|
+
text: "\u6309\u9215",
|
|
29
|
+
key: 1
|
|
30
|
+
}), /*#__PURE__*/_react["default"].createElement(_button.PillButton, {
|
|
31
|
+
text: "\u6309\u9215",
|
|
32
|
+
type: _button.PillButton.Type.SECONDARY,
|
|
33
|
+
key: 2
|
|
34
|
+
})]
|
|
35
|
+
}
|
|
36
|
+
};
|
package/lib/icon/index.js
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports["default"] = exports.Youtube = exports.Video = exports.Twitter = exports.Topic = exports.Text = exports.Switch = exports.SocialMedia = exports.Share = exports.Search = exports.Report = exports.Printer = exports.Plurk = exports.OpenInNew = exports.More = exports.Member = exports.Medium = exports.Loading = exports.Line = exports.Letter = exports.KidStar = exports.Instagram = exports.Icon = exports.Home = exports.History = exports.Hamburger = exports.Google = exports.Fullscreen = exports.Filter = exports.Facebook = exports.Cross = exports.Copy = exports.Clock = exports.Bookmark = exports.Back = exports.Article = exports.Arrow = void 0;
|
|
6
|
+
exports["default"] = exports.Youtube = exports.Video = exports.Twitter = exports.Topic = exports.Text = exports.Switch = exports.SocialMedia = exports.Share = exports.Search = exports.Report = exports.Printer = exports.Plurk = exports.OpenInNew = exports.More = exports.Member = exports.Medium = exports.Loading = exports.Line = exports.Letter = exports.KidStar = exports.Instagram = exports.Icon = exports.Home = exports.History = exports.Hamburger = exports.Google = exports.Fullscreen = exports.Filter = exports.Facebook = exports.Download = exports.Cross = exports.Copy = exports.Clock = exports.Bookmark = exports.Back = exports.Article = exports.Arrow = void 0;
|
|
7
7
|
var _react = _interopRequireDefault(require("react"));
|
|
8
8
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
9
9
|
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
@@ -101,6 +101,7 @@ var Fullscreen = exports.Fullscreen = getIcon('fullscreen');
|
|
|
101
101
|
var Back = exports.Back = getIcon('back');
|
|
102
102
|
var More = exports.More = getIcon('more');
|
|
103
103
|
var OpenInNew = exports.OpenInNew = getIcon('open_in_new');
|
|
104
|
+
var Download = exports.Download = getIcon('download');
|
|
104
105
|
var Arrow = exports.Arrow = function Arrow(_ref3) {
|
|
105
106
|
var _ref3$direction = _ref3.direction,
|
|
106
107
|
direction = _ref3$direction === void 0 ? _enum.ArrowDirection.RIGHT : _ref3$direction,
|
|
@@ -179,5 +180,6 @@ var _default = exports["default"] = {
|
|
|
179
180
|
Video: Video,
|
|
180
181
|
Report: Report,
|
|
181
182
|
Switch: Switch,
|
|
182
|
-
OpenInNew: OpenInNew
|
|
183
|
+
OpenInNew: OpenInNew,
|
|
184
|
+
Download: Download
|
|
183
185
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@twreporter/react-components",
|
|
3
|
-
"version": "9.
|
|
3
|
+
"version": "9.8.0-rc.0",
|
|
4
4
|
"main": "lib/index.js",
|
|
5
5
|
"types": "lib/index.d.ts",
|
|
6
6
|
"repository": "https://github.com/twreporter/twreporter-npm-packages.git",
|
|
@@ -55,5 +55,5 @@
|
|
|
55
55
|
"react-dom": "^18.2.0",
|
|
56
56
|
"storybook": "^8.1.11"
|
|
57
57
|
},
|
|
58
|
-
"gitHead": "
|
|
58
|
+
"gitHead": "bd7f905d5ddb35e57c1c516682720f0fad31c6b4"
|
|
59
59
|
}
|