@blocklet/list 0.8.14 → 0.8.17
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.
- package/lib/base.js +21 -24
- package/lib/components/{aside.js → aside/aside.js} +11 -12
- package/lib/components/aside/category-link-list.js +78 -0
- package/lib/components/aside/index.js +13 -0
- package/lib/components/category-select.js +55 -0
- package/lib/components/{button.js → custom-select/button.js} +1 -1
- package/lib/components/{custom-select.js → custom-select/custom-select.js} +8 -6
- package/lib/components/custom-select/index.js +13 -0
- package/lib/components/filter-author.js +2 -3
- package/lib/components/{empty.js → list/empty.js} +6 -8
- package/lib/components/list/index.js +13 -0
- package/lib/components/{list.js → list/list.js} +12 -12
- package/lib/components/search.js +21 -19
- package/lib/contexts/filter.js +268 -0
- package/lib/index.js +6 -16
- package/lib/libs/prop-types.js +34 -0
- package/lib/{tools → libs}/utils.js +6 -6
- package/package.json +60 -64
- package/src/base.js +17 -18
- package/src/components/{aside.js → aside/aside.js} +7 -8
- package/src/components/aside/category-link-list.js +53 -0
- package/src/components/aside/index.js +3 -0
- package/src/components/category-select.js +43 -0
- package/src/components/{button.js → custom-select/button.js} +0 -0
- package/src/components/{custom-select.js → custom-select/custom-select.js} +5 -4
- package/src/components/custom-select/index.js +3 -0
- package/src/components/filter-author.js +2 -3
- package/src/components/{empty.js → list/empty.js} +7 -8
- package/src/components/list/index.js +3 -0
- package/src/components/{list.js → list/list.js} +10 -10
- package/src/components/search.js +18 -14
- package/src/contexts/filter.js +197 -0
- package/src/index.js +6 -16
- package/src/libs/prop-types.js +26 -0
- package/src/{tools → libs}/utils.js +6 -6
- package/lib/components/categories.js +0 -143
- package/lib/contexts/store.js +0 -336
- package/lib/hooks/page-state.js +0 -69
- package/src/components/categories.js +0 -129
- package/src/contexts/store.js +0 -266
- package/src/hooks/page-state.js +0 -53
|
@@ -1,143 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.CategorySelect = exports.CategoryLinkList = void 0;
|
|
7
|
-
|
|
8
|
-
var _react = _interopRequireDefault(require("react"));
|
|
9
|
-
|
|
10
|
-
var _reactRouterDom = require("react-router-dom");
|
|
11
|
-
|
|
12
|
-
var _material = require("@mui/material");
|
|
13
|
-
|
|
14
|
-
var _urlJoin = _interopRequireDefault(require("url-join"));
|
|
15
|
-
|
|
16
|
-
var _store = require("../contexts/store");
|
|
17
|
-
|
|
18
|
-
var _customSelect = _interopRequireDefault(require("./custom-select"));
|
|
19
|
-
|
|
20
|
-
var _utils = require("../tools/utils");
|
|
21
|
-
|
|
22
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
23
|
-
|
|
24
|
-
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
25
|
-
|
|
26
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
27
|
-
|
|
28
|
-
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
29
|
-
|
|
30
|
-
/**
|
|
31
|
-
* 小屏幕下的分类选择器
|
|
32
|
-
* @returns
|
|
33
|
-
*/
|
|
34
|
-
const CategorySelect = () => {
|
|
35
|
-
var _categoryList$find;
|
|
36
|
-
|
|
37
|
-
const searchStore = (0, _store.useSearchContext)();
|
|
38
|
-
const {
|
|
39
|
-
categoryList,
|
|
40
|
-
selectedCategory,
|
|
41
|
-
handleCategorySelect,
|
|
42
|
-
t,
|
|
43
|
-
locale
|
|
44
|
-
} = searchStore;
|
|
45
|
-
|
|
46
|
-
const itemRender = item => {
|
|
47
|
-
return /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
|
|
48
|
-
className: ['my-select__option', selectedCategory !== null && selectedCategory !== void 0 && selectedCategory.includes(item.name) ? 'my-select__option--active' : ''].join(' '),
|
|
49
|
-
key: item._id,
|
|
50
|
-
value: item.name,
|
|
51
|
-
onClick: () => handleCategorySelect(item.name)
|
|
52
|
-
}, item.locales[locale]);
|
|
53
|
-
};
|
|
54
|
-
|
|
55
|
-
return /*#__PURE__*/_react.default.createElement(_customSelect.default, {
|
|
56
|
-
value: selectedCategory || 'all',
|
|
57
|
-
options: categoryList,
|
|
58
|
-
title: ((_categoryList$find = categoryList.find(i => i.name === selectedCategory)) === null || _categoryList$find === void 0 ? void 0 : _categoryList$find.locales[locale]) || t('category.all'),
|
|
59
|
-
itemRender: itemRender,
|
|
60
|
-
prepend: /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
|
|
61
|
-
value: "all",
|
|
62
|
-
onClick: () => handleCategorySelect('all')
|
|
63
|
-
}, t('category.all'))
|
|
64
|
-
});
|
|
65
|
-
};
|
|
66
|
-
/**
|
|
67
|
-
* 宽屏幕下的分类列表
|
|
68
|
-
* @returns
|
|
69
|
-
*/
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
exports.CategorySelect = CategorySelect;
|
|
73
|
-
|
|
74
|
-
const CategoryLinkList = () => {
|
|
75
|
-
const searchStore = (0, _store.useSearchContext)();
|
|
76
|
-
const {
|
|
77
|
-
queryParams,
|
|
78
|
-
categoryList,
|
|
79
|
-
isSearchPage,
|
|
80
|
-
selectedCategory,
|
|
81
|
-
isPageMode,
|
|
82
|
-
handleCategorySelect,
|
|
83
|
-
baseUrl,
|
|
84
|
-
locale,
|
|
85
|
-
t
|
|
86
|
-
} = searchStore;
|
|
87
|
-
let content = null;
|
|
88
|
-
|
|
89
|
-
if (isPageMode) {
|
|
90
|
-
content = /*#__PURE__*/_react.default.createElement("div", {
|
|
91
|
-
style: {
|
|
92
|
-
marginRight: '16px'
|
|
93
|
-
}
|
|
94
|
-
}, /*#__PURE__*/_react.default.createElement(_material.ListItem, {
|
|
95
|
-
selected: !selectedCategory,
|
|
96
|
-
button: true,
|
|
97
|
-
component: _reactRouterDom.Link,
|
|
98
|
-
to: !isSearchPage ? baseUrl : "".concat((0, _urlJoin.default)(baseUrl, '/search'), "?").concat((0, _utils.urlStringify)(_objectSpread(_objectSpread({}, Object.fromEntries(queryParams.entries())), {}, {
|
|
99
|
-
category: undefined
|
|
100
|
-
})))
|
|
101
|
-
}, /*#__PURE__*/_react.default.createElement(_material.ListItemText, {
|
|
102
|
-
primary: t('category.all')
|
|
103
|
-
})), categoryList.map(item => /*#__PURE__*/_react.default.createElement(_material.ListItem, {
|
|
104
|
-
key: item._id,
|
|
105
|
-
title: item.locales[locale],
|
|
106
|
-
button: true,
|
|
107
|
-
selected: item.name === selectedCategory,
|
|
108
|
-
component: _reactRouterDom.Link,
|
|
109
|
-
to: !isSearchPage ? "".concat((0, _urlJoin.default)(baseUrl, '/category', item.name)) : "".concat((0, _urlJoin.default)(baseUrl, '/search'), "?").concat((0, _utils.urlStringify)(_objectSpread(_objectSpread({}, Object.fromEntries(queryParams.entries())), {}, {
|
|
110
|
-
category: item.name
|
|
111
|
-
})))
|
|
112
|
-
}, /*#__PURE__*/_react.default.createElement(_material.ListItemText, {
|
|
113
|
-
primary: item.locales[locale]
|
|
114
|
-
}))));
|
|
115
|
-
} else {
|
|
116
|
-
content = /*#__PURE__*/_react.default.createElement("div", {
|
|
117
|
-
style: {
|
|
118
|
-
marginRight: '16px'
|
|
119
|
-
}
|
|
120
|
-
}, /*#__PURE__*/_react.default.createElement(_material.ListItem, {
|
|
121
|
-
selected: !selectedCategory,
|
|
122
|
-
button: true,
|
|
123
|
-
onClick: () => handleCategorySelect('all')
|
|
124
|
-
}, /*#__PURE__*/_react.default.createElement(_material.ListItemText, {
|
|
125
|
-
primary: t('category.all')
|
|
126
|
-
})), categoryList.map(item => /*#__PURE__*/_react.default.createElement(_material.ListItem, {
|
|
127
|
-
key: item._id,
|
|
128
|
-
title: item.locales[locale],
|
|
129
|
-
onClick: () => handleCategorySelect(item.name),
|
|
130
|
-
button: true,
|
|
131
|
-
selected: item.name === selectedCategory
|
|
132
|
-
}, /*#__PURE__*/_react.default.createElement(_material.ListItemText, {
|
|
133
|
-
primary: item.locales[locale]
|
|
134
|
-
}))));
|
|
135
|
-
}
|
|
136
|
-
|
|
137
|
-
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_material.ListItem, null, /*#__PURE__*/_react.default.createElement(_material.ListItemText, {
|
|
138
|
-
className: "category",
|
|
139
|
-
primary: t('common.category')
|
|
140
|
-
})), content);
|
|
141
|
-
};
|
|
142
|
-
|
|
143
|
-
exports.CategoryLinkList = CategoryLinkList;
|
package/lib/contexts/store.js
DELETED
|
@@ -1,336 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.SearchConsumer = void 0;
|
|
7
|
-
exports.SearchProvider = SearchProvider;
|
|
8
|
-
exports.useSearchContext = useSearchContext;
|
|
9
|
-
|
|
10
|
-
var _react = _interopRequireWildcard(require("react"));
|
|
11
|
-
|
|
12
|
-
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
13
|
-
|
|
14
|
-
var _reactRouterDom = require("react-router-dom");
|
|
15
|
-
|
|
16
|
-
var _ahooks = require("ahooks");
|
|
17
|
-
|
|
18
|
-
var _orderBy = _interopRequireDefault(require("lodash-es/orderBy"));
|
|
19
|
-
|
|
20
|
-
var _axios = _interopRequireDefault(require("axios"));
|
|
21
|
-
|
|
22
|
-
var _urlJoin = _interopRequireDefault(require("url-join"));
|
|
23
|
-
|
|
24
|
-
var _pageState = _interopRequireDefault(require("../hooks/page-state"));
|
|
25
|
-
|
|
26
|
-
var _utils = require("../tools/utils");
|
|
27
|
-
|
|
28
|
-
var _locale = _interopRequireDefault(require("../assets/locale"));
|
|
29
|
-
|
|
30
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
31
|
-
|
|
32
|
-
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
33
|
-
|
|
34
|
-
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
35
|
-
|
|
36
|
-
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
37
|
-
|
|
38
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
39
|
-
|
|
40
|
-
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
41
|
-
|
|
42
|
-
const axiosInstance = _axios.default.create();
|
|
43
|
-
|
|
44
|
-
const Search = /*#__PURE__*/(0, _react.createContext)({});
|
|
45
|
-
const {
|
|
46
|
-
Provider,
|
|
47
|
-
Consumer
|
|
48
|
-
} = Search;
|
|
49
|
-
exports.SearchConsumer = Consumer;
|
|
50
|
-
|
|
51
|
-
function SearchProvider(_ref) {
|
|
52
|
-
let {
|
|
53
|
-
children,
|
|
54
|
-
baseUrl,
|
|
55
|
-
type,
|
|
56
|
-
endpoint,
|
|
57
|
-
locale,
|
|
58
|
-
blockletRender
|
|
59
|
-
} = _ref;
|
|
60
|
-
const {
|
|
61
|
-
location
|
|
62
|
-
} = window;
|
|
63
|
-
const history = (0, _reactRouterDom.useHistory)();
|
|
64
|
-
const pathParams = (0, _reactRouterDom.useParams)();
|
|
65
|
-
const isPageMode = type === 'page';
|
|
66
|
-
|
|
67
|
-
if (isPageMode && !baseUrl) {
|
|
68
|
-
throw new Error('baseUrl is required when type is page');
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
const {
|
|
72
|
-
data: allBlocklets,
|
|
73
|
-
error: fetchBlockletsError,
|
|
74
|
-
loading: fetchBlockletsLoading,
|
|
75
|
-
run: fetchBlocklets
|
|
76
|
-
} = (0, _ahooks.useRequest)(async () => {
|
|
77
|
-
const {
|
|
78
|
-
data: list
|
|
79
|
-
} = await axiosInstance.get((0, _urlJoin.default)(endpoint, '/api/blocklets.json'));
|
|
80
|
-
return list;
|
|
81
|
-
}, {
|
|
82
|
-
initialData: [],
|
|
83
|
-
manual: true
|
|
84
|
-
});
|
|
85
|
-
const {
|
|
86
|
-
data: allCategories,
|
|
87
|
-
error: fetchCategoriesError,
|
|
88
|
-
loading: fetchCategoriesLoading,
|
|
89
|
-
run: fetchCategories
|
|
90
|
-
} = (0, _ahooks.useRequest)(async () => {
|
|
91
|
-
const {
|
|
92
|
-
data: list
|
|
93
|
-
} = await axiosInstance.get("".concat((0, _urlJoin.default)(endpoint, '/api/blocklets/categories')));
|
|
94
|
-
return list;
|
|
95
|
-
}, {
|
|
96
|
-
initialData: [],
|
|
97
|
-
manual: true
|
|
98
|
-
});
|
|
99
|
-
const [memoryParams, setMemoryParams] = (0, _react.useState)({
|
|
100
|
-
sortBy: 'popularity',
|
|
101
|
-
sortDirection: 'desc'
|
|
102
|
-
});
|
|
103
|
-
const queryParams = (0, _react.useMemo)(() => {
|
|
104
|
-
return isPageMode ? new URLSearchParams(location.search) : new Map(Object.entries(memoryParams));
|
|
105
|
-
}, [memoryParams, location.search]);
|
|
106
|
-
let sortParams; // 当作页面使用时 sort 数据比较特殊, 默认取 localStorge 中的值,如果 url query 中有sort值则优先使用
|
|
107
|
-
|
|
108
|
-
if (isPageMode) {
|
|
109
|
-
const localSortParams = (0, _pageState.default)({
|
|
110
|
-
sort: 'popularity',
|
|
111
|
-
direction: 'desc'
|
|
112
|
-
}, baseUrl);
|
|
113
|
-
const urlSortParams = {
|
|
114
|
-
sort: queryParams.get('sortBy'),
|
|
115
|
-
direction: queryParams.get('sortDirection')
|
|
116
|
-
};
|
|
117
|
-
sortParams = urlSortParams.sort && urlSortParams.direction ? urlSortParams : localSortParams;
|
|
118
|
-
} else {
|
|
119
|
-
sortParams = (0, _react.useMemo)(() => {
|
|
120
|
-
return {
|
|
121
|
-
sort: memoryParams.sortBy,
|
|
122
|
-
direction: memoryParams.sortDirection
|
|
123
|
-
};
|
|
124
|
-
}, [memoryParams]);
|
|
125
|
-
}
|
|
126
|
-
|
|
127
|
-
const isSearchPage = location.pathname === (0, _urlJoin.default)(baseUrl, '/search');
|
|
128
|
-
const selectedCategory = (0, _react.useMemo)(() => {
|
|
129
|
-
let result = null;
|
|
130
|
-
|
|
131
|
-
if (isPageMode) {
|
|
132
|
-
result = !isSearchPage ? pathParams.category : queryParams.get('category');
|
|
133
|
-
} else {
|
|
134
|
-
result = queryParams.get('category');
|
|
135
|
-
}
|
|
136
|
-
|
|
137
|
-
return result;
|
|
138
|
-
}, [isPageMode, pathParams, queryParams]);
|
|
139
|
-
const hasDeveloperFilter = !!queryParams.get('developer');
|
|
140
|
-
const categoryState = !hasDeveloperFilter ? {
|
|
141
|
-
data: allCategories
|
|
142
|
-
} : (0, _utils.getCategories)(allBlocklets, queryParams.get('developer'));
|
|
143
|
-
const blockletList = (0, _react.useMemo)(() => {
|
|
144
|
-
var _queryParams$search;
|
|
145
|
-
|
|
146
|
-
const sortByName = x => {
|
|
147
|
-
var _x$title, _x$name;
|
|
148
|
-
|
|
149
|
-
return (x === null || x === void 0 ? void 0 : (_x$title = x.title) === null || _x$title === void 0 ? void 0 : _x$title.toLocaleLowerCase()) || (x === null || x === void 0 ? void 0 : (_x$name = x.name) === null || _x$name === void 0 ? void 0 : _x$name.toLocaleLowerCase());
|
|
150
|
-
}; // 按名称排序
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
const sortByPopularity = x => x.stats.downloads; // 按下载量排序
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
const sortByPublish = x => x.lastPublishedAt; // 按发布时间
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
const sortMap = {
|
|
160
|
-
nameAsc: sortByName,
|
|
161
|
-
nameDesc: sortByName,
|
|
162
|
-
popularity: sortByPopularity,
|
|
163
|
-
publishAt: sortByPublish
|
|
164
|
-
};
|
|
165
|
-
let result = allBlocklets || []; // 按照付费/免费筛选
|
|
166
|
-
|
|
167
|
-
result = (0, _utils.filterBlockletByPrice)(result, queryParams.get('price')); // 按照分类筛选
|
|
168
|
-
|
|
169
|
-
result = result.filter(item => {
|
|
170
|
-
var _item$category;
|
|
171
|
-
|
|
172
|
-
return selectedCategory ? (item === null || item === void 0 ? void 0 : (_item$category = item.category) === null || _item$category === void 0 ? void 0 : _item$category.name) === selectedCategory : true;
|
|
173
|
-
}); // 按照作者筛选
|
|
174
|
-
|
|
175
|
-
result = result.filter(item => queryParams !== null && queryParams !== void 0 && queryParams.developer ? item.owner.did === queryParams.get('developer') : true);
|
|
176
|
-
const lowerSearch = (queryParams === null || queryParams === void 0 ? void 0 : (_queryParams$search = queryParams.search) === null || _queryParams$search === void 0 ? void 0 : _queryParams$search.toLocaleLowerCase()) || ''; // 按照搜索筛选
|
|
177
|
-
|
|
178
|
-
result = result.filter(item => {
|
|
179
|
-
var _ref2, _item$description, _item$version;
|
|
180
|
-
|
|
181
|
-
return ((_ref2 = (item === null || item === void 0 ? void 0 : item.title) || (item === null || item === void 0 ? void 0 : item.name)) === null || _ref2 === void 0 ? void 0 : _ref2.toLocaleLowerCase().includes(lowerSearch)) || ((_item$description = item.description) === null || _item$description === void 0 ? void 0 : _item$description.toLocaleLowerCase().includes(lowerSearch)) || (item === null || item === void 0 ? void 0 : (_item$version = item.version) === null || _item$version === void 0 ? void 0 : _item$version.toLocaleLowerCase().includes(lowerSearch));
|
|
182
|
-
}); // 排序
|
|
183
|
-
|
|
184
|
-
return (0, _orderBy.default)(result, [sortMap[sortParams.sort]], [sortParams.direction]);
|
|
185
|
-
}, [allBlocklets, queryParams, sortParams]);
|
|
186
|
-
const categoryList = (0, _react.useMemo)(() => {
|
|
187
|
-
const list = categoryState.data || []; // 分类按照名称排序
|
|
188
|
-
|
|
189
|
-
return (0, _orderBy.default)(list, [i => i.name], ['asc']);
|
|
190
|
-
}, [categoryState.data]);
|
|
191
|
-
|
|
192
|
-
const translate = (key, data) => {
|
|
193
|
-
if (!_locale.default[locale] || !_locale.default[locale][key]) {
|
|
194
|
-
console.warn("Warning: no ".concat(key, " translation of ").concat(locale));
|
|
195
|
-
return key;
|
|
196
|
-
}
|
|
197
|
-
|
|
198
|
-
return (0, _utils.replaceTranslate)(_locale.default[locale][key], data);
|
|
199
|
-
};
|
|
200
|
-
|
|
201
|
-
const searchStore = {
|
|
202
|
-
errors: {
|
|
203
|
-
fetchBlockletsError,
|
|
204
|
-
fetchCategoriesError
|
|
205
|
-
},
|
|
206
|
-
loadings: {
|
|
207
|
-
fetchBlockletsLoading,
|
|
208
|
-
fetchCategoriesLoading
|
|
209
|
-
},
|
|
210
|
-
endpoint,
|
|
211
|
-
sortParams,
|
|
212
|
-
history,
|
|
213
|
-
blockletList,
|
|
214
|
-
t: translate,
|
|
215
|
-
queryParams,
|
|
216
|
-
selectedCategory,
|
|
217
|
-
isSearchPage,
|
|
218
|
-
categoryList,
|
|
219
|
-
isPageMode,
|
|
220
|
-
baseUrl,
|
|
221
|
-
blockletRender,
|
|
222
|
-
locale,
|
|
223
|
-
handleSort: value => {
|
|
224
|
-
const changData = _objectSpread(_objectSpread({}, Object.fromEntries(queryParams.entries())), {}, {
|
|
225
|
-
sortBy: value,
|
|
226
|
-
sortDirection: value === 'nameAsc' ? 'asc' : 'desc'
|
|
227
|
-
});
|
|
228
|
-
|
|
229
|
-
if (isPageMode) {
|
|
230
|
-
sortParams.sort = changData.sortBy;
|
|
231
|
-
sortParams.direction = changData.sortDirection;
|
|
232
|
-
history.push("".concat((0, _urlJoin.default)(baseUrl, 'search'), "?").concat((0, _utils.urlStringify)(changData)));
|
|
233
|
-
} else {
|
|
234
|
-
setMemoryParams(changData);
|
|
235
|
-
}
|
|
236
|
-
},
|
|
237
|
-
handleSearchKeyword: value => {
|
|
238
|
-
const changData = _objectSpread(_objectSpread({}, Object.fromEntries(queryParams.entries())), {}, {
|
|
239
|
-
search: value || undefined
|
|
240
|
-
});
|
|
241
|
-
|
|
242
|
-
if (isPageMode) {
|
|
243
|
-
history.push("".concat((0, _urlJoin.default)(baseUrl, 'search'), "?").concat((0, _utils.urlStringify)(changData)));
|
|
244
|
-
} else {
|
|
245
|
-
setMemoryParams(changData);
|
|
246
|
-
}
|
|
247
|
-
},
|
|
248
|
-
handlePriceFilter: value => {
|
|
249
|
-
const changData = _objectSpread(_objectSpread({}, Object.fromEntries(queryParams.entries())), {}, {
|
|
250
|
-
price: value === queryParams.get('price') ? undefined : value
|
|
251
|
-
});
|
|
252
|
-
|
|
253
|
-
if (isPageMode) {
|
|
254
|
-
history.push("".concat((0, _urlJoin.default)(baseUrl, 'search'), "?").concat((0, _utils.urlStringify)(changData)));
|
|
255
|
-
} else {
|
|
256
|
-
setMemoryParams(changData);
|
|
257
|
-
}
|
|
258
|
-
},
|
|
259
|
-
getCategoryLocale: name => {
|
|
260
|
-
if (!name) return null;
|
|
261
|
-
let result = null;
|
|
262
|
-
const find = categoryState.data.find(item => item.name === name);
|
|
263
|
-
|
|
264
|
-
if (find) {
|
|
265
|
-
result = find.locales[locale];
|
|
266
|
-
}
|
|
267
|
-
|
|
268
|
-
return result;
|
|
269
|
-
},
|
|
270
|
-
handleCategorySelect: value => {
|
|
271
|
-
if (value === 'all') {
|
|
272
|
-
const changData = _objectSpread(_objectSpread({}, Object.fromEntries(queryParams.entries())), {}, {
|
|
273
|
-
category: undefined
|
|
274
|
-
});
|
|
275
|
-
|
|
276
|
-
if (isPageMode) {
|
|
277
|
-
history.push(!isSearchPage ? baseUrl : "".concat((0, _urlJoin.default)(baseUrl, 'search'), "?").concat((0, _utils.urlStringify)(changData)));
|
|
278
|
-
} else {
|
|
279
|
-
setMemoryParams(changData);
|
|
280
|
-
}
|
|
281
|
-
} else {
|
|
282
|
-
const changData = _objectSpread(_objectSpread({}, Object.fromEntries(queryParams.entries())), {}, {
|
|
283
|
-
category: value
|
|
284
|
-
});
|
|
285
|
-
|
|
286
|
-
if (isPageMode) {
|
|
287
|
-
history.push(!isSearchPage ? "".concat((0, _urlJoin.default)(baseUrl, 'category', value)) : "".concat((0, _urlJoin.default)(baseUrl, 'search'), "?").concat((0, _utils.urlStringify)(changData)));
|
|
288
|
-
} else {
|
|
289
|
-
setMemoryParams(changData);
|
|
290
|
-
}
|
|
291
|
-
}
|
|
292
|
-
},
|
|
293
|
-
|
|
294
|
-
get developerName() {
|
|
295
|
-
var _allBlocklets$find, _allBlocklets$find$ow;
|
|
296
|
-
|
|
297
|
-
return ((_allBlocklets$find = allBlocklets.find(i => i.owner.did === queryParams.get('developer'))) === null || _allBlocklets$find === void 0 ? void 0 : (_allBlocklets$find$ow = _allBlocklets$find.owner) === null || _allBlocklets$find$ow === void 0 ? void 0 : _allBlocklets$find$ow.name) || '';
|
|
298
|
-
}
|
|
299
|
-
|
|
300
|
-
};
|
|
301
|
-
(0, _react.useEffect)(() => {
|
|
302
|
-
if (!hasDeveloperFilter) {
|
|
303
|
-
fetchCategories();
|
|
304
|
-
}
|
|
305
|
-
}, [!hasDeveloperFilter]);
|
|
306
|
-
(0, _react.useEffect)(() => {
|
|
307
|
-
fetchBlocklets();
|
|
308
|
-
}, [endpoint]);
|
|
309
|
-
return /*#__PURE__*/_react.default.createElement(Provider, {
|
|
310
|
-
value: searchStore
|
|
311
|
-
}, children);
|
|
312
|
-
}
|
|
313
|
-
|
|
314
|
-
SearchProvider.propTypes = {
|
|
315
|
-
children: _propTypes.default.any.isRequired,
|
|
316
|
-
baseUrl: _propTypes.default.string,
|
|
317
|
-
endpoint: _propTypes.default.string.isRequired,
|
|
318
|
-
// 组件的类型: page 单独作为页面使用 持久化数据将存储在 url 和 localstorage,select 作为选择器组件使用 数据在存储在内存中
|
|
319
|
-
type: _propTypes.default.oneOf(['select', 'page']).isRequired,
|
|
320
|
-
locale: _propTypes.default.oneOf(['zh', 'en']),
|
|
321
|
-
blockletRender: _propTypes.default.func.isRequired
|
|
322
|
-
};
|
|
323
|
-
SearchProvider.defaultProps = {
|
|
324
|
-
baseUrl: null,
|
|
325
|
-
locale: 'zh'
|
|
326
|
-
};
|
|
327
|
-
|
|
328
|
-
function useSearchContext() {
|
|
329
|
-
const searchStore = (0, _react.useContext)(Search);
|
|
330
|
-
|
|
331
|
-
if (!searchStore) {
|
|
332
|
-
return {};
|
|
333
|
-
}
|
|
334
|
-
|
|
335
|
-
return searchStore;
|
|
336
|
-
}
|
package/lib/hooks/page-state.js
DELETED
|
@@ -1,69 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.default = usePageState;
|
|
7
|
-
|
|
8
|
-
var _ahooks = require("ahooks");
|
|
9
|
-
|
|
10
|
-
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
11
|
-
|
|
12
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
13
|
-
|
|
14
|
-
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
15
|
-
|
|
16
|
-
const PAGE_STATE_KEY = 'page-state';
|
|
17
|
-
|
|
18
|
-
function usePageState() {
|
|
19
|
-
let defaultValue = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
20
|
-
let persistence = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
|
|
21
|
-
let path = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : window.location.pathname;
|
|
22
|
-
const [pageState, setPageState] = (0, _ahooks.useLocalStorageState)(PAGE_STATE_KEY, {});
|
|
23
|
-
const state = (0, _ahooks.useReactive)(pageState);
|
|
24
|
-
|
|
25
|
-
if (!(path in pageState) && persistence) {
|
|
26
|
-
state[path] = defaultValue;
|
|
27
|
-
syncState();
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
function syncState() {
|
|
31
|
-
setPageState(state);
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
return new Proxy({}, {
|
|
35
|
-
get: (target, prop) => {
|
|
36
|
-
try {
|
|
37
|
-
return state[path][prop];
|
|
38
|
-
} catch (_unused) {
|
|
39
|
-
return undefined;
|
|
40
|
-
}
|
|
41
|
-
},
|
|
42
|
-
set: (target, prop, value) => {
|
|
43
|
-
try {
|
|
44
|
-
const data = _objectSpread(_objectSpread({}, state[path] || {}), {}, {
|
|
45
|
-
[prop]: value
|
|
46
|
-
});
|
|
47
|
-
|
|
48
|
-
state[path] = data;
|
|
49
|
-
syncState();
|
|
50
|
-
return true;
|
|
51
|
-
} catch (_unused2) {
|
|
52
|
-
return false;
|
|
53
|
-
}
|
|
54
|
-
},
|
|
55
|
-
deleteProperty: (target, prop) => {
|
|
56
|
-
try {
|
|
57
|
-
const data = _objectSpread({}, state[path] || {});
|
|
58
|
-
|
|
59
|
-
delete data[prop];
|
|
60
|
-
delete state[path][prop];
|
|
61
|
-
syncState();
|
|
62
|
-
return true;
|
|
63
|
-
} catch (_unused3) {
|
|
64
|
-
return false;
|
|
65
|
-
}
|
|
66
|
-
},
|
|
67
|
-
ownKeys: () => Object.keys(state[path] || {})
|
|
68
|
-
});
|
|
69
|
-
}
|
|
@@ -1,129 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { Link } from 'react-router-dom';
|
|
3
|
-
import { MenuItem, ListItem, ListItemText } from '@mui/material';
|
|
4
|
-
import joinUrl from 'url-join';
|
|
5
|
-
|
|
6
|
-
import { useSearchContext } from '../contexts/store';
|
|
7
|
-
import CustomSelect from './custom-select';
|
|
8
|
-
import { urlStringify } from '../tools/utils';
|
|
9
|
-
|
|
10
|
-
/**
|
|
11
|
-
* 小屏幕下的分类选择器
|
|
12
|
-
* @returns
|
|
13
|
-
*/
|
|
14
|
-
const CategorySelect = () => {
|
|
15
|
-
const searchStore = useSearchContext();
|
|
16
|
-
const { categoryList, selectedCategory, handleCategorySelect, t, locale } = searchStore;
|
|
17
|
-
const itemRender = (item) => {
|
|
18
|
-
return (
|
|
19
|
-
<MenuItem
|
|
20
|
-
className={['my-select__option', selectedCategory?.includes(item.name) ? 'my-select__option--active' : ''].join(
|
|
21
|
-
' '
|
|
22
|
-
)}
|
|
23
|
-
key={item._id}
|
|
24
|
-
value={item.name}
|
|
25
|
-
onClick={() => handleCategorySelect(item.name)}>
|
|
26
|
-
{item.locales[locale]}
|
|
27
|
-
</MenuItem>
|
|
28
|
-
);
|
|
29
|
-
};
|
|
30
|
-
|
|
31
|
-
return (
|
|
32
|
-
<CustomSelect
|
|
33
|
-
value={selectedCategory || 'all'}
|
|
34
|
-
options={categoryList}
|
|
35
|
-
title={categoryList.find((i) => i.name === selectedCategory)?.locales[locale] || t('category.all')}
|
|
36
|
-
itemRender={itemRender}
|
|
37
|
-
prepend={
|
|
38
|
-
<MenuItem value="all" onClick={() => handleCategorySelect('all')}>
|
|
39
|
-
{t('category.all')}
|
|
40
|
-
</MenuItem>
|
|
41
|
-
}
|
|
42
|
-
/>
|
|
43
|
-
);
|
|
44
|
-
};
|
|
45
|
-
/**
|
|
46
|
-
* 宽屏幕下的分类列表
|
|
47
|
-
* @returns
|
|
48
|
-
*/
|
|
49
|
-
const CategoryLinkList = () => {
|
|
50
|
-
const searchStore = useSearchContext();
|
|
51
|
-
const {
|
|
52
|
-
queryParams,
|
|
53
|
-
categoryList,
|
|
54
|
-
isSearchPage,
|
|
55
|
-
selectedCategory,
|
|
56
|
-
isPageMode,
|
|
57
|
-
handleCategorySelect,
|
|
58
|
-
baseUrl,
|
|
59
|
-
locale,
|
|
60
|
-
t,
|
|
61
|
-
} = searchStore;
|
|
62
|
-
|
|
63
|
-
let content = null;
|
|
64
|
-
if (isPageMode) {
|
|
65
|
-
content = (
|
|
66
|
-
<div style={{ marginRight: '16px' }}>
|
|
67
|
-
<ListItem
|
|
68
|
-
selected={!selectedCategory}
|
|
69
|
-
button
|
|
70
|
-
component={Link}
|
|
71
|
-
to={
|
|
72
|
-
!isSearchPage
|
|
73
|
-
? baseUrl
|
|
74
|
-
: `${joinUrl(baseUrl, '/search')}?${urlStringify({
|
|
75
|
-
...Object.fromEntries(queryParams.entries()),
|
|
76
|
-
category: undefined,
|
|
77
|
-
})}`
|
|
78
|
-
}>
|
|
79
|
-
<ListItemText primary={t('category.all')} />
|
|
80
|
-
</ListItem>
|
|
81
|
-
{categoryList.map((item) => (
|
|
82
|
-
<ListItem
|
|
83
|
-
key={item._id}
|
|
84
|
-
title={item.locales[locale]}
|
|
85
|
-
button
|
|
86
|
-
selected={item.name === selectedCategory}
|
|
87
|
-
component={Link}
|
|
88
|
-
to={
|
|
89
|
-
!isSearchPage
|
|
90
|
-
? `${joinUrl(baseUrl, '/category', item.name)}`
|
|
91
|
-
: `${joinUrl(baseUrl, '/search')}?${urlStringify({
|
|
92
|
-
...Object.fromEntries(queryParams.entries()),
|
|
93
|
-
category: item.name,
|
|
94
|
-
})}`
|
|
95
|
-
}>
|
|
96
|
-
<ListItemText primary={item.locales[locale]} />
|
|
97
|
-
</ListItem>
|
|
98
|
-
))}
|
|
99
|
-
</div>
|
|
100
|
-
);
|
|
101
|
-
} else {
|
|
102
|
-
content = (
|
|
103
|
-
<div style={{ marginRight: '16px' }}>
|
|
104
|
-
<ListItem selected={!selectedCategory} button onClick={() => handleCategorySelect('all')}>
|
|
105
|
-
<ListItemText primary={t('category.all')} />
|
|
106
|
-
</ListItem>
|
|
107
|
-
{categoryList.map((item) => (
|
|
108
|
-
<ListItem
|
|
109
|
-
key={item._id}
|
|
110
|
-
title={item.locales[locale]}
|
|
111
|
-
onClick={() => handleCategorySelect(item.name)}
|
|
112
|
-
button
|
|
113
|
-
selected={item.name === selectedCategory}>
|
|
114
|
-
<ListItemText primary={item.locales[locale]} />
|
|
115
|
-
</ListItem>
|
|
116
|
-
))}
|
|
117
|
-
</div>
|
|
118
|
-
);
|
|
119
|
-
}
|
|
120
|
-
return (
|
|
121
|
-
<>
|
|
122
|
-
<ListItem>
|
|
123
|
-
<ListItemText className="category" primary={t('common.category')} />
|
|
124
|
-
</ListItem>
|
|
125
|
-
{content}
|
|
126
|
-
</>
|
|
127
|
-
);
|
|
128
|
-
};
|
|
129
|
-
export { CategorySelect, CategoryLinkList };
|