@ldelia/react-media 0.2.4 → 0.2.6

package/dist/components/timeline/Timeline.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+export interface TimelineProps {
+    duration: number;
+    value: number;
+    zoomLevel?: number;
+    className?: string;
+    selectedRange?: number[];
+    withTimeBlocks?: boolean;
+    onChange?: (value: number) => void;
+    onRangeChange?: (value: number[]) => void;
+}
+export type ZoomContextType = {
+    blockOffset: number;
+    pixelsInSecond: number;
+};
+export declare const ZoomContext: React.Context<ZoomContextType>;
+export declare const Timeline: React.FC<TimelineProps>;

package/dist/components/timeline/Timeline.js

@@ -0,0 +1,99 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Timeline = exports.ZoomContext = void 0;
+const react_1 = __importStar(require("react"));
+const TickTimeCollectionDisplay_1 = __importDefault(require("./TickTimeCollectionDisplay"));
+const VaLueLineCanvas_1 = __importDefault(require("./VaLueLineCanvas"));
+const RangeSelectorCanvas_1 = __importDefault(require("./RangeSelectorCanvas"));
+const constants_1 = require("./constants");
+const styled_components_1 = __importDefault(require("styled-components"));
+const TimelineContainer = styled_components_1.default.div `
+  background-color: #f0f0f0;
+  border: 1px solid #c9c9c9;
+  height: 80px;
+  width: 100%;
+  max-width: 100%;
+  overflow-x: auto;
+  position: relative;
+  display: flex;
+`;
+const TimelineWrapper = styled_components_1.default.div `
+  position: absolute;
+  height: 100%;
+`;
+exports.ZoomContext = react_1.default.createContext({
+    blockOffset: 0,
+    pixelsInSecond: 0,
+});
+const Timeline = ({ duration, value, zoomLevel = 0, selectedRange = [], withTimeBlocks = true, onChange = () => { }, onRangeChange = () => { }, className = '', }) => {
+    const timeLineContainerRef = (0, react_1.useRef)(null);
+    let zoomLevelValue = zoomLevel ? zoomLevel : 0;
+    if (zoomLevelValue < 0 || zoomLevelValue >= constants_1.zoomLevelConfigurations.length) {
+        console.warn('Invalid value for property zoomLevel.');
+        zoomLevelValue = 0;
+    }
+    if (value < 0 || value > duration) {
+        console.warn('Invalid value.');
+    }
+    if (!(selectedRange.length === 0 || selectedRange.length === 2)) {
+        selectedRange = [];
+        console.warn('The selected range must contain only two values.');
+    }
+    if (selectedRange.length === 2 &&
+        !(0 <= selectedRange[0] &&
+            selectedRange[0] < selectedRange[1] &&
+            selectedRange[1] <= duration)) {
+        selectedRange = [];
+        console.warn('The selected range is inconsistent.');
+    }
+    const zoomParams = (0, react_1.useMemo)(() => {
+        return {
+            blockOffset: constants_1.zoomLevelConfigurations[zoomLevelValue][0],
+            pixelsInSecond: constants_1.zoomLevelConfigurations[zoomLevelValue][1],
+        };
+    }, [zoomLevelValue]);
+    let blockStartingTimes = [0];
+    const blockCounts = Math.ceil(duration / zoomParams.blockOffset);
+    for (let i = 1; i < blockCounts; i++) {
+        blockStartingTimes.push(blockStartingTimes[blockStartingTimes.length - 1] +
+            zoomParams.blockOffset);
+    }
+    (0, react_1.useEffect)(() => {
+        const timeLineWrapper = timeLineContainerRef.current;
+        const scrollPosition = value * zoomParams.pixelsInSecond - 300;
+        timeLineWrapper.scrollLeft = Math.max(0, scrollPosition);
+    }, [value, zoomParams]);
+    return (react_1.default.createElement(TimelineContainer, { ref: timeLineContainerRef, className: className },
+        react_1.default.createElement(TimelineWrapper, { style: { width: duration * zoomParams.pixelsInSecond + 'px' } },
+            react_1.default.createElement(exports.ZoomContext.Provider, { value: zoomParams },
+                react_1.default.createElement(VaLueLineCanvas_1.default, { blockStartingTimes: withTimeBlocks ? blockStartingTimes : [], value: value }),
+                react_1.default.createElement(RangeSelectorCanvas_1.default, { selectedRange: selectedRange, onChange: onChange, onRangeChange: onRangeChange }),
+                withTimeBlocks && (react_1.default.createElement(TickTimeCollectionDisplay_1.default, { tickTimes: blockStartingTimes }))))));
+};
+exports.Timeline = Timeline;

