@ldelia/react-media 0.2.4 → 0.2.5
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/components/timeline/Timeline.d.ts +18 -0
- package/dist/components/timeline/Timeline.js +85 -0
- package/dist/components/timeline/index.d.ts +1 -16
- package/dist/components/timeline/index.js +14 -74
- package/dist/stories/timeline.stories.d.ts +3 -0
- package/dist/stories/timeline.stories.js +16 -1
- package/package.json +1 -1
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import './Timeline.css';
|
|
3
|
+
export interface TimelineProps {
|
|
4
|
+
duration: number;
|
|
5
|
+
value: number;
|
|
6
|
+
zoomLevel?: number;
|
|
7
|
+
className?: string;
|
|
8
|
+
selectedRange?: number[];
|
|
9
|
+
withTimeBlocks?: boolean;
|
|
10
|
+
onChange?: (value: number) => void;
|
|
11
|
+
onRangeChange?: (value: number[]) => void;
|
|
12
|
+
}
|
|
13
|
+
export type ZoomContextType = {
|
|
14
|
+
blockOffset: number;
|
|
15
|
+
pixelsInSecond: number;
|
|
16
|
+
};
|
|
17
|
+
export declare const ZoomContext: React.Context<ZoomContextType>;
|
|
18
|
+
export declare const Timeline: React.FC<TimelineProps>;
|
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
+
}) : function(o, v) {
|
|
16
|
+
o["default"] = v;
|
|
17
|
+
});
|
|
18
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
|
19
|
+
if (mod && mod.__esModule) return mod;
|
|
20
|
+
var result = {};
|
|
21
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
22
|
+
__setModuleDefault(result, mod);
|
|
23
|
+
return result;
|
|
24
|
+
};
|
|
25
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
26
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
27
|
+
};
|
|
28
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
29
|
+
exports.Timeline = exports.ZoomContext = void 0;
|
|
30
|
+
const react_1 = __importStar(require("react"));
|
|
31
|
+
const TickTimeCollectionDisplay_1 = __importDefault(require("./TickTimeCollectionDisplay"));
|
|
32
|
+
const VaLueLineCanvas_1 = __importDefault(require("./VaLueLineCanvas"));
|
|
33
|
+
const RangeSelectorCanvas_1 = __importDefault(require("./RangeSelectorCanvas"));
|
|
34
|
+
const constants_1 = require("./constants");
|
|
35
|
+
require("./Timeline.css");
|
|
36
|
+
exports.ZoomContext = react_1.default.createContext({
|
|
37
|
+
blockOffset: 0,
|
|
38
|
+
pixelsInSecond: 0,
|
|
39
|
+
});
|
|
40
|
+
const Timeline = ({ duration, value, zoomLevel = 0, selectedRange = [], withTimeBlocks = true, onChange = () => { }, onRangeChange = () => { }, className = '', }) => {
|
|
41
|
+
const timeLineContainerRef = (0, react_1.useRef)(null);
|
|
42
|
+
let zoomLevelValue = zoomLevel ? zoomLevel : 0;
|
|
43
|
+
if (zoomLevelValue < 0 || zoomLevelValue >= constants_1.zoomLevelConfigurations.length) {
|
|
44
|
+
console.warn('Invalid value for property zoomLevel.');
|
|
45
|
+
zoomLevelValue = 0;
|
|
46
|
+
}
|
|
47
|
+
if (value < 0 || value > duration) {
|
|
48
|
+
console.warn('Invalid value.');
|
|
49
|
+
}
|
|
50
|
+
if (!(selectedRange.length === 0 || selectedRange.length === 2)) {
|
|
51
|
+
selectedRange = [];
|
|
52
|
+
console.warn('The selected range must contain only two values.');
|
|
53
|
+
}
|
|
54
|
+
if (selectedRange.length === 2 &&
|
|
55
|
+
!(0 <= selectedRange[0] &&
|
|
56
|
+
selectedRange[0] < selectedRange[1] &&
|
|
57
|
+
selectedRange[1] <= duration)) {
|
|
58
|
+
selectedRange = [];
|
|
59
|
+
console.warn('The selected range is inconsistent.');
|
|
60
|
+
}
|
|
61
|
+
const zoomParams = (0, react_1.useMemo)(() => {
|
|
62
|
+
return {
|
|
63
|
+
blockOffset: constants_1.zoomLevelConfigurations[zoomLevelValue][0],
|
|
64
|
+
pixelsInSecond: constants_1.zoomLevelConfigurations[zoomLevelValue][1],
|
|
65
|
+
};
|
|
66
|
+
}, [zoomLevelValue]);
|
|
67
|
+
let blockStartingTimes = [0];
|
|
68
|
+
const blockCounts = Math.ceil(duration / zoomParams.blockOffset);
|
|
69
|
+
for (let i = 1; i < blockCounts; i++) {
|
|
70
|
+
blockStartingTimes.push(blockStartingTimes[blockStartingTimes.length - 1] +
|
|
71
|
+
zoomParams.blockOffset);
|
|
72
|
+
}
|
|
73
|
+
(0, react_1.useEffect)(() => {
|
|
74
|
+
const timeLineWrapper = timeLineContainerRef.current;
|
|
75
|
+
const scrollPosition = value * zoomParams.pixelsInSecond - 300;
|
|
76
|
+
timeLineWrapper.scrollLeft = Math.max(0, scrollPosition);
|
|
77
|
+
}, [value, zoomParams]);
|
|
78
|
+
return (react_1.default.createElement("div", { ref: timeLineContainerRef, className: `timeline-container ${className}` },
|
|
79
|
+
react_1.default.createElement("div", { className: 'timeline-wrapper', style: { width: duration * zoomParams.pixelsInSecond + 'px' } },
|
|
80
|
+
react_1.default.createElement(exports.ZoomContext.Provider, { value: zoomParams },
|
|
81
|
+
react_1.default.createElement(VaLueLineCanvas_1.default, { blockStartingTimes: withTimeBlocks ? blockStartingTimes : [], value: value }),
|
|
82
|
+
react_1.default.createElement(RangeSelectorCanvas_1.default, { selectedRange: selectedRange, onChange: onChange, onRangeChange: onRangeChange }),
|
|
83
|
+
withTimeBlocks && (react_1.default.createElement(TickTimeCollectionDisplay_1.default, { tickTimes: blockStartingTimes }))))));
|
|
84
|
+
};
|
|
85
|
+
exports.Timeline = Timeline;
|
|
@@ -1,16 +1 @@
|
|
|
1
|
-
|
|
2
|
-
export interface TimelineProps {
|
|
3
|
-
duration: number;
|
|
4
|
-
value: number;
|
|
5
|
-
zoomLevel?: number;
|
|
6
|
-
className?: string;
|
|
7
|
-
selectedRange?: number[];
|
|
8
|
-
onChange?: (value: number) => void;
|
|
9
|
-
onRangeChange?: (value: number[]) => void;
|
|
10
|
-
}
|
|
11
|
-
export type ZoomContextType = {
|
|
12
|
-
blockOffset: number;
|
|
13
|
-
pixelsInSecond: number;
|
|
14
|
-
};
|
|
15
|
-
export declare const ZoomContext: React.Context<ZoomContextType>;
|
|
16
|
-
export declare const Timeline: React.FC<TimelineProps>;
|
|
1
|
+
export * from './Timeline';
|
|
@@ -1,77 +1,17 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
const react_1 = __importDefault(require("react"));
|
|
8
|
-
const styled_components_1 = __importDefault(require("styled-components"));
|
|
9
|
-
const react_2 = require("react");
|
|
10
|
-
const TickTimeCollectionDisplay_1 = __importDefault(require("./TickTimeCollectionDisplay"));
|
|
11
|
-
const VaLueLineCanvas_1 = __importDefault(require("./VaLueLineCanvas"));
|
|
12
|
-
const RangeSelectorCanvas_1 = __importDefault(require("./RangeSelectorCanvas"));
|
|
13
|
-
const constants_1 = require("./constants");
|
|
14
|
-
const TimelineContainer = styled_components_1.default.div `
|
|
15
|
-
background-color: #f0f0f0;
|
|
16
|
-
border: 1px solid #c9c9c9;
|
|
17
|
-
height: 80px;
|
|
18
|
-
width: 100%;
|
|
19
|
-
max-width: 100%;
|
|
20
|
-
overflow-x: auto;
|
|
21
|
-
position: relative;
|
|
22
|
-
display: flex;
|
|
23
|
-
`;
|
|
24
|
-
const TimelineWrapper = styled_components_1.default.div `
|
|
25
|
-
position: absolute;
|
|
26
|
-
height: 100%;
|
|
27
|
-
`;
|
|
28
|
-
exports.ZoomContext = react_1.default.createContext({
|
|
29
|
-
blockOffset: 0,
|
|
30
|
-
pixelsInSecond: 0,
|
|
31
|
-
});
|
|
32
|
-
const Timeline = ({ duration, value, zoomLevel = 0, selectedRange = [], onChange = () => { }, onRangeChange = () => { }, className = '', }) => {
|
|
33
|
-
const timeLineContainerRef = (0, react_2.useRef)(null);
|
|
34
|
-
let zoomLevelValue = zoomLevel ? zoomLevel : 0;
|
|
35
|
-
if (zoomLevelValue < 0 || zoomLevelValue >= constants_1.zoomLevelConfigurations.length) {
|
|
36
|
-
console.warn('Invalid value for property zoomLevel.');
|
|
37
|
-
zoomLevelValue = 0;
|
|
38
|
-
}
|
|
39
|
-
if (value < 0 || value > duration) {
|
|
40
|
-
console.warn('Invalid value.');
|
|
41
|
-
}
|
|
42
|
-
if (!(selectedRange.length === 0 || selectedRange.length === 2)) {
|
|
43
|
-
selectedRange = [];
|
|
44
|
-
console.warn('The selected range must contain only two values.');
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
45
7
|
}
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
const zoomParams = (0, react_2.useMemo)(() => {
|
|
54
|
-
return {
|
|
55
|
-
blockOffset: constants_1.zoomLevelConfigurations[zoomLevelValue][0],
|
|
56
|
-
pixelsInSecond: constants_1.zoomLevelConfigurations[zoomLevelValue][1],
|
|
57
|
-
};
|
|
58
|
-
}, [zoomLevelValue]);
|
|
59
|
-
let blockStartingTimes = [0];
|
|
60
|
-
const blockCounts = Math.ceil(duration / zoomParams.blockOffset);
|
|
61
|
-
for (let i = 1; i < blockCounts; i++) {
|
|
62
|
-
blockStartingTimes.push(blockStartingTimes[blockStartingTimes.length - 1] +
|
|
63
|
-
zoomParams.blockOffset);
|
|
64
|
-
}
|
|
65
|
-
(0, react_2.useEffect)(() => {
|
|
66
|
-
const timeLineWrapper = timeLineContainerRef.current;
|
|
67
|
-
const scrollPosition = value * zoomParams.pixelsInSecond - 300;
|
|
68
|
-
timeLineWrapper.scrollLeft = Math.max(0, scrollPosition);
|
|
69
|
-
}, [value, zoomParams]);
|
|
70
|
-
return (react_1.default.createElement(TimelineContainer, { ref: timeLineContainerRef, className: className },
|
|
71
|
-
react_1.default.createElement(TimelineWrapper, { style: { width: duration * zoomParams.pixelsInSecond + 'px' } },
|
|
72
|
-
react_1.default.createElement(exports.ZoomContext.Provider, { value: zoomParams },
|
|
73
|
-
react_1.default.createElement(VaLueLineCanvas_1.default, { blockStartingTimes: blockStartingTimes, value: value }),
|
|
74
|
-
react_1.default.createElement(RangeSelectorCanvas_1.default, { selectedRange: selectedRange, onChange: onChange, onRangeChange: onRangeChange }),
|
|
75
|
-
react_1.default.createElement(TickTimeCollectionDisplay_1.default, { tickTimes: blockStartingTimes })))));
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
14
|
+
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
76
15
|
};
|
|
77
|
-
exports
|
|
16
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
+
__exportStar(require("./Timeline"), exports);
|
|
@@ -1,5 +1,8 @@
|
|
|
1
1
|
import { TimelineProps } from '../components/timeline';
|
|
2
|
+
import './timeline.stories.custom.css';
|
|
2
3
|
declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-bf5e6555").R, import("@storybook/types").Args>;
|
|
3
4
|
export default _default;
|
|
4
5
|
export declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-bf5e6555").R, TimelineProps>;
|
|
5
6
|
export declare const WithSelectedRange: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-bf5e6555").R, TimelineProps>;
|
|
7
|
+
export declare const WithCustomClassName: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-bf5e6555").R, TimelineProps>;
|
|
8
|
+
export declare const WithOutTimeBlocks: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-bf5e6555").R, TimelineProps>;
|
|
@@ -3,10 +3,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
3
3
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
4
|
};
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
exports.WithSelectedRange = exports.Default = void 0;
|
|
6
|
+
exports.WithOutTimeBlocks = exports.WithCustomClassName = exports.WithSelectedRange = exports.Default = void 0;
|
|
7
7
|
const react_1 = __importDefault(require("react"));
|
|
8
8
|
const timeline_1 = require("../components/timeline");
|
|
9
9
|
const styled_components_1 = __importDefault(require("styled-components"));
|
|
10
|
+
require("./timeline.stories.custom.css");
|
|
10
11
|
const StyledTimeline = (0, styled_components_1.default)(timeline_1.Timeline) `
|
|
11
12
|
.media-timeline-value-line {
|
|
12
13
|
background-color: red;
|
|
@@ -35,3 +36,17 @@ exports.WithSelectedRange.args = {
|
|
|
35
36
|
zoomLevel: 0,
|
|
36
37
|
selectedRange: [20, 30],
|
|
37
38
|
};
|
|
39
|
+
exports.WithCustomClassName = Template.bind({});
|
|
40
|
+
exports.WithCustomClassName.args = {
|
|
41
|
+
duration: 305,
|
|
42
|
+
value: 31,
|
|
43
|
+
zoomLevel: 0,
|
|
44
|
+
className: 'this-class-redefines-values',
|
|
45
|
+
};
|
|
46
|
+
exports.WithOutTimeBlocks = Template.bind({});
|
|
47
|
+
exports.WithOutTimeBlocks.args = {
|
|
48
|
+
duration: 305,
|
|
49
|
+
value: 31,
|
|
50
|
+
zoomLevel: 0,
|
|
51
|
+
withTimeBlocks: false,
|
|
52
|
+
};
|