@manuscripts/style-guide 0.30.27 → 0.31.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.
- package/dist/cjs/components/Resizer/Resizer.js +109 -0
- package/dist/cjs/components/Resizer/ResizerButton.js +30 -0
- package/dist/cjs/components/Resizer/ResizerButtonInner.js +169 -0
- package/dist/cjs/components/Resizer/ResizerInner.js +74 -0
- package/dist/cjs/components/Resizer/index.js +16 -0
- package/dist/cjs/components/Resizer/types.js +2 -0
- package/dist/cjs/components/icons/index.js +3 -1
- package/dist/cjs/components/icons/missing-image.js +12 -0
- package/dist/cjs/index.js +1 -0
- package/dist/es/components/Resizer/Resizer.js +102 -0
- package/dist/es/components/Resizer/ResizerButton.js +23 -0
- package/dist/es/components/Resizer/ResizerButtonInner.js +163 -0
- package/dist/es/components/Resizer/ResizerInner.js +68 -0
- package/dist/es/components/Resizer/index.js +2 -0
- package/dist/es/components/Resizer/types.js +1 -0
- package/dist/es/components/icons/index.js +1 -0
- package/dist/es/components/icons/missing-image.js +7 -0
- package/dist/es/index.js +1 -0
- package/dist/types/components/Resizer/Resizer.d.ts +36 -0
- package/dist/types/components/Resizer/ResizerButton.d.ts +18 -0
- package/dist/types/components/Resizer/ResizerButtonInner.d.ts +8 -0
- package/dist/types/components/Resizer/ResizerInner.d.ts +4 -0
- package/dist/types/components/Resizer/index.d.ts +2 -0
- package/dist/types/components/Resizer/types.d.ts +2 -0
- package/dist/types/components/icons/index.d.ts +1 -0
- package/dist/types/components/icons/missing-image.d.ts +3 -0
- package/dist/types/index.d.ts +1 -0
- package/package.json +1 -1
|
@@ -0,0 +1,109 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.Resizer = void 0;
|
|
7
|
+
const react_1 = __importDefault(require("react"));
|
|
8
|
+
const ResizerButton_1 = require("./ResizerButton");
|
|
9
|
+
const ResizerInner_1 = require("./ResizerInner");
|
|
10
|
+
const inners = {
|
|
11
|
+
column: {
|
|
12
|
+
end: ResizerInner_1.VerticalEndResizerInner,
|
|
13
|
+
start: ResizerInner_1.VerticalStartResizerInner,
|
|
14
|
+
},
|
|
15
|
+
row: {
|
|
16
|
+
end: ResizerInner_1.HorizontalEndResizerInner,
|
|
17
|
+
start: ResizerInner_1.HorizontalStartResizerInner,
|
|
18
|
+
},
|
|
19
|
+
};
|
|
20
|
+
class Resizer extends react_1.default.Component {
|
|
21
|
+
constructor() {
|
|
22
|
+
super(...arguments);
|
|
23
|
+
this.resizerRef = react_1.default.createRef();
|
|
24
|
+
this.state = {
|
|
25
|
+
isHovering: false,
|
|
26
|
+
isResizing: false,
|
|
27
|
+
startPosition: 0,
|
|
28
|
+
};
|
|
29
|
+
this.scheduleResize = (delta) => {
|
|
30
|
+
if (this.state.isResizing && delta) {
|
|
31
|
+
this.props.onResize(delta);
|
|
32
|
+
}
|
|
33
|
+
};
|
|
34
|
+
this.mouseDownHandler = (e) => {
|
|
35
|
+
e.preventDefault();
|
|
36
|
+
if (!this.resizerRef.current || e.target !== this.resizerRef.current) {
|
|
37
|
+
return;
|
|
38
|
+
}
|
|
39
|
+
if (this.state.isResizing) {
|
|
40
|
+
return;
|
|
41
|
+
}
|
|
42
|
+
this.setState({
|
|
43
|
+
isResizing: true,
|
|
44
|
+
startPosition: this.getPosition(e),
|
|
45
|
+
});
|
|
46
|
+
window.addEventListener('mousemove', this.mouseMoveHandler);
|
|
47
|
+
window.addEventListener('mouseup', this.mouseUpHandler);
|
|
48
|
+
window.addEventListener('mouseout', this.handleOutofBounds);
|
|
49
|
+
};
|
|
50
|
+
this.mouseUpHandler = (e, outOfBounds = false) => {
|
|
51
|
+
window.removeEventListener('mousemove', this.mouseMoveHandler);
|
|
52
|
+
window.removeEventListener('mouseup', this.mouseUpHandler);
|
|
53
|
+
window.removeEventListener('mouseout', this.handleOutofBounds);
|
|
54
|
+
this.setState({
|
|
55
|
+
isResizing: false,
|
|
56
|
+
});
|
|
57
|
+
const position = this.getPosition(e);
|
|
58
|
+
const adjustedPosition = outOfBounds ? position - 32 : position;
|
|
59
|
+
const delta = this.getDelta(adjustedPosition);
|
|
60
|
+
if (delta === 0) {
|
|
61
|
+
this.props.onResizeButton();
|
|
62
|
+
}
|
|
63
|
+
this.props.onResize(delta);
|
|
64
|
+
this.props.onResizeEnd(delta);
|
|
65
|
+
};
|
|
66
|
+
this.mouseMoveHandler = (e) => {
|
|
67
|
+
const position = this.getPosition(e);
|
|
68
|
+
const delta = this.getDelta(position);
|
|
69
|
+
this.scheduleResize(delta);
|
|
70
|
+
};
|
|
71
|
+
this.mouseEnterHandler = () => {
|
|
72
|
+
this.setState({
|
|
73
|
+
isHovering: true,
|
|
74
|
+
});
|
|
75
|
+
};
|
|
76
|
+
this.mouseLeaveHandler = () => {
|
|
77
|
+
this.setState({
|
|
78
|
+
isHovering: false,
|
|
79
|
+
});
|
|
80
|
+
};
|
|
81
|
+
this.handleOutofBounds = (e) => {
|
|
82
|
+
const disableResizeNodes = [
|
|
83
|
+
'IFRAME',
|
|
84
|
+
'HTML',
|
|
85
|
+
null,
|
|
86
|
+
];
|
|
87
|
+
if (this.state.isResizing &&
|
|
88
|
+
disableResizeNodes.includes(e.relatedTarget && e.relatedTarget.nodeName)) {
|
|
89
|
+
this.mouseUpHandler(e, true);
|
|
90
|
+
}
|
|
91
|
+
};
|
|
92
|
+
this.getDelta = (delta) => {
|
|
93
|
+
const { startPosition } = this.state;
|
|
94
|
+
return this.props.side === 'end'
|
|
95
|
+
? delta - startPosition
|
|
96
|
+
: startPosition - delta;
|
|
97
|
+
};
|
|
98
|
+
this.getPosition = (e) => {
|
|
99
|
+
return this.props.direction === 'row' ? e.screenX : e.screenY;
|
|
100
|
+
};
|
|
101
|
+
}
|
|
102
|
+
render() {
|
|
103
|
+
const { buttonInner, direction, side } = this.props;
|
|
104
|
+
const ResizerInner = inners[direction][side];
|
|
105
|
+
return (react_1.default.createElement(ResizerInner, { ref: this.resizerRef, onMouseDown: this.mouseDownHandler, onMouseEnter: this.mouseEnterHandler, onMouseLeave: this.mouseLeaveHandler },
|
|
106
|
+
react_1.default.createElement(ResizerButton_1.ResizerButton, { direction: direction, isCollapsed: this.props.collapsed, isVisible: this.state.isHovering, onClick: this.props.onResizeButton, side: side, buttonInner: buttonInner })));
|
|
107
|
+
}
|
|
108
|
+
}
|
|
109
|
+
exports.Resizer = Resizer;
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.ResizerButton = void 0;
|
|
7
|
+
const react_1 = __importDefault(require("react"));
|
|
8
|
+
const ResizerButtonInner_1 = require("./ResizerButtonInner");
|
|
9
|
+
const inners = {
|
|
10
|
+
column: {
|
|
11
|
+
end: ResizerButtonInner_1.VerticalEndResizerButtonInner,
|
|
12
|
+
start: ResizerButtonInner_1.VerticalStartResizerButtonInner,
|
|
13
|
+
},
|
|
14
|
+
row: {
|
|
15
|
+
end: ResizerButtonInner_1.HorizontalEndResizerButtonInner,
|
|
16
|
+
start: ResizerButtonInner_1.HorizontalStartResizerButtonInner,
|
|
17
|
+
},
|
|
18
|
+
};
|
|
19
|
+
class ResizerButton extends react_1.default.PureComponent {
|
|
20
|
+
render() {
|
|
21
|
+
const { buttonInner, direction, side, isCollapsed, onClick, isVisible } = this.props;
|
|
22
|
+
const ResizerButtonInner = buttonInner || inners[direction][side];
|
|
23
|
+
return (react_1.default.createElement(ResizerButtonInner, { "aria-expanded": !isCollapsed, isCollapsed: isCollapsed, isVisible: isVisible, onClick: onClick, onMouseDown: (event) => event.preventDefault() }));
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
exports.ResizerButton = ResizerButton;
|
|
27
|
+
ResizerButton.defaultProps = {
|
|
28
|
+
isCollapsed: false,
|
|
29
|
+
isVisible: false,
|
|
30
|
+
};
|
|
@@ -0,0 +1,169 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.VerticalStartResizerButtonInner = exports.VerticalEndResizerButtonInner = exports.HorizontalStartResizerButtonInner = exports.HorizontalEndResizerButtonInner = void 0;
|
|
7
|
+
const styled_components_1 = __importDefault(require("styled-components"));
|
|
8
|
+
const gridSize = 8;
|
|
9
|
+
const resizerVisibleSize = 2;
|
|
10
|
+
const toggleButtonDepth = gridSize * 4.5;
|
|
11
|
+
const toggleArrowDepth = gridSize * 2;
|
|
12
|
+
const toggleArrowSize = 2;
|
|
13
|
+
const toggleArrowStartOffset = (toggleButtonDepth - toggleArrowDepth) / 2;
|
|
14
|
+
const toggleArrowEndOffset = toggleArrowStartOffset - toggleArrowSize + toggleArrowDepth / 2;
|
|
15
|
+
const opacityTransition = `opacity 200ms ease-in-out 100ms`;
|
|
16
|
+
const transformTransition = `transform 100ms ease-in-out`;
|
|
17
|
+
const ResizerButtonInner = styled_components_1.default.button `
|
|
18
|
+
position: relative;
|
|
19
|
+
background: none;
|
|
20
|
+
border: none;
|
|
21
|
+
color: transparent;
|
|
22
|
+
cursor: pointer;
|
|
23
|
+
|
|
24
|
+
&:focus {
|
|
25
|
+
outline: 1px solid blue;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
&::before,
|
|
29
|
+
&::after {
|
|
30
|
+
content: '';
|
|
31
|
+
background-color: #ddd;
|
|
32
|
+
border-radius: ${toggleArrowDepth}px;
|
|
33
|
+
position: absolute;
|
|
34
|
+
opacity: ${(props) => (props.isVisible ? 1 : 0.5)};
|
|
35
|
+
transition: ${transformTransition}, ${opacityTransition};
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
&::before {
|
|
39
|
+
transform-origin: ${toggleArrowSize / 2}px
|
|
40
|
+
${toggleArrowDepth / 2 - toggleArrowSize / 2}px;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
&::after {
|
|
44
|
+
transform-origin: ${toggleArrowSize / 2}px ${toggleArrowSize / 2}px;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
&:hover,
|
|
48
|
+
&:focus {
|
|
49
|
+
&::before,
|
|
50
|
+
&::after {
|
|
51
|
+
background-color: #2a6f9d;
|
|
52
|
+
opacity: 1;
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
`;
|
|
56
|
+
const HorizontalResizerButtonInner = (0, styled_components_1.default)(ResizerButtonInner) `
|
|
57
|
+
top: calc(50% - ${toggleButtonDepth / 2}px);
|
|
58
|
+
width: ${gridSize * 3}px;
|
|
59
|
+
height: ${toggleButtonDepth}px;
|
|
60
|
+
|
|
61
|
+
&::before,
|
|
62
|
+
&::after {
|
|
63
|
+
width: ${toggleArrowSize}px;
|
|
64
|
+
height: ${toggleArrowDepth / 2}px;
|
|
65
|
+
transform: rotate(0deg);
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
&::before {
|
|
69
|
+
top: ${toggleArrowStartOffset}px;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
&::after {
|
|
73
|
+
top: ${toggleArrowEndOffset}px;
|
|
74
|
+
}
|
|
75
|
+
`;
|
|
76
|
+
exports.HorizontalEndResizerButtonInner = (0, styled_components_1.default)(HorizontalResizerButtonInner) `
|
|
77
|
+
left: -${resizerVisibleSize / 2}px;
|
|
78
|
+
|
|
79
|
+
&::before,
|
|
80
|
+
&::after {
|
|
81
|
+
left: 8px;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
&:hover,
|
|
85
|
+
&:focus {
|
|
86
|
+
&::before {
|
|
87
|
+
transform: rotate(${(props) => (props.isCollapsed ? '-40deg' : '40deg')});
|
|
88
|
+
}
|
|
89
|
+
&::after {
|
|
90
|
+
transform: rotate(${(props) => (props.isCollapsed ? '40deg' : '-40deg')});
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
`;
|
|
94
|
+
exports.HorizontalStartResizerButtonInner = (0, styled_components_1.default)(HorizontalResizerButtonInner) `
|
|
95
|
+
right: -${resizerVisibleSize / 2}px;
|
|
96
|
+
|
|
97
|
+
&::before,
|
|
98
|
+
&::after {
|
|
99
|
+
right: 16px;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
&:hover,
|
|
103
|
+
&:focus {
|
|
104
|
+
&::before {
|
|
105
|
+
transform: rotate(${(props) => (props.isCollapsed ? '40deg' : '-40deg')});
|
|
106
|
+
}
|
|
107
|
+
&::after {
|
|
108
|
+
transform: rotate(${(props) => (props.isCollapsed ? '-40deg' : '40deg')});
|
|
109
|
+
}
|
|
110
|
+
}
|
|
111
|
+
`;
|
|
112
|
+
const VerticalResizerButtonInner = (0, styled_components_1.default)(ResizerButtonInner) `
|
|
113
|
+
left: calc(50% - ${toggleButtonDepth / 2}px);
|
|
114
|
+
width: ${toggleButtonDepth}px;
|
|
115
|
+
height: ${gridSize * 3}px;
|
|
116
|
+
|
|
117
|
+
&::before,
|
|
118
|
+
&::after {
|
|
119
|
+
width: ${toggleArrowDepth / 2}px;
|
|
120
|
+
height: ${toggleArrowSize}px;
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
&::before {
|
|
124
|
+
left: ${toggleArrowStartOffset}px;
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
&::after {
|
|
128
|
+
left: ${toggleArrowEndOffset}px;
|
|
129
|
+
}
|
|
130
|
+
`;
|
|
131
|
+
exports.VerticalEndResizerButtonInner = (0, styled_components_1.default)(VerticalResizerButtonInner) `
|
|
132
|
+
bottom: -${resizerVisibleSize / 2}px;
|
|
133
|
+
|
|
134
|
+
&::before,
|
|
135
|
+
&::after {
|
|
136
|
+
bottom: 8px;
|
|
137
|
+
transform-origin: top center;
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
&:hover,
|
|
141
|
+
&:focus {
|
|
142
|
+
&::before {
|
|
143
|
+
transform: rotate(${(props) => (props.isCollapsed ? '40deg' : '-40deg')});
|
|
144
|
+
}
|
|
145
|
+
&::after {
|
|
146
|
+
transform: rotate(${(props) => (props.isCollapsed ? '-40deg' : '40deg')});
|
|
147
|
+
}
|
|
148
|
+
}
|
|
149
|
+
`;
|
|
150
|
+
exports.VerticalStartResizerButtonInner = (0, styled_components_1.default)(VerticalResizerButtonInner) `
|
|
151
|
+
top: -${resizerVisibleSize / 2}px;
|
|
152
|
+
|
|
153
|
+
&::before,
|
|
154
|
+
&::after {
|
|
155
|
+
top: 8px;
|
|
156
|
+
transform: rotate(270deg);
|
|
157
|
+
transform-origin: bottom center;
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
&:hover,
|
|
161
|
+
&:focus {
|
|
162
|
+
&::before {
|
|
163
|
+
transform: rotate(${(props) => (props.isCollapsed ? '-40deg' : '40deg')});
|
|
164
|
+
}
|
|
165
|
+
&::after {
|
|
166
|
+
transform: rotate(${(props) => (props.isCollapsed ? '40deg' : '-40deg')});
|
|
167
|
+
}
|
|
168
|
+
}
|
|
169
|
+
`;
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.VerticalEndResizerInner = exports.VerticalStartResizerInner = exports.HorizontalEndResizerInner = exports.HorizontalStartResizerInner = void 0;
|
|
7
|
+
const styled_components_1 = __importDefault(require("styled-components"));
|
|
8
|
+
const ResizerInner = styled_components_1.default.div `
|
|
9
|
+
display: block;
|
|
10
|
+
z-index: 2;
|
|
11
|
+
overflow: visible;
|
|
12
|
+
position: absolute;
|
|
13
|
+
|
|
14
|
+
&::before {
|
|
15
|
+
content: '';
|
|
16
|
+
position: absolute;
|
|
17
|
+
transition: background-color 200ms ease-in-out 100ms;
|
|
18
|
+
background: rgb(240, 240, 240);
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
&:hover::before {
|
|
22
|
+
background: #e2e2e2;
|
|
23
|
+
}
|
|
24
|
+
`;
|
|
25
|
+
const HorizontalResizerInner = (0, styled_components_1.default)(ResizerInner) `
|
|
26
|
+
cursor: ew-resize;
|
|
27
|
+
top: 0;
|
|
28
|
+
height: 100%;
|
|
29
|
+
width: 16px;
|
|
30
|
+
|
|
31
|
+
&::before {
|
|
32
|
+
height: 100%;
|
|
33
|
+
width: 1px;
|
|
34
|
+
}
|
|
35
|
+
`;
|
|
36
|
+
exports.HorizontalStartResizerInner = (0, styled_components_1.default)(HorizontalResizerInner) `
|
|
37
|
+
left: -16px;
|
|
38
|
+
|
|
39
|
+
&::before {
|
|
40
|
+
right: -1px;
|
|
41
|
+
}
|
|
42
|
+
`;
|
|
43
|
+
exports.HorizontalEndResizerInner = (0, styled_components_1.default)(HorizontalResizerInner) `
|
|
44
|
+
right: -16px;
|
|
45
|
+
|
|
46
|
+
&::before {
|
|
47
|
+
left: -1px;
|
|
48
|
+
}
|
|
49
|
+
`;
|
|
50
|
+
const VerticalResizerInner = (0, styled_components_1.default)(ResizerInner) `
|
|
51
|
+
cursor: ns-resize;
|
|
52
|
+
left: 0;
|
|
53
|
+
height: 16px;
|
|
54
|
+
width: 100%;
|
|
55
|
+
|
|
56
|
+
&::before {
|
|
57
|
+
width: 100%;
|
|
58
|
+
height: 1px;
|
|
59
|
+
}
|
|
60
|
+
`;
|
|
61
|
+
exports.VerticalStartResizerInner = (0, styled_components_1.default)(VerticalResizerInner) `
|
|
62
|
+
top: -16px;
|
|
63
|
+
|
|
64
|
+
&::before {
|
|
65
|
+
bottom: -1px;
|
|
66
|
+
}
|
|
67
|
+
`;
|
|
68
|
+
exports.VerticalEndResizerInner = (0, styled_components_1.default)(VerticalResizerInner) `
|
|
69
|
+
bottom: -16px;
|
|
70
|
+
|
|
71
|
+
&::before {
|
|
72
|
+
top: -1px;
|
|
73
|
+
}
|
|
74
|
+
`;
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
|
|
5
|
+
}) : (function(o, m, k, k2) {
|
|
6
|
+
if (k2 === undefined) k2 = k;
|
|
7
|
+
o[k2] = m[k];
|
|
8
|
+
}));
|
|
9
|
+
var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
10
|
+
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
11
|
+
};
|
|
12
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
13
|
+
exports.Resizer = void 0;
|
|
14
|
+
var Resizer_1 = require("./Resizer");
|
|
15
|
+
Object.defineProperty(exports, "Resizer", { enumerable: true, get: function () { return Resizer_1.Resizer; } });
|
|
16
|
+
__exportStar(require("./types"), exports);
|
|
@@ -18,7 +18,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
18
18
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
19
19
|
};
|
|
20
20
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
21
|
-
exports.UploadIcon = exports.AttachIcon = exports.TaskStepNextIcon = exports.TaskStepDoneIcon = exports.TaskStepCurrentIcon = exports.ZoomOutIcon = exports.ZoomInIcon = exports.UserIcon = exports.TickMarkIcon = exports.SearchIcon = exports.ProjectsListIcon = exports.ProjectIcon = exports.ProjectNotificationIcon = exports.OrcidIcon = exports.GoogleIcon = exports.CloseOIcon = exports.BookmarkIcon = exports.BackArrowIcon = exports.AddIconInverted = exports.AddIconActive = exports.AddAuthor = void 0;
|
|
21
|
+
exports.MissingImage = exports.UploadIcon = exports.AttachIcon = exports.TaskStepNextIcon = exports.TaskStepDoneIcon = exports.TaskStepCurrentIcon = exports.ZoomOutIcon = exports.ZoomInIcon = exports.UserIcon = exports.TickMarkIcon = exports.SearchIcon = exports.ProjectsListIcon = exports.ProjectIcon = exports.ProjectNotificationIcon = exports.OrcidIcon = exports.GoogleIcon = exports.CloseOIcon = exports.BookmarkIcon = exports.BackArrowIcon = exports.AddIconInverted = exports.AddIconActive = exports.AddAuthor = void 0;
|
|
22
22
|
var add_author_1 = require("./add-author");
|
|
23
23
|
Object.defineProperty(exports, "AddAuthor", { enumerable: true, get: function () { return __importDefault(add_author_1).default; } });
|
|
24
24
|
var add_icon_active_1 = require("./add-icon-active");
|
|
@@ -61,3 +61,5 @@ var attach_1 = require("./attach");
|
|
|
61
61
|
Object.defineProperty(exports, "AttachIcon", { enumerable: true, get: function () { return __importDefault(attach_1).default; } });
|
|
62
62
|
var upload_1 = require("./upload");
|
|
63
63
|
Object.defineProperty(exports, "UploadIcon", { enumerable: true, get: function () { return __importDefault(upload_1).default; } });
|
|
64
|
+
var missing_image_1 = require("./missing-image");
|
|
65
|
+
Object.defineProperty(exports, "MissingImage", { enumerable: true, get: function () { return __importDefault(missing_image_1).default; } });
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
const react_1 = __importDefault(require("react"));
|
|
7
|
+
const MissingImage = () => (react_1.default.createElement("svg", { width: "28", height: "32", viewBox: "0 0 28 32", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
|
|
8
|
+
react_1.default.createElement("path", { d: "M2.99979 1.25C2.03237 1.25 1.25073 2.03442 1.25073 3V29C1.25073 29.9665 2.03423 30.75 3.00073 30.75H25.0007C25.9672 30.75 26.7507 29.9665 26.7507 29V11.4383C26.7507 10.9494 26.5462 10.4828 26.1868 10.1515L17.0318 1.71322C16.7092 1.41588 16.287 1.25 15.8467 1.25H15.8372H15.8275H15.8177H15.8078H15.7978H15.7877H15.7775H15.7671H15.7567H15.7462H15.7355H15.7248H15.7139H15.703H15.6919H15.6807H15.6694H15.6581H15.6466H15.635H15.6233H15.6115H15.5996H15.5876H15.5755H15.5633H15.551H15.5386H15.5261H15.5135H15.5008H15.488H15.4751H15.4621H15.449H15.4358H15.4225H15.4091H15.3956H15.382H15.3683H15.3545H15.3406H15.3266H15.3126H15.2984H15.2841H15.2697H15.2553H15.2407H15.2261H15.2113H15.1965H15.1815H15.1665H15.1514H15.1362H15.1209H15.1055H15.09H15.0744H15.0587H15.043H15.0271H15.0111H14.9951H14.979H14.9628H14.9464H14.93H14.9136H14.897H14.8803H14.8636H14.8467H14.8298H14.8128H14.7957H14.7785H14.7612H14.7438H14.7264H14.7089H14.6912H14.6735H14.6557H14.6379H14.6199H14.6019H14.5837H14.5655H14.5472H14.5289H14.5104H14.4919H14.4732H14.4545H14.4357H14.4169H14.3979H14.3789H14.3598H14.3406H14.3213H14.302H14.2825H14.263H14.2435H14.2238H14.204H14.1842H14.1643H14.1443H14.1243H14.1042H14.084H14.0637H14.0433H14.0229H14.0024H13.9818H13.9611H13.9404H13.9196H13.8987H13.8778H13.8567H13.8356H13.8144H13.7932H13.7719H13.7505H13.729H13.7075H13.6859H13.6642H13.6425H13.6206H13.5988H13.5768H13.5548H13.5327H13.5105H13.4883H13.466H13.4436H13.4212H13.3987H13.3761H13.3535H13.3308H13.308H13.2851H13.2622H13.2393H13.2162H13.1931H13.17H13.1467H13.1235H13.1001H13.0767H13.0532H13.0296H13.006H12.9824H12.9586H12.9348H12.911H12.8871H12.8631H12.839H12.8149H12.7908H12.7666H12.7423H12.7179H12.6935H12.6691H12.6446H12.62H12.5954H12.5707H12.5459H12.5211H12.4963H12.4713H12.4464H12.4213H12.3963H12.3711H12.3459H12.3207H12.2954H12.27H12.2446H12.2191H12.1936H12.168H12.1424H12.1167H12.091H12.0652H12.0394H12.0135H11.9876H11.9616H11.9355H11.9094H11.8833H11.8571H11.8309H11.8046H11.7782H11.7519H11.7254H11.6989H11.6724H11.6458H11.6192H11.5925H11.5658H11.539H11.5122H11.4854H11.4585H11.4315H11.4045H11.3775H11.3504H11.3233H11.2961H11.2689H11.2416H11.2143H11.187H11.1596H11.1322H11.1047H11.0772H11.0497H11.0221H10.9944H10.9668H10.939H10.9113H10.8835H10.8556H10.8278H10.7999H10.7719H10.7439H10.7159H10.6878H10.6597H10.6316H10.6034H10.5752H10.5469H10.5187H10.4903H10.462H10.4336H10.4052H10.3767H10.3482H10.3197H10.2911H10.2625H10.2339H10.2052H10.1765H10.1478H10.119H10.0902H10.0614H10.0326H10.0037H9.97477H9.94582H9.91684H9.88784H9.8588H9.82973H9.80064H9.77151H9.74236H9.71318H9.68397H9.65474H9.62547H9.59618H9.56687H9.53752H9.50815H9.47876H9.44934H9.41989H9.39042H9.36092H9.3314H9.30186H9.27229H9.24269H9.21308H9.18344H9.15378H9.12409H9.09438H9.06465H9.0349H9.00513H8.97534H8.94552H8.91569H8.88583H8.85596H8.82606H8.79615H8.76621H8.73626H8.70629H8.6763H8.64629H8.61627H8.58623H8.55617H8.52609H8.49599H8.46588H8.43576H8.40562H8.37546H8.34529H8.3151H8.2849H8.25468H8.22445H8.1942H8.16394H8.13367H8.10339H8.07309H8.04278H8.01246H7.98212H7.95178H7.92142H7.89105H7.86067H7.83029H7.79989H7.76948H7.73906H7.70863H7.67819H7.64775H7.61729H7.58683H7.55636H7.52588H7.49539H7.4649H7.4344H7.40389H7.37338H7.34286H7.31234H7.28181H7.25127H7.22073H7.19019H7.15964H7.12908H7.09853H7.06797H7.0374H7.00684H6.97627H6.9457H6.91512H6.88455H6.85397H6.82339H6.79282H6.76224H6.73166H6.70108H6.6705H6.63992H6.60934H6.57876H6.54819H6.51761H6.48704H6.45647H6.4259H6.39533H6.36477H6.33421H6.30366H6.27311H6.24256H6.21201H6.18148H6.15094H6.12041H6.08989H6.05937H6.02886H5.99836H5.96786H5.93737H5.90689H5.87641H5.84594H5.81548H5.78503H5.75458H5.72415H5.69372H5.66331H5.6329H5.6025H5.57212H5.54174H5.51138H5.48102H5.45068H5.42035H5.39003H5.35973H5.32943H5.29915H5.26888H5.23863H5.20839H5.17816H5.14795H5.11775H5.08757H5.0574H5.02725H4.99711H4.96699H4.93688H4.90679H4.87672H4.84667H4.81663H4.78661H4.75661H4.72662H4.69666H4.66671H4.63678H4.60687H4.57698H4.54712H4.51727H4.48744H4.45763H4.42784H4.39808H4.36833H4.33861H4.30891H4.27923H4.24958H4.21994H4.19033H4.16075H4.13119H4.10165H4.07213H4.04264H4.01318H3.98374H3.95433H3.92494H3.89558H3.86624H3.83693H3.80765H3.7784H3.74917H3.71997H3.6908H3.66165H3.63254H3.60345H3.57439H3.54537H3.51637H3.4874H3.45846H3.42955H3.40068H3.37183H3.34302H3.31423H3.28548H3.25676H3.22808H3.19942H3.1708H3.14222H3.11366H3.08514H3.05666H3.02821H2.99979Z", stroke: "#6E6E6E", strokeWidth: "1.5" }),
|
|
9
|
+
react_1.default.createElement("path", { d: "M8.00073 24C10.1219 20.9815 15.8916 16.7556 22.0007 24", stroke: "#6E6E6E", strokeWidth: "1.5", strokeLinecap: "round" }),
|
|
10
|
+
react_1.default.createElement("path", { d: "M8.00073 8C8.00073 8 8.00073 9.04738 8.00073 11", stroke: "#6E6E6E", strokeWidth: "1.5", strokeLinecap: "round" }),
|
|
11
|
+
react_1.default.createElement("path", { d: "M16.0007 2V12H26.0007", stroke: "#6E6E6E", strokeWidth: "1.5" })));
|
|
12
|
+
exports.default = MissingImage;
|
package/dist/cjs/index.js
CHANGED
|
@@ -48,6 +48,7 @@ __exportStar(require("./components/Form"), exports);
|
|
|
48
48
|
__exportStar(require("./components/FileManager"), exports);
|
|
49
49
|
__exportStar(require("./components/FileManager/util"), exports);
|
|
50
50
|
__exportStar(require("./components/FileManager/FileSectionItem/FileSectionItem"), exports);
|
|
51
|
+
__exportStar(require("./components/Resizer"), exports);
|
|
51
52
|
__exportStar(require("./components/SaveStatus"), exports);
|
|
52
53
|
__exportStar(require("./components/SimpleModal"), exports);
|
|
53
54
|
__exportStar(require("./components/StyledModal"), exports);
|
|
@@ -0,0 +1,102 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { ResizerButton } from './ResizerButton';
|
|
3
|
+
import { HorizontalEndResizerInner, HorizontalStartResizerInner, VerticalEndResizerInner, VerticalStartResizerInner, } from './ResizerInner';
|
|
4
|
+
const inners = {
|
|
5
|
+
column: {
|
|
6
|
+
end: VerticalEndResizerInner,
|
|
7
|
+
start: VerticalStartResizerInner,
|
|
8
|
+
},
|
|
9
|
+
row: {
|
|
10
|
+
end: HorizontalEndResizerInner,
|
|
11
|
+
start: HorizontalStartResizerInner,
|
|
12
|
+
},
|
|
13
|
+
};
|
|
14
|
+
export class Resizer extends React.Component {
|
|
15
|
+
constructor() {
|
|
16
|
+
super(...arguments);
|
|
17
|
+
this.resizerRef = React.createRef();
|
|
18
|
+
this.state = {
|
|
19
|
+
isHovering: false,
|
|
20
|
+
isResizing: false,
|
|
21
|
+
startPosition: 0,
|
|
22
|
+
};
|
|
23
|
+
this.scheduleResize = (delta) => {
|
|
24
|
+
if (this.state.isResizing && delta) {
|
|
25
|
+
this.props.onResize(delta);
|
|
26
|
+
}
|
|
27
|
+
};
|
|
28
|
+
this.mouseDownHandler = (e) => {
|
|
29
|
+
e.preventDefault();
|
|
30
|
+
if (!this.resizerRef.current || e.target !== this.resizerRef.current) {
|
|
31
|
+
return;
|
|
32
|
+
}
|
|
33
|
+
if (this.state.isResizing) {
|
|
34
|
+
return;
|
|
35
|
+
}
|
|
36
|
+
this.setState({
|
|
37
|
+
isResizing: true,
|
|
38
|
+
startPosition: this.getPosition(e),
|
|
39
|
+
});
|
|
40
|
+
window.addEventListener('mousemove', this.mouseMoveHandler);
|
|
41
|
+
window.addEventListener('mouseup', this.mouseUpHandler);
|
|
42
|
+
window.addEventListener('mouseout', this.handleOutofBounds);
|
|
43
|
+
};
|
|
44
|
+
this.mouseUpHandler = (e, outOfBounds = false) => {
|
|
45
|
+
window.removeEventListener('mousemove', this.mouseMoveHandler);
|
|
46
|
+
window.removeEventListener('mouseup', this.mouseUpHandler);
|
|
47
|
+
window.removeEventListener('mouseout', this.handleOutofBounds);
|
|
48
|
+
this.setState({
|
|
49
|
+
isResizing: false,
|
|
50
|
+
});
|
|
51
|
+
const position = this.getPosition(e);
|
|
52
|
+
const adjustedPosition = outOfBounds ? position - 32 : position;
|
|
53
|
+
const delta = this.getDelta(adjustedPosition);
|
|
54
|
+
if (delta === 0) {
|
|
55
|
+
this.props.onResizeButton();
|
|
56
|
+
}
|
|
57
|
+
this.props.onResize(delta);
|
|
58
|
+
this.props.onResizeEnd(delta);
|
|
59
|
+
};
|
|
60
|
+
this.mouseMoveHandler = (e) => {
|
|
61
|
+
const position = this.getPosition(e);
|
|
62
|
+
const delta = this.getDelta(position);
|
|
63
|
+
this.scheduleResize(delta);
|
|
64
|
+
};
|
|
65
|
+
this.mouseEnterHandler = () => {
|
|
66
|
+
this.setState({
|
|
67
|
+
isHovering: true,
|
|
68
|
+
});
|
|
69
|
+
};
|
|
70
|
+
this.mouseLeaveHandler = () => {
|
|
71
|
+
this.setState({
|
|
72
|
+
isHovering: false,
|
|
73
|
+
});
|
|
74
|
+
};
|
|
75
|
+
this.handleOutofBounds = (e) => {
|
|
76
|
+
const disableResizeNodes = [
|
|
77
|
+
'IFRAME',
|
|
78
|
+
'HTML',
|
|
79
|
+
null,
|
|
80
|
+
];
|
|
81
|
+
if (this.state.isResizing &&
|
|
82
|
+
disableResizeNodes.includes(e.relatedTarget && e.relatedTarget.nodeName)) {
|
|
83
|
+
this.mouseUpHandler(e, true);
|
|
84
|
+
}
|
|
85
|
+
};
|
|
86
|
+
this.getDelta = (delta) => {
|
|
87
|
+
const { startPosition } = this.state;
|
|
88
|
+
return this.props.side === 'end'
|
|
89
|
+
? delta - startPosition
|
|
90
|
+
: startPosition - delta;
|
|
91
|
+
};
|
|
92
|
+
this.getPosition = (e) => {
|
|
93
|
+
return this.props.direction === 'row' ? e.screenX : e.screenY;
|
|
94
|
+
};
|
|
95
|
+
}
|
|
96
|
+
render() {
|
|
97
|
+
const { buttonInner, direction, side } = this.props;
|
|
98
|
+
const ResizerInner = inners[direction][side];
|
|
99
|
+
return (React.createElement(ResizerInner, { ref: this.resizerRef, onMouseDown: this.mouseDownHandler, onMouseEnter: this.mouseEnterHandler, onMouseLeave: this.mouseLeaveHandler },
|
|
100
|
+
React.createElement(ResizerButton, { direction: direction, isCollapsed: this.props.collapsed, isVisible: this.state.isHovering, onClick: this.props.onResizeButton, side: side, buttonInner: buttonInner })));
|
|
101
|
+
}
|
|
102
|
+
}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { HorizontalEndResizerButtonInner, HorizontalStartResizerButtonInner, VerticalEndResizerButtonInner, VerticalStartResizerButtonInner, } from './ResizerButtonInner';
|
|
3
|
+
const inners = {
|
|
4
|
+
column: {
|
|
5
|
+
end: VerticalEndResizerButtonInner,
|
|
6
|
+
start: VerticalStartResizerButtonInner,
|
|
7
|
+
},
|
|
8
|
+
row: {
|
|
9
|
+
end: HorizontalEndResizerButtonInner,
|
|
10
|
+
start: HorizontalStartResizerButtonInner,
|
|
11
|
+
},
|
|
12
|
+
};
|
|
13
|
+
export class ResizerButton extends React.PureComponent {
|
|
14
|
+
render() {
|
|
15
|
+
const { buttonInner, direction, side, isCollapsed, onClick, isVisible } = this.props;
|
|
16
|
+
const ResizerButtonInner = buttonInner || inners[direction][side];
|
|
17
|
+
return (React.createElement(ResizerButtonInner, { "aria-expanded": !isCollapsed, isCollapsed: isCollapsed, isVisible: isVisible, onClick: onClick, onMouseDown: (event) => event.preventDefault() }));
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
ResizerButton.defaultProps = {
|
|
21
|
+
isCollapsed: false,
|
|
22
|
+
isVisible: false,
|
|
23
|
+
};
|
|
@@ -0,0 +1,163 @@
|
|
|
1
|
+
import styled from 'styled-components';
|
|
2
|
+
const gridSize = 8;
|
|
3
|
+
const resizerVisibleSize = 2;
|
|
4
|
+
const toggleButtonDepth = gridSize * 4.5;
|
|
5
|
+
const toggleArrowDepth = gridSize * 2;
|
|
6
|
+
const toggleArrowSize = 2;
|
|
7
|
+
const toggleArrowStartOffset = (toggleButtonDepth - toggleArrowDepth) / 2;
|
|
8
|
+
const toggleArrowEndOffset = toggleArrowStartOffset - toggleArrowSize + toggleArrowDepth / 2;
|
|
9
|
+
const opacityTransition = `opacity 200ms ease-in-out 100ms`;
|
|
10
|
+
const transformTransition = `transform 100ms ease-in-out`;
|
|
11
|
+
const ResizerButtonInner = styled.button `
|
|
12
|
+
position: relative;
|
|
13
|
+
background: none;
|
|
14
|
+
border: none;
|
|
15
|
+
color: transparent;
|
|
16
|
+
cursor: pointer;
|
|
17
|
+
|
|
18
|
+
&:focus {
|
|
19
|
+
outline: 1px solid blue;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
&::before,
|
|
23
|
+
&::after {
|
|
24
|
+
content: '';
|
|
25
|
+
background-color: #ddd;
|
|
26
|
+
border-radius: ${toggleArrowDepth}px;
|
|
27
|
+
position: absolute;
|
|
28
|
+
opacity: ${(props) => (props.isVisible ? 1 : 0.5)};
|
|
29
|
+
transition: ${transformTransition}, ${opacityTransition};
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
&::before {
|
|
33
|
+
transform-origin: ${toggleArrowSize / 2}px
|
|
34
|
+
${toggleArrowDepth / 2 - toggleArrowSize / 2}px;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
&::after {
|
|
38
|
+
transform-origin: ${toggleArrowSize / 2}px ${toggleArrowSize / 2}px;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
&:hover,
|
|
42
|
+
&:focus {
|
|
43
|
+
&::before,
|
|
44
|
+
&::after {
|
|
45
|
+
background-color: #2a6f9d;
|
|
46
|
+
opacity: 1;
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
`;
|
|
50
|
+
const HorizontalResizerButtonInner = styled(ResizerButtonInner) `
|
|
51
|
+
top: calc(50% - ${toggleButtonDepth / 2}px);
|
|
52
|
+
width: ${gridSize * 3}px;
|
|
53
|
+
height: ${toggleButtonDepth}px;
|
|
54
|
+
|
|
55
|
+
&::before,
|
|
56
|
+
&::after {
|
|
57
|
+
width: ${toggleArrowSize}px;
|
|
58
|
+
height: ${toggleArrowDepth / 2}px;
|
|
59
|
+
transform: rotate(0deg);
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
&::before {
|
|
63
|
+
top: ${toggleArrowStartOffset}px;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
&::after {
|
|
67
|
+
top: ${toggleArrowEndOffset}px;
|
|
68
|
+
}
|
|
69
|
+
`;
|
|
70
|
+
export const HorizontalEndResizerButtonInner = styled(HorizontalResizerButtonInner) `
|
|
71
|
+
left: -${resizerVisibleSize / 2}px;
|
|
72
|
+
|
|
73
|
+
&::before,
|
|
74
|
+
&::after {
|
|
75
|
+
left: 8px;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
&:hover,
|
|
79
|
+
&:focus {
|
|
80
|
+
&::before {
|
|
81
|
+
transform: rotate(${(props) => (props.isCollapsed ? '-40deg' : '40deg')});
|
|
82
|
+
}
|
|
83
|
+
&::after {
|
|
84
|
+
transform: rotate(${(props) => (props.isCollapsed ? '40deg' : '-40deg')});
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
`;
|
|
88
|
+
export const HorizontalStartResizerButtonInner = styled(HorizontalResizerButtonInner) `
|
|
89
|
+
right: -${resizerVisibleSize / 2}px;
|
|
90
|
+
|
|
91
|
+
&::before,
|
|
92
|
+
&::after {
|
|
93
|
+
right: 16px;
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
&:hover,
|
|
97
|
+
&:focus {
|
|
98
|
+
&::before {
|
|
99
|
+
transform: rotate(${(props) => (props.isCollapsed ? '40deg' : '-40deg')});
|
|
100
|
+
}
|
|
101
|
+
&::after {
|
|
102
|
+
transform: rotate(${(props) => (props.isCollapsed ? '-40deg' : '40deg')});
|
|
103
|
+
}
|
|
104
|
+
}
|
|
105
|
+
`;
|
|
106
|
+
const VerticalResizerButtonInner = styled(ResizerButtonInner) `
|
|
107
|
+
left: calc(50% - ${toggleButtonDepth / 2}px);
|
|
108
|
+
width: ${toggleButtonDepth}px;
|
|
109
|
+
height: ${gridSize * 3}px;
|
|
110
|
+
|
|
111
|
+
&::before,
|
|
112
|
+
&::after {
|
|
113
|
+
width: ${toggleArrowDepth / 2}px;
|
|
114
|
+
height: ${toggleArrowSize}px;
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
&::before {
|
|
118
|
+
left: ${toggleArrowStartOffset}px;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
&::after {
|
|
122
|
+
left: ${toggleArrowEndOffset}px;
|
|
123
|
+
}
|
|
124
|
+
`;
|
|
125
|
+
export const VerticalEndResizerButtonInner = styled(VerticalResizerButtonInner) `
|
|
126
|
+
bottom: -${resizerVisibleSize / 2}px;
|
|
127
|
+
|
|
128
|
+
&::before,
|
|
129
|
+
&::after {
|
|
130
|
+
bottom: 8px;
|
|
131
|
+
transform-origin: top center;
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
&:hover,
|
|
135
|
+
&:focus {
|
|
136
|
+
&::before {
|
|
137
|
+
transform: rotate(${(props) => (props.isCollapsed ? '40deg' : '-40deg')});
|
|
138
|
+
}
|
|
139
|
+
&::after {
|
|
140
|
+
transform: rotate(${(props) => (props.isCollapsed ? '-40deg' : '40deg')});
|
|
141
|
+
}
|
|
142
|
+
}
|
|
143
|
+
`;
|
|
144
|
+
export const VerticalStartResizerButtonInner = styled(VerticalResizerButtonInner) `
|
|
145
|
+
top: -${resizerVisibleSize / 2}px;
|
|
146
|
+
|
|
147
|
+
&::before,
|
|
148
|
+
&::after {
|
|
149
|
+
top: 8px;
|
|
150
|
+
transform: rotate(270deg);
|
|
151
|
+
transform-origin: bottom center;
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
&:hover,
|
|
155
|
+
&:focus {
|
|
156
|
+
&::before {
|
|
157
|
+
transform: rotate(${(props) => (props.isCollapsed ? '-40deg' : '40deg')});
|
|
158
|
+
}
|
|
159
|
+
&::after {
|
|
160
|
+
transform: rotate(${(props) => (props.isCollapsed ? '40deg' : '-40deg')});
|
|
161
|
+
}
|
|
162
|
+
}
|
|
163
|
+
`;
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
import styled from 'styled-components';
|
|
2
|
+
const ResizerInner = styled.div `
|
|
3
|
+
display: block;
|
|
4
|
+
z-index: 2;
|
|
5
|
+
overflow: visible;
|
|
6
|
+
position: absolute;
|
|
7
|
+
|
|
8
|
+
&::before {
|
|
9
|
+
content: '';
|
|
10
|
+
position: absolute;
|
|
11
|
+
transition: background-color 200ms ease-in-out 100ms;
|
|
12
|
+
background: rgb(240, 240, 240);
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
&:hover::before {
|
|
16
|
+
background: #e2e2e2;
|
|
17
|
+
}
|
|
18
|
+
`;
|
|
19
|
+
const HorizontalResizerInner = styled(ResizerInner) `
|
|
20
|
+
cursor: ew-resize;
|
|
21
|
+
top: 0;
|
|
22
|
+
height: 100%;
|
|
23
|
+
width: 16px;
|
|
24
|
+
|
|
25
|
+
&::before {
|
|
26
|
+
height: 100%;
|
|
27
|
+
width: 1px;
|
|
28
|
+
}
|
|
29
|
+
`;
|
|
30
|
+
export const HorizontalStartResizerInner = styled(HorizontalResizerInner) `
|
|
31
|
+
left: -16px;
|
|
32
|
+
|
|
33
|
+
&::before {
|
|
34
|
+
right: -1px;
|
|
35
|
+
}
|
|
36
|
+
`;
|
|
37
|
+
export const HorizontalEndResizerInner = styled(HorizontalResizerInner) `
|
|
38
|
+
right: -16px;
|
|
39
|
+
|
|
40
|
+
&::before {
|
|
41
|
+
left: -1px;
|
|
42
|
+
}
|
|
43
|
+
`;
|
|
44
|
+
const VerticalResizerInner = styled(ResizerInner) `
|
|
45
|
+
cursor: ns-resize;
|
|
46
|
+
left: 0;
|
|
47
|
+
height: 16px;
|
|
48
|
+
width: 100%;
|
|
49
|
+
|
|
50
|
+
&::before {
|
|
51
|
+
width: 100%;
|
|
52
|
+
height: 1px;
|
|
53
|
+
}
|
|
54
|
+
`;
|
|
55
|
+
export const VerticalStartResizerInner = styled(VerticalResizerInner) `
|
|
56
|
+
top: -16px;
|
|
57
|
+
|
|
58
|
+
&::before {
|
|
59
|
+
bottom: -1px;
|
|
60
|
+
}
|
|
61
|
+
`;
|
|
62
|
+
export const VerticalEndResizerInner = styled(VerticalResizerInner) `
|
|
63
|
+
bottom: -16px;
|
|
64
|
+
|
|
65
|
+
&::before {
|
|
66
|
+
top: -1px;
|
|
67
|
+
}
|
|
68
|
+
`;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -34,3 +34,4 @@ export { default as TaskStepDoneIcon } from './task-step-done';
|
|
|
34
34
|
export { default as TaskStepNextIcon } from './task-step-next';
|
|
35
35
|
export { default as AttachIcon } from './attach';
|
|
36
36
|
export { default as UploadIcon } from './upload';
|
|
37
|
+
export { default as MissingImage } from './missing-image';
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
const MissingImage = () => (React.createElement("svg", { width: "28", height: "32", viewBox: "0 0 28 32", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
|
|
3
|
+
React.createElement("path", { d: "M2.99979 1.25C2.03237 1.25 1.25073 2.03442 1.25073 3V29C1.25073 29.9665 2.03423 30.75 3.00073 30.75H25.0007C25.9672 30.75 26.7507 29.9665 26.7507 29V11.4383C26.7507 10.9494 26.5462 10.4828 26.1868 10.1515L17.0318 1.71322C16.7092 1.41588 16.287 1.25 15.8467 1.25H15.8372H15.8275H15.8177H15.8078H15.7978H15.7877H15.7775H15.7671H15.7567H15.7462H15.7355H15.7248H15.7139H15.703H15.6919H15.6807H15.6694H15.6581H15.6466H15.635H15.6233H15.6115H15.5996H15.5876H15.5755H15.5633H15.551H15.5386H15.5261H15.5135H15.5008H15.488H15.4751H15.4621H15.449H15.4358H15.4225H15.4091H15.3956H15.382H15.3683H15.3545H15.3406H15.3266H15.3126H15.2984H15.2841H15.2697H15.2553H15.2407H15.2261H15.2113H15.1965H15.1815H15.1665H15.1514H15.1362H15.1209H15.1055H15.09H15.0744H15.0587H15.043H15.0271H15.0111H14.9951H14.979H14.9628H14.9464H14.93H14.9136H14.897H14.8803H14.8636H14.8467H14.8298H14.8128H14.7957H14.7785H14.7612H14.7438H14.7264H14.7089H14.6912H14.6735H14.6557H14.6379H14.6199H14.6019H14.5837H14.5655H14.5472H14.5289H14.5104H14.4919H14.4732H14.4545H14.4357H14.4169H14.3979H14.3789H14.3598H14.3406H14.3213H14.302H14.2825H14.263H14.2435H14.2238H14.204H14.1842H14.1643H14.1443H14.1243H14.1042H14.084H14.0637H14.0433H14.0229H14.0024H13.9818H13.9611H13.9404H13.9196H13.8987H13.8778H13.8567H13.8356H13.8144H13.7932H13.7719H13.7505H13.729H13.7075H13.6859H13.6642H13.6425H13.6206H13.5988H13.5768H13.5548H13.5327H13.5105H13.4883H13.466H13.4436H13.4212H13.3987H13.3761H13.3535H13.3308H13.308H13.2851H13.2622H13.2393H13.2162H13.1931H13.17H13.1467H13.1235H13.1001H13.0767H13.0532H13.0296H13.006H12.9824H12.9586H12.9348H12.911H12.8871H12.8631H12.839H12.8149H12.7908H12.7666H12.7423H12.7179H12.6935H12.6691H12.6446H12.62H12.5954H12.5707H12.5459H12.5211H12.4963H12.4713H12.4464H12.4213H12.3963H12.3711H12.3459H12.3207H12.2954H12.27H12.2446H12.2191H12.1936H12.168H12.1424H12.1167H12.091H12.0652H12.0394H12.0135H11.9876H11.9616H11.9355H11.9094H11.8833H11.8571H11.8309H11.8046H11.7782H11.7519H11.7254H11.6989H11.6724H11.6458H11.6192H11.5925H11.5658H11.539H11.5122H11.4854H11.4585H11.4315H11.4045H11.3775H11.3504H11.3233H11.2961H11.2689H11.2416H11.2143H11.187H11.1596H11.1322H11.1047H11.0772H11.0497H11.0221H10.9944H10.9668H10.939H10.9113H10.8835H10.8556H10.8278H10.7999H10.7719H10.7439H10.7159H10.6878H10.6597H10.6316H10.6034H10.5752H10.5469H10.5187H10.4903H10.462H10.4336H10.4052H10.3767H10.3482H10.3197H10.2911H10.2625H10.2339H10.2052H10.1765H10.1478H10.119H10.0902H10.0614H10.0326H10.0037H9.97477H9.94582H9.91684H9.88784H9.8588H9.82973H9.80064H9.77151H9.74236H9.71318H9.68397H9.65474H9.62547H9.59618H9.56687H9.53752H9.50815H9.47876H9.44934H9.41989H9.39042H9.36092H9.3314H9.30186H9.27229H9.24269H9.21308H9.18344H9.15378H9.12409H9.09438H9.06465H9.0349H9.00513H8.97534H8.94552H8.91569H8.88583H8.85596H8.82606H8.79615H8.76621H8.73626H8.70629H8.6763H8.64629H8.61627H8.58623H8.55617H8.52609H8.49599H8.46588H8.43576H8.40562H8.37546H8.34529H8.3151H8.2849H8.25468H8.22445H8.1942H8.16394H8.13367H8.10339H8.07309H8.04278H8.01246H7.98212H7.95178H7.92142H7.89105H7.86067H7.83029H7.79989H7.76948H7.73906H7.70863H7.67819H7.64775H7.61729H7.58683H7.55636H7.52588H7.49539H7.4649H7.4344H7.40389H7.37338H7.34286H7.31234H7.28181H7.25127H7.22073H7.19019H7.15964H7.12908H7.09853H7.06797H7.0374H7.00684H6.97627H6.9457H6.91512H6.88455H6.85397H6.82339H6.79282H6.76224H6.73166H6.70108H6.6705H6.63992H6.60934H6.57876H6.54819H6.51761H6.48704H6.45647H6.4259H6.39533H6.36477H6.33421H6.30366H6.27311H6.24256H6.21201H6.18148H6.15094H6.12041H6.08989H6.05937H6.02886H5.99836H5.96786H5.93737H5.90689H5.87641H5.84594H5.81548H5.78503H5.75458H5.72415H5.69372H5.66331H5.6329H5.6025H5.57212H5.54174H5.51138H5.48102H5.45068H5.42035H5.39003H5.35973H5.32943H5.29915H5.26888H5.23863H5.20839H5.17816H5.14795H5.11775H5.08757H5.0574H5.02725H4.99711H4.96699H4.93688H4.90679H4.87672H4.84667H4.81663H4.78661H4.75661H4.72662H4.69666H4.66671H4.63678H4.60687H4.57698H4.54712H4.51727H4.48744H4.45763H4.42784H4.39808H4.36833H4.33861H4.30891H4.27923H4.24958H4.21994H4.19033H4.16075H4.13119H4.10165H4.07213H4.04264H4.01318H3.98374H3.95433H3.92494H3.89558H3.86624H3.83693H3.80765H3.7784H3.74917H3.71997H3.6908H3.66165H3.63254H3.60345H3.57439H3.54537H3.51637H3.4874H3.45846H3.42955H3.40068H3.37183H3.34302H3.31423H3.28548H3.25676H3.22808H3.19942H3.1708H3.14222H3.11366H3.08514H3.05666H3.02821H2.99979Z", stroke: "#6E6E6E", strokeWidth: "1.5" }),
|
|
4
|
+
React.createElement("path", { d: "M8.00073 24C10.1219 20.9815 15.8916 16.7556 22.0007 24", stroke: "#6E6E6E", strokeWidth: "1.5", strokeLinecap: "round" }),
|
|
5
|
+
React.createElement("path", { d: "M8.00073 8C8.00073 8 8.00073 9.04738 8.00073 11", stroke: "#6E6E6E", strokeWidth: "1.5", strokeLinecap: "round" }),
|
|
6
|
+
React.createElement("path", { d: "M16.0007 2V12H26.0007", stroke: "#6E6E6E", strokeWidth: "1.5" })));
|
|
7
|
+
export default MissingImage;
|
package/dist/es/index.js
CHANGED
|
@@ -32,6 +32,7 @@ export * from './components/Form';
|
|
|
32
32
|
export * from './components/FileManager';
|
|
33
33
|
export * from './components/FileManager/util';
|
|
34
34
|
export * from './components/FileManager/FileSectionItem/FileSectionItem';
|
|
35
|
+
export * from './components/Resizer';
|
|
35
36
|
export * from './components/SaveStatus';
|
|
36
37
|
export * from './components/SimpleModal';
|
|
37
38
|
export * from './components/StyledModal';
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { ResizerButtonInnerProps } from './ResizerButtonInner';
|
|
3
|
+
import { ResizerDirection, ResizerSide } from './types';
|
|
4
|
+
interface Props {
|
|
5
|
+
collapsed: boolean;
|
|
6
|
+
direction: ResizerDirection;
|
|
7
|
+
onResize: (resizeDelta: number) => void;
|
|
8
|
+
onResizeButton: () => void;
|
|
9
|
+
onResizeEnd: (resizeDelta: number) => void;
|
|
10
|
+
side: ResizerSide;
|
|
11
|
+
buttonInner?: React.ComponentType<ResizerButtonInnerProps>;
|
|
12
|
+
}
|
|
13
|
+
interface State {
|
|
14
|
+
isHovering: boolean;
|
|
15
|
+
isResizing: boolean;
|
|
16
|
+
startPosition: number;
|
|
17
|
+
}
|
|
18
|
+
export declare class Resizer extends React.Component<Props, State> {
|
|
19
|
+
resizerRef: React.RefObject<HTMLDivElement>;
|
|
20
|
+
state: {
|
|
21
|
+
isHovering: boolean;
|
|
22
|
+
isResizing: boolean;
|
|
23
|
+
startPosition: number;
|
|
24
|
+
};
|
|
25
|
+
render(): JSX.Element;
|
|
26
|
+
private scheduleResize;
|
|
27
|
+
private mouseDownHandler;
|
|
28
|
+
private mouseUpHandler;
|
|
29
|
+
private mouseMoveHandler;
|
|
30
|
+
private mouseEnterHandler;
|
|
31
|
+
private mouseLeaveHandler;
|
|
32
|
+
private handleOutofBounds;
|
|
33
|
+
private getDelta;
|
|
34
|
+
private getPosition;
|
|
35
|
+
}
|
|
36
|
+
export {};
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { ResizerButtonInnerProps } from './ResizerButtonInner';
|
|
3
|
+
import { ResizerDirection, ResizerSide } from './types';
|
|
4
|
+
interface Props extends React.HTMLProps<HTMLButtonElement> {
|
|
5
|
+
direction: ResizerDirection;
|
|
6
|
+
isCollapsed: boolean;
|
|
7
|
+
isVisible: boolean;
|
|
8
|
+
side: ResizerSide;
|
|
9
|
+
buttonInner?: React.ComponentType<ResizerButtonInnerProps>;
|
|
10
|
+
}
|
|
11
|
+
export declare class ResizerButton extends React.PureComponent<Props> {
|
|
12
|
+
static defaultProps: {
|
|
13
|
+
isCollapsed: boolean;
|
|
14
|
+
isVisible: boolean;
|
|
15
|
+
};
|
|
16
|
+
render(): JSX.Element;
|
|
17
|
+
}
|
|
18
|
+
export {};
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
export interface ResizerButtonInnerProps {
|
|
2
|
+
isCollapsed: boolean;
|
|
3
|
+
isVisible: boolean;
|
|
4
|
+
}
|
|
5
|
+
export declare const HorizontalEndResizerButtonInner: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, ResizerButtonInnerProps, never>;
|
|
6
|
+
export declare const HorizontalStartResizerButtonInner: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, ResizerButtonInnerProps, never>;
|
|
7
|
+
export declare const VerticalEndResizerButtonInner: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, ResizerButtonInnerProps, never>;
|
|
8
|
+
export declare const VerticalStartResizerButtonInner: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, ResizerButtonInnerProps, never>;
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
export declare const HorizontalStartResizerInner: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
2
|
+
export declare const HorizontalEndResizerInner: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
3
|
+
export declare const VerticalStartResizerInner: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
4
|
+
export declare const VerticalEndResizerInner: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
@@ -34,3 +34,4 @@ export { default as TaskStepDoneIcon } from './task-step-done';
|
|
|
34
34
|
export { default as TaskStepNextIcon } from './task-step-next';
|
|
35
35
|
export { default as AttachIcon } from './attach';
|
|
36
36
|
export { default as UploadIcon } from './upload';
|
|
37
|
+
export { default as MissingImage } from './missing-image';
|
package/dist/types/index.d.ts
CHANGED
|
@@ -33,6 +33,7 @@ export * from './components/Form';
|
|
|
33
33
|
export * from './components/FileManager';
|
|
34
34
|
export * from './components/FileManager/util';
|
|
35
35
|
export * from './components/FileManager/FileSectionItem/FileSectionItem';
|
|
36
|
+
export * from './components/Resizer';
|
|
36
37
|
export * from './components/SaveStatus';
|
|
37
38
|
export * from './components/SimpleModal';
|
|
38
39
|
export * from './components/StyledModal';
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@manuscripts/style-guide",
|
|
3
3
|
"description": "Shared components for Manuscripts applications",
|
|
4
|
-
"version": "0.
|
|
4
|
+
"version": "0.31.0",
|
|
5
5
|
"repository": "gitlab:atypon-opensource/manuscripts-style-guide",
|
|
6
6
|
"license": "Apache-2.0",
|
|
7
7
|
"main": "dist/cjs",
|