package/dist/components/timeline/index.d.ts

@@ -1,16 +1 @@
-import React from 'react';
-export interface TimelineProps {
-    duration: number;
-    value: number;
-    zoomLevel?: number;
-    className?: string;
-    selectedRange?: number[];
-    onChange?: (value: number) => void;
-    onRangeChange?: (value: number[]) => void;
-}
-export type ZoomContextType = {
-    blockOffset: number;
-    pixelsInSecond: number;
-};
-export declare const ZoomContext: React.Context<ZoomContextType>;
-export declare const Timeline: React.FC<TimelineProps>;
+export * from './Timeline';

package/dist/components/timeline/index.js

@@ -1,77 +1,17 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Timeline = exports.ZoomContext = void 0;
-const react_1 = __importDefault(require("react"));
-const styled_components_1 = __importDefault(require("styled-components"));
-const react_2 = require("react");
-const TickTimeCollectionDisplay_1 = __importDefault(require("./TickTimeCollectionDisplay"));
-const VaLueLineCanvas_1 = __importDefault(require("./VaLueLineCanvas"));
-const RangeSelectorCanvas_1 = __importDefault(require("./RangeSelectorCanvas"));
-const constants_1 = require("./constants");
-const TimelineContainer = styled_components_1.default.div `
-  background-color: #f0f0f0;
-  border: 1px solid #c9c9c9;
-  height: 80px;
-  width: 100%;
-  max-width: 100%;
-  overflow-x: auto;
-  position: relative;
-  display: flex;
-`;
-const TimelineWrapper = styled_components_1.default.div `
-  position: absolute;
-  height: 100%;
-`;
-exports.ZoomContext = react_1.default.createContext({
-    blockOffset: 0,
-    pixelsInSecond: 0,
-});
-const Timeline = ({ duration, value, zoomLevel = 0, selectedRange = [], onChange = () => { }, onRangeChange = () => { }, className = '', }) => {
-    const timeLineContainerRef = (0, react_2.useRef)(null);
-    let zoomLevelValue = zoomLevel ? zoomLevel : 0;
-    if (zoomLevelValue < 0 || zoomLevelValue >= constants_1.zoomLevelConfigurations.length) {
-        console.warn('Invalid value for property zoomLevel.');
-        zoomLevelValue = 0;
-    }
-    if (value < 0 || value > duration) {
-        console.warn('Invalid value.');
-    }
-    if (!(selectedRange.length === 0 || selectedRange.length === 2)) {
-        selectedRange = [];
-        console.warn('The selected range must contain only two values.');
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
     }
-    if (selectedRange.length === 2 &&
-        !(0 <= selectedRange[0] &&
-            selectedRange[0] < selectedRange[1] &&
-            selectedRange[1] <= duration)) {
-        selectedRange = [];
-        console.warn('The selected range is inconsistent.');
-    }
-    const zoomParams = (0, react_2.useMemo)(() => {
-        return {
-            blockOffset: constants_1.zoomLevelConfigurations[zoomLevelValue][0],
-            pixelsInSecond: constants_1.zoomLevelConfigurations[zoomLevelValue][1],
-        };
-    }, [zoomLevelValue]);
-    let blockStartingTimes = [0];
-    const blockCounts = Math.ceil(duration / zoomParams.blockOffset);
-    for (let i = 1; i < blockCounts; i++) {
-        blockStartingTimes.push(blockStartingTimes[blockStartingTimes.length - 1] +
-            zoomParams.blockOffset);
-    }
-    (0, react_2.useEffect)(() => {
-        const timeLineWrapper = timeLineContainerRef.current;
-        const scrollPosition = value * zoomParams.pixelsInSecond - 300;
-        timeLineWrapper.scrollLeft = Math.max(0, scrollPosition);
-    }, [value, zoomParams]);
-    return (react_1.default.createElement(TimelineContainer, { ref: timeLineContainerRef, className: className },
-        react_1.default.createElement(TimelineWrapper, { style: { width: duration * zoomParams.pixelsInSecond + 'px' } },
-            react_1.default.createElement(exports.ZoomContext.Provider, { value: zoomParams },
-                react_1.default.createElement(VaLueLineCanvas_1.default, { blockStartingTimes: blockStartingTimes, value: value }),
-                react_1.default.createElement(RangeSelectorCanvas_1.default, { selectedRange: selectedRange, onChange: onChange, onRangeChange: onRangeChange }),
-                react_1.default.createElement(TickTimeCollectionDisplay_1.default, { tickTimes: blockStartingTimes })))));
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
-exports.Timeline = Timeline;
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Timeline"), exports);

package/dist/stories/timeline.stories.d.ts

@@ -1,5 +1,9 @@
 import { TimelineProps } from '../components/timeline';
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-bf5e6555").R, import("@storybook/types").Args>;
+import { Meta } from '@storybook/react';
+import './timeline.stories.custom.css';
+declare const _default: Meta;
 export default _default;
-export declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-bf5e6555").R, TimelineProps>;
-export declare const WithSelectedRange: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-bf5e6555").R, TimelineProps>;
+export declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, TimelineProps>;
+export declare const WithSelectedRange: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, TimelineProps>;
+export declare const WithCustomClassName: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, TimelineProps>;
+export declare const WithOutTimeBlocks: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, TimelineProps>;

package/dist/stories/timeline.stories.js

@@ -3,10 +3,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.WithSelectedRange = exports.Default = void 0;
+exports.WithOutTimeBlocks = exports.WithCustomClassName = exports.WithSelectedRange = exports.Default = void 0;
 const react_1 = __importDefault(require("react"));
 const timeline_1 = require("../components/timeline");
 const styled_components_1 = __importDefault(require("styled-components"));
+require("./timeline.stories.custom.css");
 const StyledTimeline = (0, styled_components_1.default)(timeline_1.Timeline) `
   .media-timeline-value-line {
     background-color: red;
@@ -35,3 +36,17 @@ exports.WithSelectedRange.args = {
     zoomLevel: 0,
     selectedRange: [20, 30],
 };
+exports.WithCustomClassName = Template.bind({});
+exports.WithCustomClassName.args = {
+    duration: 305,
+    value: 31,
+    zoomLevel: 0,
+    className: 'this-class-redefines-values',
+};
+exports.WithOutTimeBlocks = Template.bind({});
+exports.WithOutTimeBlocks.args = {
+    duration: 305,
+    value: 31,
+    zoomLevel: 0,
+    withTimeBlocks: false,
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ldelia/react-media",
-  "version": "0.2.4",
+  "version": "0.2.6",
   "description": "A React components collection for media-related features.",
   "private": false,
   "keywords": [

package/src/components/timeline/Timeline.tsx

@@ -3,8 +3,22 @@ import TickTimeCollectionDisplay from './TickTimeCollectionDisplay';
 import VaLueLineCanvas from './VaLueLineCanvas';
 import RangeSelectorCanvas from './RangeSelectorCanvas';
 import { zoomLevelConfigurations } from './constants';
+import styled from 'styled-components';
 
-import './Timeline.css';
+const TimelineContainer = styled.div`
+  background-color: #f0f0f0;
+  border: 1px solid #c9c9c9;
+  height: 80px;
+  width: 100%;
+  max-width: 100%;
+  overflow-x: auto;
+  position: relative;
+  display: flex;
+`;
+const TimelineWrapper = styled.div`
+  position: absolute;
+  height: 100%;
+`;
 
 export interface TimelineProps {
   duration: number; // duration in seconds
@@ -88,12 +102,8 @@ export const Timeline: React.FC<TimelineProps> = ({
   }, [value, zoomParams]);
 
   return (
-    <div
-      ref={timeLineContainerRef}
-      className={`timeline-container ${className}`}
-    >
-      <div
-        className={'timeline-wrapper'}
+    <TimelineContainer ref={timeLineContainerRef} className={className}>
+      <TimelineWrapper
         style={{ width: duration * zoomParams.pixelsInSecond + 'px' }}
       >
         <ZoomContext.Provider value={zoomParams}>
@@ -110,7 +120,7 @@ export const Timeline: React.FC<TimelineProps> = ({
             <TickTimeCollectionDisplay tickTimes={blockStartingTimes} />
           )}
         </ZoomContext.Provider>
-      </div>
-    </div>
+      </TimelineWrapper>
+    </TimelineContainer>
   );
 };

package/dist/stories/Button.d.ts

@@ -1,29 +0,0 @@
-import React from 'react';
-import './button.css';
-interface ButtonProps {
-    /**
-     * Is this the principal call to action on the page?
-     */
-    primary?: boolean;
-    /**
-     * What background color to use
-     */
-    backgroundColor?: string;
-    /**
-     * How large should the button be?
-     */
-    size?: 'small' | 'medium' | 'large';
-    /**
-     * Button contents
-     */
-    label: string;
-    /**
-     * Optional click handler
-     */
-    onClick?: () => void;
-}
-/**
- * Primary UI component for user interaction
- */
-export declare const Button: ({ primary, size, backgroundColor, label, ...props }: ButtonProps) => React.JSX.Element;
-export {};

package/dist/stories/Button.js

@@ -1,30 +0,0 @@
-"use strict";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Button = void 0;
-const react_1 = __importDefault(require("react"));
-require("./button.css");
-/**
- * Primary UI component for user interaction
- */
-const Button = (_a) => {
-    var { primary = false, size = 'medium', backgroundColor, label } = _a, props = __rest(_a, ["primary", "size", "backgroundColor", "label"]);
-    const mode = primary
-        ? 'storybook-button--primary'
-        : 'storybook-button--secondary';
-    return (react_1.default.createElement("button", Object.assign({ type: "button", className: ['storybook-button', `storybook-button--${size}`, mode].join(' '), style: { backgroundColor } }, props), label));
-};
-exports.Button = Button;

package/dist/stories/Button.stories.js

@@ -1,47 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Small = exports.Large = exports.Secondary = exports.Primary = void 0;
-const test_1 = require("@storybook/test");
-const Button_1 = require("./Button");
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
-const meta = {
-    title: 'Example/Button',
-    component: Button_1.Button,
-    parameters: {
-        // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
-        layout: 'centered',
-    },
-    // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
-    tags: ['autodocs'],
-    // More on argTypes: https://storybook.js.org/docs/api/argtypes
-    argTypes: {
-        backgroundColor: { control: 'color' },
-    },
-    // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
-    args: { onClick: (0, test_1.fn)() },
-};
-exports.default = meta;
-// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
-exports.Primary = {
-    args: {
-        primary: true,
-        label: 'Button',
-    },
-};
-exports.Secondary = {
-    args: {
-        label: 'Button',
-    },
-};
-exports.Large = {
-    args: {
-        size: 'large',
-        label: 'Button',
-    },
-};
-exports.Small = {
-    args: {
-        size: 'small',
-        label: 'Button',
-    },
-};

package/src/components/timeline/Timeline.css

@@ -1,15 +0,0 @@
-.timeline-container {
-    background-color: #f0f0f0;
-    border: 1px solid #c9c9c9;
-    height: 80px;
-    width: 100%;
-    max-width: 100%;
-    overflow-x: auto;
-    position: relative;
-    display: flex;
-}
-
-.timeline-wrapper {
-    position: absolute;
-    height: 100%;
-}