matsuri-ui 10.2.1 → 10.2.2
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/dist/cjs/@utils/arrayShallowEqual.js +13 -0
- package/dist/cjs/@utils/arrayShallowEqual.js.map +1 -0
- package/dist/cjs/SortArea/index.js +36 -20
- package/dist/cjs/SortArea/index.js.map +1 -1
- package/dist/esm/@utils/arrayShallowEqual.js +4 -0
- package/dist/esm/@utils/arrayShallowEqual.js.map +1 -0
- package/dist/esm/SortArea/index.js +41 -24
- package/dist/esm/SortArea/index.js.map +1 -1
- package/dist/types/@utils/arrayShallowEqual.d.ts +1 -0
- package/dist/types/SortArea/index.d.ts +1 -1
- package/package.json +1 -1
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.arrayShallowEqual = void 0;
|
|
7
|
+
|
|
8
|
+
const arrayShallowEqual = (a, b) => {
|
|
9
|
+
return a.length === b.length && a.every((v, i) => v === b[i]);
|
|
10
|
+
};
|
|
11
|
+
|
|
12
|
+
exports.arrayShallowEqual = arrayShallowEqual;
|
|
13
|
+
//# sourceMappingURL=arrayShallowEqual.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/@utils/arrayShallowEqual.ts"],"names":["arrayShallowEqual","a","b","length","every","v","i"],"mappings":";;;;;;;AAAO,MAAMA,iBAAiB,GAAG,CAACC,CAAD,EAAwBC,CAAxB,KAAkD;AAC/E,SAAOD,CAAC,CAACE,MAAF,KAAaD,CAAC,CAACC,MAAf,IAAyBF,CAAC,CAACG,KAAF,CAAQ,CAACC,CAAD,EAAIC,CAAJ,KAAUD,CAAC,KAAKH,CAAC,CAACI,CAAD,CAAzB,CAAhC;AACH,CAFM","sourcesContent":["export const arrayShallowEqual = (a: readonly unknown[], b: readonly unknown[]) => {\n return a.length === b.length && a.every((v, i) => v === b[i])\n}\n"],"file":"arrayShallowEqual.js"}
|
|
@@ -7,6 +7,8 @@ exports.SortArea = void 0;
|
|
|
7
7
|
|
|
8
8
|
var _Layouts = require("../Layouts");
|
|
9
9
|
|
|
10
|
+
var _arrayShallowEqual = require("../@utils/arrayShallowEqual");
|
|
11
|
+
|
|
10
12
|
var _react = require("@emotion/react");
|
|
11
13
|
|
|
12
14
|
var _react2 = _interopRequireWildcard(require("react"));
|
|
@@ -29,17 +31,32 @@ const camelize = str => {
|
|
|
29
31
|
const dataid = "data-sort-area-item-index";
|
|
30
32
|
const dataId = camelize(dataid.replace("data-", ""));
|
|
31
33
|
|
|
34
|
+
const SortArea = ({
|
|
35
|
+
list,
|
|
36
|
+
...props
|
|
37
|
+
}) => {
|
|
38
|
+
if (list === undefined || list.length === 0) {
|
|
39
|
+
return null;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
return (0, _react.jsx)(SortAreaInner, _extends({
|
|
43
|
+
list: list
|
|
44
|
+
}, props));
|
|
45
|
+
};
|
|
46
|
+
|
|
47
|
+
exports.SortArea = SortArea;
|
|
48
|
+
|
|
32
49
|
var _ref = process.env.NODE_ENV === "production" ? {
|
|
33
50
|
name: "stsb6k",
|
|
34
51
|
styles: "& [draggable=\"true\"]{z-index:0;box-sizing:border-box;cursor:grab;user-select:none;transition:transform 0.2s ease-out,outline 0.2s ease-out;&[data-drag-state=\"over\"]{outline:2px dotted rgba(0, 0, 0, 0.2);}&[data-drag-state=\"dragging\"]{z-index:999;cursor:grabbing;opacity:0.5;transform:scale(0.8);}}"
|
|
35
52
|
} : {
|
|
36
|
-
name: "
|
|
37
|
-
styles: "& [draggable=\"true\"]{z-index:0;box-sizing:border-box;cursor:grab;user-select:none;transition:transform 0.2s ease-out,outline 0.2s ease-out;&[data-drag-state=\"over\"]{outline:2px dotted rgba(0, 0, 0, 0.2);}&[data-drag-state=\"dragging\"]{z-index:999;cursor:grabbing;opacity:0.5;transform:scale(0.8);}};label:
|
|
38
|
-
map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,
|
|
53
|
+
name: "cep9g1-SortAreaInner",
|
|
54
|
+
styles: "& [draggable=\"true\"]{z-index:0;box-sizing:border-box;cursor:grab;user-select:none;transition:transform 0.2s ease-out,outline 0.2s ease-out;&[data-drag-state=\"over\"]{outline:2px dotted rgba(0, 0, 0, 0.2);}&[data-drag-state=\"dragging\"]{z-index:999;cursor:grabbing;opacity:0.5;transform:scale(0.8);}};label:SortAreaInner;",
|
|
55
|
+
map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9Tb3J0QXJlYS9pbmRleC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBNEdvQiIsImZpbGUiOiIuLi8uLi8uLi9zcmMvU29ydEFyZWEvaW5kZXgudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQm94LCBCb3hQcm9wcyB9IGZyb20gXCIuLi9MYXlvdXRzXCJcbmltcG9ydCB7IGFycmF5U2hhbGxvd0VxdWFsIH0gZnJvbSBcIi4uL0B1dGlscy9hcnJheVNoYWxsb3dFcXVhbFwiXG5pbXBvcnQgeyBjc3MgfSBmcm9tIFwiQGVtb3Rpb24vcmVhY3RcIlxuaW1wb3J0IFJlYWN0LCB7IHVzZUNhbGxiYWNrLCB1c2VNZW1vLCB1c2VSZWYsIHVzZVN0YXRlIH0gZnJvbSBcInJlYWN0XCJcblxuY29uc3QgY2FtZWxpemUgPSAoc3RyOiBzdHJpbmcpID0+IHtcbiAgICBsZXQgYXJyID0gc3RyLnNwbGl0KFwiLVwiKVxuICAgIGxldCBjYXBpdGFsID0gYXJyLm1hcCgoaXRlbSwgaW5kZXgpID0+IChpbmRleCA/IGl0ZW0uY2hhckF0KDApLnRvVXBwZXJDYXNlKCkgKyBpdGVtLnNsaWNlKDEpLnRvTG93ZXJDYXNlKCkgOiBpdGVtKSlcbiAgICBsZXQgY2FwaXRhbFN0cmluZyA9IGNhcGl0YWwuam9pbihcIlwiKVxuICAgIHJldHVybiBjYXBpdGFsU3RyaW5nXG59XG5cbmNvbnN0IGRhdGFpZCA9IFwiZGF0YS1zb3J0LWFyZWEtaXRlbS1pbmRleFwiXG5jb25zdCBkYXRhSWQgPSBjYW1lbGl6ZShkYXRhaWQucmVwbGFjZShcImRhdGEtXCIsIFwiXCIpKVxuXG5leHBvcnQgaW50ZXJmYWNlIFNvcnRBcmVhUHJvcHMgZXh0ZW5kcyBPbWl0PEJveFByb3BzLCBcIm9uQ2hhbmdlXCI+IHtcbiAgICAvKipcbiAgICAgKiDjgZPjga7jgrPjg7Pjg53jg7zjg43jg7Pjg4jjga7lrZDopoHntKDjga9rZXnlsZ7mgKfjgpLlv4XjgZrmjIHjgaPjgabjgYTjgovlv4XopoHjgYzjgYLjgorjgb7jgZnjgIJcbiAgICAgKiBrZXnjga91bmlxdWXjgafjgarjgZHjgozjgbDjgarjgorjgb7jgZvjgpPjgILmsbrjgZfjgablronnm7TjgaptYXDjga5pbmRleOOBquOBqeOCkua4oeOBleOBquOBhOOCiOOBhuOBq+OBl+OBpuOBj+OBoOOBleOBhOOAglxuICAgICAqIOOBvuOBn+WtkOOCs+ODs+ODneODvOODjeODs+ODiOOBr+S7u+aEj+OBrnByb3Bz44KS5Y+X44GR5Y+W44KM44KL44KI44GG44Gr44Gq44Gj44Gm44GE44KL5b+F6KaB44GM44GC44KK44G+44GZ44CCXG4gICAgICovXG4gICAgY2hpbGRyZW46IFJlYWN0LlJlYWN0RWxlbWVudFtdXG4gICAgbGlzdD86IGFueVtdXG4gICAgb25DaGFuZ2U/OiAoa2V5czogYW55W10pID0+IHZvaWRcbiAgICBzdGFydEFkb3JubWVudD86IFJlYWN0LlJlYWN0Tm9kZVxuICAgIGVuZEFkb3JubWVudD86IFJlYWN0LlJlYWN0Tm9kZVxufVxuXG5leHBvcnQgY29uc3QgU29ydEFyZWEgPSAoeyBsaXN0LCAuLi5wcm9wcyB9OiBTb3J0QXJlYVByb3BzKSA9PiB7XG4gICAgaWYgKGxpc3QgPT09IHVuZGVmaW5lZCB8fCBsaXN0Lmxlbmd0aCA9PT0gMCkge1xuICAgICAgICByZXR1cm4gbnVsbFxuICAgIH1cbiAgICByZXR1cm4gPFNvcnRBcmVhSW5uZXIgbGlzdD17bGlzdH0gey4uLnByb3BzfSAvPlxufVxuXG5pbnRlcmZhY2UgU29ydEFyZWFJbm5lclByb3BzIGV4dGVuZHMgU29ydEFyZWFQcm9wcyB7XG4gICAgbGlzdDogYW55W11cbn1cblxuY29uc3QgU29ydEFyZWFJbm5lciA9ICh7XG4gICAgY2hpbGRyZW4sXG4gICAgb25DaGFuZ2UsXG4gICAgbGlzdDogbGlzdFByb3AsXG4gICAgc3RhcnRBZG9ybm1lbnQsXG4gICAgZW5kQWRvcm5tZW50LFxuICAgIC4uLnByb3BzXG59OiBTb3J0QXJlYUlubmVyUHJvcHMpID0+IHtcbiAgICBjb25zdCBjYWNoZSA9IHVzZVJlZigtMSlcbiAgICBjb25zdCBbX2xpc3QsIF9zZXRMaXN0XSA9IHVzZVN0YXRlKGxpc3RQcm9wKVxuXG4gICAgY29uc3QgbGlzdCA9IHVzZU1lbW8oKCkgPT4ge1xuICAgICAgICByZXR1cm4gYXJyYXlTaGFsbG93RXF1YWwoX2xpc3QsIGxpc3RQcm9wKSA/IF9saXN0IDogbGlzdFByb3BcbiAgICB9LCBbX2xpc3QsIGxpc3RQcm9wXSlcblxuICAgIGNvbnN0IHNldExpc3QgPSB1c2VDYWxsYmFjayhcbiAgICAgICAgKHZhbHVlOiAoY3VycmVudDogYW55W10pID0+IGFueVtdKSA9PiB7XG4gICAgICAgICAgICBjb25zdCBuZXh0ID0gdmFsdWUobGlzdClcbiAgICAgICAgICAgIF9zZXRMaXN0KG5leHQpXG4gICAgICAgICAgICBpZiAob25DaGFuZ2UpIHtcbiAgICAgICAgICAgICAgICBvbkNoYW5nZShuZXh0KVxuICAgICAgICAgICAgfVxuICAgICAgICB9LFxuICAgICAgICBbbGlzdCwgb25DaGFuZ2VdXG4gICAgKVxuXG4gICAgY29uc3QgaGFuZGxlRHJhZ1N0YXJ0ID0gdXNlQ2FsbGJhY2soKGU6IFJlYWN0LkRyYWdFdmVudDxIVE1MRGl2RWxlbWVudD4pID0+IHtcbiAgICAgICAgZS5jdXJyZW50VGFyZ2V0LmRhdGFzZXQuZHJhZ1N0YXRlID0gXCJkcmFnZ2luZ1wiXG4gICAgICAgIGUuZGF0YVRyYW5zZmVyLmVmZmVjdEFsbG93ZWQgPSBcIm1vdmVcIlxuICAgIH0sIFtdKVxuXG4gICAgY29uc3QgaGFuZGxlRHJhZ0xlYXZlID0gdXNlQ2FsbGJhY2soKGU6IFJlYWN0LkRyYWdFdmVudDxIVE1MRGl2RWxlbWVudD4pID0+IHtcbiAgICAgICAgaWYgKGUuY3VycmVudFRhcmdldC5kYXRhc2V0LmRyYWdTdGF0ZSAhPT0gXCJkcmFnZ2luZ1wiKSB7XG4gICAgICAgICAgICBkZWxldGUgZS5jdXJyZW50VGFyZ2V0LmRhdGFzZXQuZHJhZ1N0YXRlXG4gICAgICAgIH1cbiAgICB9LCBbXSlcblxuICAgIGNvbnN0IG92ZXJSZWYgPSB1c2VSZWY8SFRNTEVsZW1lbnQ+KClcblxuICAgIGNvbnN0IGhhbmRsZURyYWdPdmVyID0gdXNlQ2FsbGJhY2soKGU6IFJlYWN0LkRyYWdFdmVudDxIVE1MRGl2RWxlbWVudD4pID0+IHtcbiAgICAgICAgaWYgKGUuY3VycmVudFRhcmdldC5kcmFnZ2FibGUgPT09IHRydWUpIHtcbiAgICAgICAgICAgIGlmICghZS5jdXJyZW50VGFyZ2V0LmRhdGFzZXQuZHJhZ1N0YXRlKSB7XG4gICAgICAgICAgICAgICAgZS5jdXJyZW50VGFyZ2V0LmRhdGFzZXQuZHJhZ1N0YXRlID0gXCJvdmVyXCJcbiAgICAgICAgICAgICAgICBvdmVyUmVmLmN1cnJlbnQgPSBlLmN1cnJlbnRUYXJnZXRcbiAgICAgICAgICAgIH1cbiAgICAgICAgICAgIGNhY2hlLmN1cnJlbnQgPSBwYXJzZUludChlLmN1cnJlbnRUYXJnZXQuZGF0YXNldFtkYXRhSWRdISwgMTApXG4gICAgICAgIH1cbiAgICB9LCBbXSlcbiAgICBjb25zdCBoYW5kbGVEcmFnRW5kID0gdXNlQ2FsbGJhY2soXG4gICAgICAgIChlOiBSZWFjdC5EcmFnRXZlbnQ8SFRNTERpdkVsZW1lbnQ+KSA9PiB7XG4gICAgICAgICAgICBjb25zdCBjdXJyZW50SW5kZXggPSBwYXJzZUludChlLmN1cnJlbnRUYXJnZXQuZGF0YXNldFtkYXRhSWRdISwgMTApXG4gICAgICAgICAgICBkZWxldGUgZS5jdXJyZW50VGFyZ2V0LmRhdGFzZXQuZHJhZ1N0YXRlXG4gICAgICAgICAgICBkZWxldGUgb3ZlclJlZi5jdXJyZW50Py5kYXRhc2V0LmRyYWdTdGF0ZVxuICAgICAgICAgICAgZS5kYXRhVHJhbnNmZXIuZHJvcEVmZmVjdCA9IFwibW92ZVwiXG5cbiAgICAgICAgICAgIHNldExpc3QoKHByZXYpID0+IHtcbiAgICAgICAgICAgICAgICBjb25zdCBuZXh0SW5kZXggPSBjYWNoZS5jdXJyZW50XG4gICAgICAgICAgICAgICAgY29uc3QgY29weSA9IHByZXYuY29uY2F0KClcbiAgICAgICAgICAgICAgICBjb25zdCBjdXJyZW50ID0gY29weS5zcGxpY2UoY3VycmVudEluZGV4LCAxKVxuICAgICAgICAgICAgICAgIGNvcHkuc3BsaWNlKG5leHRJbmRleCwgMCwgLi4uY3VycmVudClcbiAgICAgICAgICAgICAgICByZXR1cm4gY29weVxuICAgICAgICAgICAgfSlcbiAgICAgICAgfSxcbiAgICAgICAgW3NldExpc3RdXG4gICAgKVxuXG4gICAgcmV0dXJuIChcbiAgICAgICAgPEJveFxuICAgICAgICAgICAgey4uLnByb3BzfVxuICAgICAgICAgICAgY3NzPXtjc3NgXG4gICAgICAgICAgICAgICAgJiBbZHJhZ2dhYmxlPVwidHJ1ZVwiXSB7XG4gICAgICAgICAgICAgICAgICAgIHotaW5kZXg6IDA7XG4gICAgICAgICAgICAgICAgICAgIGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG4gICAgICAgICAgICAgICAgICAgIGN1cnNvcjogZ3JhYjtcbiAgICAgICAgICAgICAgICAgICAgdXNlci1zZWxlY3Q6IG5vbmU7XG4gICAgICAgICAgICAgICAgICAgIHRyYW5zaXRpb246IHRyYW5zZm9ybSAwLjJzIGVhc2Utb3V0LCBvdXRsaW5lIDAuMnMgZWFzZS1vdXQ7XG5cbiAgICAgICAgICAgICAgICAgICAgJltkYXRhLWRyYWctc3RhdGU9XCJvdmVyXCJdIHtcbiAgICAgICAgICAgICAgICAgICAgICAgIG91dGxpbmU6IDJweCBkb3R0ZWQgcmdiYSgwLCAwLCAwLCAwLjIpO1xuICAgICAgICAgICAgICAgICAgICB9XG5cbiAgICAgICAgICAgICAgICAgICAgJltkYXRhLWRyYWctc3RhdGU9XCJkcmFnZ2luZ1wiXSB7XG4gICAgICAgICAgICAgICAgICAgICAgICB6LWluZGV4OiA5OTk7XG4gICAgICAgICAgICAgICAgICAgICAgICBjdXJzb3I6IGdyYWJiaW5nO1xuICAgICAgICAgICAgICAgICAgICAgICAgb3BhY2l0eTogMC41O1xuICAgICAgICAgICAgICAgICAgICAgICAgdHJhbnNmb3JtOiBzY2FsZSgwLjgpO1xuICAgICAgICAgICAgICAgICAgICB9XG4gICAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgYH1cbiAgICAgICAgPlxuICAgICAgICAgICAge3N0YXJ0QWRvcm5tZW50fVxuICAgICAgICAgICAge1JlYWN0LkNoaWxkcmVuLm1hcChjaGlsZHJlbiwgKGNoaWxkLCBpbmRleDogbnVtYmVyKSA9PiB7XG4gICAgICAgICAgICAgICAgcmV0dXJuIFJlYWN0LmNsb25lRWxlbWVudChjaGlsZCwge1xuICAgICAgICAgICAgICAgICAgICBvbkRyYWdTdGFydDogaGFuZGxlRHJhZ1N0YXJ0LFxuICAgICAgICAgICAgICAgICAgICBvbkRyYWdPdmVyOiBoYW5kbGVEcmFnT3ZlcixcbiAgICAgICAgICAgICAgICAgICAgb25EcmFnRW5kOiBoYW5kbGVEcmFnRW5kLFxuICAgICAgICAgICAgICAgICAgICBvbkRyYWdMZWF2ZTogaGFuZGxlRHJhZ0xlYXZlLFxuICAgICAgICAgICAgICAgICAgICBkcmFnZ2FibGU6IHRydWUsXG4gICAgICAgICAgICAgICAgICAgIFtkYXRhaWRdOiBpbmRleCxcbiAgICAgICAgICAgICAgICAgICAgLi4uY2hpbGQucHJvcHNcbiAgICAgICAgICAgICAgICB9KVxuICAgICAgICAgICAgfSl9XG4gICAgICAgICAgICB7ZW5kQWRvcm5tZW50fVxuICAgICAgICA8L0JveD5cbiAgICApXG59XG4iXX0= */",
|
|
39
56
|
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
|
|
40
57
|
};
|
|
41
58
|
|
|
42
|
-
const
|
|
59
|
+
const SortAreaInner = ({
|
|
43
60
|
children,
|
|
44
61
|
onChange,
|
|
45
62
|
list: listProp,
|
|
@@ -48,12 +65,19 @@ const SortArea = ({
|
|
|
48
65
|
...props
|
|
49
66
|
}) => {
|
|
50
67
|
const cache = (0, _react2.useRef)(-1);
|
|
51
|
-
const [
|
|
52
|
-
(0, _react2.
|
|
53
|
-
|
|
54
|
-
|
|
68
|
+
const [_list, _setList] = (0, _react2.useState)(listProp);
|
|
69
|
+
const list = (0, _react2.useMemo)(() => {
|
|
70
|
+
return (0, _arrayShallowEqual.arrayShallowEqual)(_list, listProp) ? _list : listProp;
|
|
71
|
+
}, [_list, listProp]);
|
|
72
|
+
const setList = (0, _react2.useCallback)(value => {
|
|
73
|
+
const next = value(list);
|
|
74
|
+
|
|
75
|
+
_setList(next);
|
|
76
|
+
|
|
77
|
+
if (onChange) {
|
|
78
|
+
onChange(next);
|
|
55
79
|
}
|
|
56
|
-
}, [
|
|
80
|
+
}, [list, onChange]);
|
|
57
81
|
const handleDragStart = (0, _react2.useCallback)(e => {
|
|
58
82
|
e.currentTarget.dataset.dragState = "dragging";
|
|
59
83
|
e.dataTransfer.effectAllowed = "move";
|
|
@@ -63,12 +87,11 @@ const SortArea = ({
|
|
|
63
87
|
delete e.currentTarget.dataset.dragState;
|
|
64
88
|
}
|
|
65
89
|
}, []);
|
|
66
|
-
const overRef = (0, _react2.useRef)(
|
|
90
|
+
const overRef = (0, _react2.useRef)();
|
|
67
91
|
const handleDragOver = (0, _react2.useCallback)(e => {
|
|
68
92
|
if (e.currentTarget.draggable === true) {
|
|
69
93
|
if (!e.currentTarget.dataset.dragState) {
|
|
70
|
-
e.currentTarget.dataset.dragState = "over";
|
|
71
|
-
|
|
94
|
+
e.currentTarget.dataset.dragState = "over";
|
|
72
95
|
overRef.current = e.currentTarget;
|
|
73
96
|
}
|
|
74
97
|
|
|
@@ -87,12 +110,7 @@ const SortArea = ({
|
|
|
87
110
|
copy.splice(nextIndex, 0, ...current);
|
|
88
111
|
return copy;
|
|
89
112
|
});
|
|
90
|
-
}, []);
|
|
91
|
-
(0, _react2.useEffect)(() => {
|
|
92
|
-
if (onChange) {
|
|
93
|
-
onChange(list);
|
|
94
|
-
}
|
|
95
|
-
}, [list, onChange]);
|
|
113
|
+
}, [setList]);
|
|
96
114
|
return (0, _react.jsx)(_Layouts.Box, _extends({}, props, {
|
|
97
115
|
css: _ref
|
|
98
116
|
}), startAdornment, _react2.default.Children.map(children, (child, index) => {
|
|
@@ -107,6 +125,4 @@ const SortArea = ({
|
|
|
107
125
|
});
|
|
108
126
|
}), endAdornment);
|
|
109
127
|
};
|
|
110
|
-
|
|
111
|
-
exports.SortArea = SortArea;
|
|
112
128
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/SortArea/index.tsx"],"names":["camelize","str","arr","split","capital","map","item","index","charAt","toUpperCase","slice","toLowerCase","capitalString","join","dataid","dataId","replace","SortArea","
|
|
1
|
+
{"version":3,"sources":["../../../src/SortArea/index.tsx"],"names":["camelize","str","arr","split","capital","map","item","index","charAt","toUpperCase","slice","toLowerCase","capitalString","join","dataid","dataId","replace","SortArea","list","props","undefined","length","SortAreaInner","children","onChange","listProp","startAdornment","endAdornment","cache","_list","_setList","setList","value","next","handleDragStart","e","currentTarget","dataset","dragState","dataTransfer","effectAllowed","handleDragLeave","overRef","handleDragOver","draggable","current","parseInt","handleDragEnd","currentIndex","dropEffect","prev","nextIndex","copy","concat","splice","React","Children","child","cloneElement","onDragStart","onDragOver","onDragEnd","onDragLeave"],"mappings":"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","sourcesContent":["import { Box, BoxProps } from \"../Layouts\"\nimport { arrayShallowEqual } from \"../@utils/arrayShallowEqual\"\nimport { css } from \"@emotion/react\"\nimport React, { useCallback, useMemo, useRef, useState } from \"react\"\n\nconst camelize = (str: string) => {\n let arr = str.split(\"-\")\n let capital = arr.map((item, index) => (index ? item.charAt(0).toUpperCase() + item.slice(1).toLowerCase() : item))\n let capitalString = capital.join(\"\")\n return capitalString\n}\n\nconst dataid = \"data-sort-area-item-index\"\nconst dataId = camelize(dataid.replace(\"data-\", \"\"))\n\nexport interface SortAreaProps extends Omit<BoxProps, \"onChange\"> {\n /**\n * このコンポーネントの子要素はkey属性を必ず持っている必要があります。\n * keyはuniqueでなければなりません。決して安直なmapのindexなどを渡さないようにしてください。\n * また子コンポーネントは任意のpropsを受け取れるようになっている必要があります。\n */\n children: React.ReactElement[]\n list?: any[]\n onChange?: (keys: any[]) => void\n startAdornment?: React.ReactNode\n endAdornment?: React.ReactNode\n}\n\nexport const SortArea = ({ list, ...props }: SortAreaProps) => {\n if (list === undefined || list.length === 0) {\n return null\n }\n return <SortAreaInner list={list} {...props} />\n}\n\ninterface SortAreaInnerProps extends SortAreaProps {\n list: any[]\n}\n\nconst SortAreaInner = ({\n children,\n onChange,\n list: listProp,\n startAdornment,\n endAdornment,\n ...props\n}: SortAreaInnerProps) => {\n const cache = useRef(-1)\n const [_list, _setList] = useState(listProp)\n\n const list = useMemo(() => {\n return arrayShallowEqual(_list, listProp) ? _list : listProp\n }, [_list, listProp])\n\n const setList = useCallback(\n (value: (current: any[]) => any[]) => {\n const next = value(list)\n _setList(next)\n if (onChange) {\n onChange(next)\n }\n },\n [list, onChange]\n )\n\n const handleDragStart = useCallback((e: React.DragEvent<HTMLDivElement>) => {\n e.currentTarget.dataset.dragState = \"dragging\"\n e.dataTransfer.effectAllowed = \"move\"\n }, [])\n\n const handleDragLeave = useCallback((e: React.DragEvent<HTMLDivElement>) => {\n if (e.currentTarget.dataset.dragState !== \"dragging\") {\n delete e.currentTarget.dataset.dragState\n }\n }, [])\n\n const overRef = useRef<HTMLElement>()\n\n const handleDragOver = useCallback((e: React.DragEvent<HTMLDivElement>) => {\n if (e.currentTarget.draggable === true) {\n if (!e.currentTarget.dataset.dragState) {\n e.currentTarget.dataset.dragState = \"over\"\n overRef.current = e.currentTarget\n }\n cache.current = parseInt(e.currentTarget.dataset[dataId]!, 10)\n }\n }, [])\n const handleDragEnd = useCallback(\n (e: React.DragEvent<HTMLDivElement>) => {\n const currentIndex = parseInt(e.currentTarget.dataset[dataId]!, 10)\n delete e.currentTarget.dataset.dragState\n delete overRef.current?.dataset.dragState\n e.dataTransfer.dropEffect = \"move\"\n\n setList((prev) => {\n const nextIndex = cache.current\n const copy = prev.concat()\n const current = copy.splice(currentIndex, 1)\n copy.splice(nextIndex, 0, ...current)\n return copy\n })\n },\n [setList]\n )\n\n return (\n <Box\n {...props}\n css={css`\n & [draggable=\"true\"] {\n z-index: 0;\n box-sizing: border-box;\n cursor: grab;\n user-select: none;\n transition: transform 0.2s ease-out, outline 0.2s ease-out;\n\n &[data-drag-state=\"over\"] {\n outline: 2px dotted rgba(0, 0, 0, 0.2);\n }\n\n &[data-drag-state=\"dragging\"] {\n z-index: 999;\n cursor: grabbing;\n opacity: 0.5;\n transform: scale(0.8);\n }\n }\n `}\n >\n {startAdornment}\n {React.Children.map(children, (child, index: number) => {\n return React.cloneElement(child, {\n onDragStart: handleDragStart,\n onDragOver: handleDragOver,\n onDragEnd: handleDragEnd,\n onDragLeave: handleDragLeave,\n draggable: true,\n [dataid]: index,\n ...child.props\n })\n })}\n {endAdornment}\n </Box>\n )\n}\n"],"file":"index.js"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/@utils/arrayShallowEqual.ts"],"names":["arrayShallowEqual","a","b","length","every","v","i"],"mappings":"AAAA,OAAO,IAAMA,iBAAiB,GAAG,CAACC,CAAD,EAAwBC,CAAxB,KAAkD;AAC/E,SAAOD,CAAC,CAACE,MAAF,KAAaD,CAAC,CAACC,MAAf,IAAyBF,CAAC,CAACG,KAAF,CAAQ,CAACC,CAAD,EAAIC,CAAJ,KAAUD,CAAC,KAAKH,CAAC,CAACI,CAAD,CAAzB,CAAhC;AACH,CAFM","sourcesContent":["export const arrayShallowEqual = (a: readonly unknown[], b: readonly unknown[]) => {\n return a.length === b.length && a.every((v, i) => v === b[i])\n}\n"],"file":"arrayShallowEqual.js"}
|
|
@@ -1,6 +1,5 @@
|
|
|
1
|
-
var _excluded = ["
|
|
2
|
-
|
|
3
|
-
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
1
|
+
var _excluded = ["list"],
|
|
2
|
+
_excluded2 = ["children", "onChange", "list", "startAdornment", "endAdornment"];
|
|
4
3
|
|
|
5
4
|
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; }
|
|
6
5
|
|
|
@@ -8,6 +7,8 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
|
|
|
8
7
|
|
|
9
8
|
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; }
|
|
10
9
|
|
|
10
|
+
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
11
|
+
|
|
11
12
|
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
|
12
13
|
|
|
13
14
|
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
@@ -15,8 +16,9 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
|
|
|
15
16
|
function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
|
|
16
17
|
|
|
17
18
|
import { Box } from "../Layouts";
|
|
19
|
+
import { arrayShallowEqual } from "../@utils/arrayShallowEqual";
|
|
18
20
|
import { css } from "@emotion/react";
|
|
19
|
-
import React, { useCallback,
|
|
21
|
+
import React, { useCallback, useMemo, useRef, useState } from "react";
|
|
20
22
|
import { jsx as ___EmotionJSX } from "@emotion/react";
|
|
21
23
|
|
|
22
24
|
var camelize = str => {
|
|
@@ -28,34 +30,55 @@ var camelize = str => {
|
|
|
28
30
|
|
|
29
31
|
var dataid = "data-sort-area-item-index";
|
|
30
32
|
var dataId = camelize(dataid.replace("data-", ""));
|
|
33
|
+
export var SortArea = _ref2 => {
|
|
34
|
+
var {
|
|
35
|
+
list
|
|
36
|
+
} = _ref2,
|
|
37
|
+
props = _objectWithoutProperties(_ref2, _excluded);
|
|
38
|
+
|
|
39
|
+
if (list === undefined || list.length === 0) {
|
|
40
|
+
return null;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
return ___EmotionJSX(SortAreaInner, _extends({
|
|
44
|
+
list: list
|
|
45
|
+
}, props));
|
|
46
|
+
};
|
|
31
47
|
|
|
32
48
|
var _ref = process.env.NODE_ENV === "production" ? {
|
|
33
49
|
name: "stsb6k",
|
|
34
50
|
styles: "& [draggable=\"true\"]{z-index:0;box-sizing:border-box;cursor:grab;user-select:none;transition:transform 0.2s ease-out,outline 0.2s ease-out;&[data-drag-state=\"over\"]{outline:2px dotted rgba(0, 0, 0, 0.2);}&[data-drag-state=\"dragging\"]{z-index:999;cursor:grabbing;opacity:0.5;transform:scale(0.8);}}"
|
|
35
51
|
} : {
|
|
36
|
-
name: "
|
|
37
|
-
styles: "& [draggable=\"true\"]{z-index:0;box-sizing:border-box;cursor:grab;user-select:none;transition:transform 0.2s ease-out,outline 0.2s ease-out;&[data-drag-state=\"over\"]{outline:2px dotted rgba(0, 0, 0, 0.2);}&[data-drag-state=\"dragging\"]{z-index:999;cursor:grabbing;opacity:0.5;transform:scale(0.8);}};label:
|
|
38
|
-
map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,
|
|
52
|
+
name: "cep9g1-SortAreaInner",
|
|
53
|
+
styles: "& [draggable=\"true\"]{z-index:0;box-sizing:border-box;cursor:grab;user-select:none;transition:transform 0.2s ease-out,outline 0.2s ease-out;&[data-drag-state=\"over\"]{outline:2px dotted rgba(0, 0, 0, 0.2);}&[data-drag-state=\"dragging\"]{z-index:999;cursor:grabbing;opacity:0.5;transform:scale(0.8);}};label:SortAreaInner;",
|
|
54
|
+
map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9Tb3J0QXJlYS9pbmRleC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBNEdvQiIsImZpbGUiOiIuLi8uLi8uLi9zcmMvU29ydEFyZWEvaW5kZXgudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQm94LCBCb3hQcm9wcyB9IGZyb20gXCIuLi9MYXlvdXRzXCJcbmltcG9ydCB7IGFycmF5U2hhbGxvd0VxdWFsIH0gZnJvbSBcIi4uL0B1dGlscy9hcnJheVNoYWxsb3dFcXVhbFwiXG5pbXBvcnQgeyBjc3MgfSBmcm9tIFwiQGVtb3Rpb24vcmVhY3RcIlxuaW1wb3J0IFJlYWN0LCB7IHVzZUNhbGxiYWNrLCB1c2VNZW1vLCB1c2VSZWYsIHVzZVN0YXRlIH0gZnJvbSBcInJlYWN0XCJcblxuY29uc3QgY2FtZWxpemUgPSAoc3RyOiBzdHJpbmcpID0+IHtcbiAgICBsZXQgYXJyID0gc3RyLnNwbGl0KFwiLVwiKVxuICAgIGxldCBjYXBpdGFsID0gYXJyLm1hcCgoaXRlbSwgaW5kZXgpID0+IChpbmRleCA/IGl0ZW0uY2hhckF0KDApLnRvVXBwZXJDYXNlKCkgKyBpdGVtLnNsaWNlKDEpLnRvTG93ZXJDYXNlKCkgOiBpdGVtKSlcbiAgICBsZXQgY2FwaXRhbFN0cmluZyA9IGNhcGl0YWwuam9pbihcIlwiKVxuICAgIHJldHVybiBjYXBpdGFsU3RyaW5nXG59XG5cbmNvbnN0IGRhdGFpZCA9IFwiZGF0YS1zb3J0LWFyZWEtaXRlbS1pbmRleFwiXG5jb25zdCBkYXRhSWQgPSBjYW1lbGl6ZShkYXRhaWQucmVwbGFjZShcImRhdGEtXCIsIFwiXCIpKVxuXG5leHBvcnQgaW50ZXJmYWNlIFNvcnRBcmVhUHJvcHMgZXh0ZW5kcyBPbWl0PEJveFByb3BzLCBcIm9uQ2hhbmdlXCI+IHtcbiAgICAvKipcbiAgICAgKiDjgZPjga7jgrPjg7Pjg53jg7zjg43jg7Pjg4jjga7lrZDopoHntKDjga9rZXnlsZ7mgKfjgpLlv4XjgZrmjIHjgaPjgabjgYTjgovlv4XopoHjgYzjgYLjgorjgb7jgZnjgIJcbiAgICAgKiBrZXnjga91bmlxdWXjgafjgarjgZHjgozjgbDjgarjgorjgb7jgZvjgpPjgILmsbrjgZfjgablronnm7TjgaptYXDjga5pbmRleOOBquOBqeOCkua4oeOBleOBquOBhOOCiOOBhuOBq+OBl+OBpuOBj+OBoOOBleOBhOOAglxuICAgICAqIOOBvuOBn+WtkOOCs+ODs+ODneODvOODjeODs+ODiOOBr+S7u+aEj+OBrnByb3Bz44KS5Y+X44GR5Y+W44KM44KL44KI44GG44Gr44Gq44Gj44Gm44GE44KL5b+F6KaB44GM44GC44KK44G+44GZ44CCXG4gICAgICovXG4gICAgY2hpbGRyZW46IFJlYWN0LlJlYWN0RWxlbWVudFtdXG4gICAgbGlzdD86IGFueVtdXG4gICAgb25DaGFuZ2U/OiAoa2V5czogYW55W10pID0+IHZvaWRcbiAgICBzdGFydEFkb3JubWVudD86IFJlYWN0LlJlYWN0Tm9kZVxuICAgIGVuZEFkb3JubWVudD86IFJlYWN0LlJlYWN0Tm9kZVxufVxuXG5leHBvcnQgY29uc3QgU29ydEFyZWEgPSAoeyBsaXN0LCAuLi5wcm9wcyB9OiBTb3J0QXJlYVByb3BzKSA9PiB7XG4gICAgaWYgKGxpc3QgPT09IHVuZGVmaW5lZCB8fCBsaXN0Lmxlbmd0aCA9PT0gMCkge1xuICAgICAgICByZXR1cm4gbnVsbFxuICAgIH1cbiAgICByZXR1cm4gPFNvcnRBcmVhSW5uZXIgbGlzdD17bGlzdH0gey4uLnByb3BzfSAvPlxufVxuXG5pbnRlcmZhY2UgU29ydEFyZWFJbm5lclByb3BzIGV4dGVuZHMgU29ydEFyZWFQcm9wcyB7XG4gICAgbGlzdDogYW55W11cbn1cblxuY29uc3QgU29ydEFyZWFJbm5lciA9ICh7XG4gICAgY2hpbGRyZW4sXG4gICAgb25DaGFuZ2UsXG4gICAgbGlzdDogbGlzdFByb3AsXG4gICAgc3RhcnRBZG9ybm1lbnQsXG4gICAgZW5kQWRvcm5tZW50LFxuICAgIC4uLnByb3BzXG59OiBTb3J0QXJlYUlubmVyUHJvcHMpID0+IHtcbiAgICBjb25zdCBjYWNoZSA9IHVzZVJlZigtMSlcbiAgICBjb25zdCBbX2xpc3QsIF9zZXRMaXN0XSA9IHVzZVN0YXRlKGxpc3RQcm9wKVxuXG4gICAgY29uc3QgbGlzdCA9IHVzZU1lbW8oKCkgPT4ge1xuICAgICAgICByZXR1cm4gYXJyYXlTaGFsbG93RXF1YWwoX2xpc3QsIGxpc3RQcm9wKSA/IF9saXN0IDogbGlzdFByb3BcbiAgICB9LCBbX2xpc3QsIGxpc3RQcm9wXSlcblxuICAgIGNvbnN0IHNldExpc3QgPSB1c2VDYWxsYmFjayhcbiAgICAgICAgKHZhbHVlOiAoY3VycmVudDogYW55W10pID0+IGFueVtdKSA9PiB7XG4gICAgICAgICAgICBjb25zdCBuZXh0ID0gdmFsdWUobGlzdClcbiAgICAgICAgICAgIF9zZXRMaXN0KG5leHQpXG4gICAgICAgICAgICBpZiAob25DaGFuZ2UpIHtcbiAgICAgICAgICAgICAgICBvbkNoYW5nZShuZXh0KVxuICAgICAgICAgICAgfVxuICAgICAgICB9LFxuICAgICAgICBbbGlzdCwgb25DaGFuZ2VdXG4gICAgKVxuXG4gICAgY29uc3QgaGFuZGxlRHJhZ1N0YXJ0ID0gdXNlQ2FsbGJhY2soKGU6IFJlYWN0LkRyYWdFdmVudDxIVE1MRGl2RWxlbWVudD4pID0+IHtcbiAgICAgICAgZS5jdXJyZW50VGFyZ2V0LmRhdGFzZXQuZHJhZ1N0YXRlID0gXCJkcmFnZ2luZ1wiXG4gICAgICAgIGUuZGF0YVRyYW5zZmVyLmVmZmVjdEFsbG93ZWQgPSBcIm1vdmVcIlxuICAgIH0sIFtdKVxuXG4gICAgY29uc3QgaGFuZGxlRHJhZ0xlYXZlID0gdXNlQ2FsbGJhY2soKGU6IFJlYWN0LkRyYWdFdmVudDxIVE1MRGl2RWxlbWVudD4pID0+IHtcbiAgICAgICAgaWYgKGUuY3VycmVudFRhcmdldC5kYXRhc2V0LmRyYWdTdGF0ZSAhPT0gXCJkcmFnZ2luZ1wiKSB7XG4gICAgICAgICAgICBkZWxldGUgZS5jdXJyZW50VGFyZ2V0LmRhdGFzZXQuZHJhZ1N0YXRlXG4gICAgICAgIH1cbiAgICB9LCBbXSlcblxuICAgIGNvbnN0IG92ZXJSZWYgPSB1c2VSZWY8SFRNTEVsZW1lbnQ+KClcblxuICAgIGNvbnN0IGhhbmRsZURyYWdPdmVyID0gdXNlQ2FsbGJhY2soKGU6IFJlYWN0LkRyYWdFdmVudDxIVE1MRGl2RWxlbWVudD4pID0+IHtcbiAgICAgICAgaWYgKGUuY3VycmVudFRhcmdldC5kcmFnZ2FibGUgPT09IHRydWUpIHtcbiAgICAgICAgICAgIGlmICghZS5jdXJyZW50VGFyZ2V0LmRhdGFzZXQuZHJhZ1N0YXRlKSB7XG4gICAgICAgICAgICAgICAgZS5jdXJyZW50VGFyZ2V0LmRhdGFzZXQuZHJhZ1N0YXRlID0gXCJvdmVyXCJcbiAgICAgICAgICAgICAgICBvdmVyUmVmLmN1cnJlbnQgPSBlLmN1cnJlbnRUYXJnZXRcbiAgICAgICAgICAgIH1cbiAgICAgICAgICAgIGNhY2hlLmN1cnJlbnQgPSBwYXJzZUludChlLmN1cnJlbnRUYXJnZXQuZGF0YXNldFtkYXRhSWRdISwgMTApXG4gICAgICAgIH1cbiAgICB9LCBbXSlcbiAgICBjb25zdCBoYW5kbGVEcmFnRW5kID0gdXNlQ2FsbGJhY2soXG4gICAgICAgIChlOiBSZWFjdC5EcmFnRXZlbnQ8SFRNTERpdkVsZW1lbnQ+KSA9PiB7XG4gICAgICAgICAgICBjb25zdCBjdXJyZW50SW5kZXggPSBwYXJzZUludChlLmN1cnJlbnRUYXJnZXQuZGF0YXNldFtkYXRhSWRdISwgMTApXG4gICAgICAgICAgICBkZWxldGUgZS5jdXJyZW50VGFyZ2V0LmRhdGFzZXQuZHJhZ1N0YXRlXG4gICAgICAgICAgICBkZWxldGUgb3ZlclJlZi5jdXJyZW50Py5kYXRhc2V0LmRyYWdTdGF0ZVxuICAgICAgICAgICAgZS5kYXRhVHJhbnNmZXIuZHJvcEVmZmVjdCA9IFwibW92ZVwiXG5cbiAgICAgICAgICAgIHNldExpc3QoKHByZXYpID0+IHtcbiAgICAgICAgICAgICAgICBjb25zdCBuZXh0SW5kZXggPSBjYWNoZS5jdXJyZW50XG4gICAgICAgICAgICAgICAgY29uc3QgY29weSA9IHByZXYuY29uY2F0KClcbiAgICAgICAgICAgICAgICBjb25zdCBjdXJyZW50ID0gY29weS5zcGxpY2UoY3VycmVudEluZGV4LCAxKVxuICAgICAgICAgICAgICAgIGNvcHkuc3BsaWNlKG5leHRJbmRleCwgMCwgLi4uY3VycmVudClcbiAgICAgICAgICAgICAgICByZXR1cm4gY29weVxuICAgICAgICAgICAgfSlcbiAgICAgICAgfSxcbiAgICAgICAgW3NldExpc3RdXG4gICAgKVxuXG4gICAgcmV0dXJuIChcbiAgICAgICAgPEJveFxuICAgICAgICAgICAgey4uLnByb3BzfVxuICAgICAgICAgICAgY3NzPXtjc3NgXG4gICAgICAgICAgICAgICAgJiBbZHJhZ2dhYmxlPVwidHJ1ZVwiXSB7XG4gICAgICAgICAgICAgICAgICAgIHotaW5kZXg6IDA7XG4gICAgICAgICAgICAgICAgICAgIGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG4gICAgICAgICAgICAgICAgICAgIGN1cnNvcjogZ3JhYjtcbiAgICAgICAgICAgICAgICAgICAgdXNlci1zZWxlY3Q6IG5vbmU7XG4gICAgICAgICAgICAgICAgICAgIHRyYW5zaXRpb246IHRyYW5zZm9ybSAwLjJzIGVhc2Utb3V0LCBvdXRsaW5lIDAuMnMgZWFzZS1vdXQ7XG5cbiAgICAgICAgICAgICAgICAgICAgJltkYXRhLWRyYWctc3RhdGU9XCJvdmVyXCJdIHtcbiAgICAgICAgICAgICAgICAgICAgICAgIG91dGxpbmU6IDJweCBkb3R0ZWQgcmdiYSgwLCAwLCAwLCAwLjIpO1xuICAgICAgICAgICAgICAgICAgICB9XG5cbiAgICAgICAgICAgICAgICAgICAgJltkYXRhLWRyYWctc3RhdGU9XCJkcmFnZ2luZ1wiXSB7XG4gICAgICAgICAgICAgICAgICAgICAgICB6LWluZGV4OiA5OTk7XG4gICAgICAgICAgICAgICAgICAgICAgICBjdXJzb3I6IGdyYWJiaW5nO1xuICAgICAgICAgICAgICAgICAgICAgICAgb3BhY2l0eTogMC41O1xuICAgICAgICAgICAgICAgICAgICAgICAgdHJhbnNmb3JtOiBzY2FsZSgwLjgpO1xuICAgICAgICAgICAgICAgICAgICB9XG4gICAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgYH1cbiAgICAgICAgPlxuICAgICAgICAgICAge3N0YXJ0QWRvcm5tZW50fVxuICAgICAgICAgICAge1JlYWN0LkNoaWxkcmVuLm1hcChjaGlsZHJlbiwgKGNoaWxkLCBpbmRleDogbnVtYmVyKSA9PiB7XG4gICAgICAgICAgICAgICAgcmV0dXJuIFJlYWN0LmNsb25lRWxlbWVudChjaGlsZCwge1xuICAgICAgICAgICAgICAgICAgICBvbkRyYWdTdGFydDogaGFuZGxlRHJhZ1N0YXJ0LFxuICAgICAgICAgICAgICAgICAgICBvbkRyYWdPdmVyOiBoYW5kbGVEcmFnT3ZlcixcbiAgICAgICAgICAgICAgICAgICAgb25EcmFnRW5kOiBoYW5kbGVEcmFnRW5kLFxuICAgICAgICAgICAgICAgICAgICBvbkRyYWdMZWF2ZTogaGFuZGxlRHJhZ0xlYXZlLFxuICAgICAgICAgICAgICAgICAgICBkcmFnZ2FibGU6IHRydWUsXG4gICAgICAgICAgICAgICAgICAgIFtkYXRhaWRdOiBpbmRleCxcbiAgICAgICAgICAgICAgICAgICAgLi4uY2hpbGQucHJvcHNcbiAgICAgICAgICAgICAgICB9KVxuICAgICAgICAgICAgfSl9XG4gICAgICAgICAgICB7ZW5kQWRvcm5tZW50fVxuICAgICAgICA8L0JveD5cbiAgICApXG59XG4iXX0= */",
|
|
39
55
|
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
|
|
40
56
|
};
|
|
41
57
|
|
|
42
|
-
|
|
58
|
+
var SortAreaInner = _ref3 => {
|
|
43
59
|
var {
|
|
44
60
|
children,
|
|
45
61
|
onChange,
|
|
46
62
|
list: listProp,
|
|
47
63
|
startAdornment,
|
|
48
64
|
endAdornment
|
|
49
|
-
} =
|
|
50
|
-
props = _objectWithoutProperties(
|
|
65
|
+
} = _ref3,
|
|
66
|
+
props = _objectWithoutProperties(_ref3, _excluded2);
|
|
51
67
|
|
|
52
68
|
var cache = useRef(-1);
|
|
53
|
-
var [
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
69
|
+
var [_list, _setList] = useState(listProp);
|
|
70
|
+
var list = useMemo(() => {
|
|
71
|
+
return arrayShallowEqual(_list, listProp) ? _list : listProp;
|
|
72
|
+
}, [_list, listProp]);
|
|
73
|
+
var setList = useCallback(value => {
|
|
74
|
+
var next = value(list);
|
|
75
|
+
|
|
76
|
+
_setList(next);
|
|
77
|
+
|
|
78
|
+
if (onChange) {
|
|
79
|
+
onChange(next);
|
|
57
80
|
}
|
|
58
|
-
}, [
|
|
81
|
+
}, [list, onChange]);
|
|
59
82
|
var handleDragStart = useCallback(e => {
|
|
60
83
|
e.currentTarget.dataset.dragState = "dragging";
|
|
61
84
|
e.dataTransfer.effectAllowed = "move";
|
|
@@ -65,12 +88,11 @@ export var SortArea = _ref2 => {
|
|
|
65
88
|
delete e.currentTarget.dataset.dragState;
|
|
66
89
|
}
|
|
67
90
|
}, []);
|
|
68
|
-
var overRef = useRef(
|
|
91
|
+
var overRef = useRef();
|
|
69
92
|
var handleDragOver = useCallback(e => {
|
|
70
93
|
if (e.currentTarget.draggable === true) {
|
|
71
94
|
if (!e.currentTarget.dataset.dragState) {
|
|
72
|
-
e.currentTarget.dataset.dragState = "over";
|
|
73
|
-
|
|
95
|
+
e.currentTarget.dataset.dragState = "over";
|
|
74
96
|
overRef.current = e.currentTarget;
|
|
75
97
|
}
|
|
76
98
|
|
|
@@ -91,12 +113,7 @@ export var SortArea = _ref2 => {
|
|
|
91
113
|
copy.splice(nextIndex, 0, ...current);
|
|
92
114
|
return copy;
|
|
93
115
|
});
|
|
94
|
-
}, []);
|
|
95
|
-
useEffect(() => {
|
|
96
|
-
if (onChange) {
|
|
97
|
-
onChange(list);
|
|
98
|
-
}
|
|
99
|
-
}, [list, onChange]);
|
|
116
|
+
}, [setList]);
|
|
100
117
|
return ___EmotionJSX(Box, _extends({}, props, {
|
|
101
118
|
css: _ref
|
|
102
119
|
}), startAdornment, React.Children.map(children, (child, index) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/SortArea/index.tsx"],"names":["Box","css","React","useCallback","
|
|
1
|
+
{"version":3,"sources":["../../../src/SortArea/index.tsx"],"names":["Box","arrayShallowEqual","css","React","useCallback","useMemo","useRef","useState","camelize","str","arr","split","capital","map","item","index","charAt","toUpperCase","slice","toLowerCase","capitalString","join","dataid","dataId","replace","SortArea","list","props","undefined","length","SortAreaInner","children","onChange","listProp","startAdornment","endAdornment","cache","_list","_setList","setList","value","next","handleDragStart","e","currentTarget","dataset","dragState","dataTransfer","effectAllowed","handleDragLeave","overRef","handleDragOver","draggable","current","parseInt","handleDragEnd","currentIndex","dropEffect","prev","nextIndex","copy","concat","splice","Children","child","cloneElement","onDragStart","onDragOver","onDragEnd","onDragLeave"],"mappings":"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","sourcesContent":["import { Box, BoxProps } from \"../Layouts\"\nimport { arrayShallowEqual } from \"../@utils/arrayShallowEqual\"\nimport { css } from \"@emotion/react\"\nimport React, { useCallback, useMemo, useRef, useState } from \"react\"\n\nconst camelize = (str: string) => {\n let arr = str.split(\"-\")\n let capital = arr.map((item, index) => (index ? item.charAt(0).toUpperCase() + item.slice(1).toLowerCase() : item))\n let capitalString = capital.join(\"\")\n return capitalString\n}\n\nconst dataid = \"data-sort-area-item-index\"\nconst dataId = camelize(dataid.replace(\"data-\", \"\"))\n\nexport interface SortAreaProps extends Omit<BoxProps, \"onChange\"> {\n /**\n * このコンポーネントの子要素はkey属性を必ず持っている必要があります。\n * keyはuniqueでなければなりません。決して安直なmapのindexなどを渡さないようにしてください。\n * また子コンポーネントは任意のpropsを受け取れるようになっている必要があります。\n */\n children: React.ReactElement[]\n list?: any[]\n onChange?: (keys: any[]) => void\n startAdornment?: React.ReactNode\n endAdornment?: React.ReactNode\n}\n\nexport const SortArea = ({ list, ...props }: SortAreaProps) => {\n if (list === undefined || list.length === 0) {\n return null\n }\n return <SortAreaInner list={list} {...props} />\n}\n\ninterface SortAreaInnerProps extends SortAreaProps {\n list: any[]\n}\n\nconst SortAreaInner = ({\n children,\n onChange,\n list: listProp,\n startAdornment,\n endAdornment,\n ...props\n}: SortAreaInnerProps) => {\n const cache = useRef(-1)\n const [_list, _setList] = useState(listProp)\n\n const list = useMemo(() => {\n return arrayShallowEqual(_list, listProp) ? _list : listProp\n }, [_list, listProp])\n\n const setList = useCallback(\n (value: (current: any[]) => any[]) => {\n const next = value(list)\n _setList(next)\n if (onChange) {\n onChange(next)\n }\n },\n [list, onChange]\n )\n\n const handleDragStart = useCallback((e: React.DragEvent<HTMLDivElement>) => {\n e.currentTarget.dataset.dragState = \"dragging\"\n e.dataTransfer.effectAllowed = \"move\"\n }, [])\n\n const handleDragLeave = useCallback((e: React.DragEvent<HTMLDivElement>) => {\n if (e.currentTarget.dataset.dragState !== \"dragging\") {\n delete e.currentTarget.dataset.dragState\n }\n }, [])\n\n const overRef = useRef<HTMLElement>()\n\n const handleDragOver = useCallback((e: React.DragEvent<HTMLDivElement>) => {\n if (e.currentTarget.draggable === true) {\n if (!e.currentTarget.dataset.dragState) {\n e.currentTarget.dataset.dragState = \"over\"\n overRef.current = e.currentTarget\n }\n cache.current = parseInt(e.currentTarget.dataset[dataId]!, 10)\n }\n }, [])\n const handleDragEnd = useCallback(\n (e: React.DragEvent<HTMLDivElement>) => {\n const currentIndex = parseInt(e.currentTarget.dataset[dataId]!, 10)\n delete e.currentTarget.dataset.dragState\n delete overRef.current?.dataset.dragState\n e.dataTransfer.dropEffect = \"move\"\n\n setList((prev) => {\n const nextIndex = cache.current\n const copy = prev.concat()\n const current = copy.splice(currentIndex, 1)\n copy.splice(nextIndex, 0, ...current)\n return copy\n })\n },\n [setList]\n )\n\n return (\n <Box\n {...props}\n css={css`\n & [draggable=\"true\"] {\n z-index: 0;\n box-sizing: border-box;\n cursor: grab;\n user-select: none;\n transition: transform 0.2s ease-out, outline 0.2s ease-out;\n\n &[data-drag-state=\"over\"] {\n outline: 2px dotted rgba(0, 0, 0, 0.2);\n }\n\n &[data-drag-state=\"dragging\"] {\n z-index: 999;\n cursor: grabbing;\n opacity: 0.5;\n transform: scale(0.8);\n }\n }\n `}\n >\n {startAdornment}\n {React.Children.map(children, (child, index: number) => {\n return React.cloneElement(child, {\n onDragStart: handleDragStart,\n onDragOver: handleDragOver,\n onDragEnd: handleDragEnd,\n onDragLeave: handleDragLeave,\n draggable: true,\n [dataid]: index,\n ...child.props\n })\n })}\n {endAdornment}\n </Box>\n )\n}\n"],"file":"index.js"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const arrayShallowEqual: (a: readonly unknown[], b: readonly unknown[]) => boolean;
|
|
@@ -12,4 +12,4 @@ export interface SortAreaProps extends Omit<BoxProps, "onChange"> {
|
|
|
12
12
|
startAdornment?: React.ReactNode;
|
|
13
13
|
endAdornment?: React.ReactNode;
|
|
14
14
|
}
|
|
15
|
-
export declare const SortArea: ({
|
|
15
|
+
export declare const SortArea: ({ list, ...props }: SortAreaProps) => JSX.Element | null;
|