Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fixes and Package Updates: #459

Merged
merged 7 commits into from
Jan 18, 2024
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 3 additions & 2 deletions .prettierignore
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
src/examples
env
icons
icons
src/demo
src/examples
17 changes: 9 additions & 8 deletions package.json
Original file line number Diff line number Diff line change
@@ -78,7 +78,7 @@
"@testing-library/react-hooks": "^8.0.1",
"@testing-library/user-event": "^14.5.2",
"@types/jest": "^29.5.11",
"@types/node": "^20.11.4",
"@types/node": "^20.11.5",
"@types/react": "^18.2.48",
"@types/react-dom": "^18.2.18",
"@types/react-router-dom": "^5.3.3",
@@ -88,9 +88,9 @@
"@typescript-eslint/eslint-plugin": "^6.19.0",
"@typescript-eslint/parser": "^6.19.0",
"@vitejs/plugin-react": "^4.2.1",
"@vitest/coverage-v8": "^1.2.0",
"@vitest/ui": "^1.2.0",
"autoprefixer": "^10.4.16",
"@vitest/coverage-v8": "^1.2.1",
"@vitest/ui": "^1.2.1",
"autoprefixer": "^10.4.17",
"babel-loader": "^9.1.3",
"babel-plugin-styled-components": "^2.1.4",
"c8": "^9.1.0",
@@ -110,8 +110,8 @@
"postcss": "^8.4.33",
"postcss-preset-env": "^9.3.0",
"postcss-syntax": "^0.36.2",
"prettier": "^3.2.3",
"pretty-quick": "^3.2.1",
"prettier": "^3.2.4",
"pretty-quick": "^4.0.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-is": "^18.2.0",
@@ -124,7 +124,7 @@
"rollup-plugin-peer-deps-external": "^2.2.4",
"rollup-plugin-postcss": "^4.0.2",
"rollup-plugin-typescript2": "^0.36.0",
"sass": "^1.69.7",
"sass": "^1.70.0",
"semver": "^7.5.4",
"size-limit": "^11.0.2",
"snyk": "^1.1269.0",
@@ -135,10 +135,11 @@
"stylelint-order": "^6.0.4",
"stylelint-processor-styled-components": "^1.10.0",
"typescript": "^5.3.3",
"typescript-plugin-css-modules": "^5.0.2",
"typescript-plugin-styled-components": "^3.0.0",
"vite": "^5.0.11",
"vite-tsconfig-paths": "^4.3.1",
"vitest": "^1.2.0"
"vitest": "^1.2.1"
},
"resolutions": {
"ansi-regex": "5.0.1",
491 changes: 313 additions & 178 deletions pnpm-lock.yaml

Large diffs are not rendered by default.

5 changes: 5 additions & 0 deletions rollup.config.mjs
Original file line number Diff line number Diff line change
@@ -58,6 +58,11 @@ export default {
PeerDepsExternalPlugin(),
del({ targets: 'dist/*' }),
typescript({
tsconfig: 'tsconfig.json',
tsconfigOverride: {
include: ['src/**/*.ts+(|x)', 'src/**/*.d.ts+(|x)'],
exclude: ['src/demo/**/*', 'src/examples/**/*'],
},
tsconfigDefaults: {
compilerOptions: {
plugins: [
1 change: 1 addition & 0 deletions src/components/index.tsx
Original file line number Diff line number Diff line change
@@ -99,6 +99,7 @@ const Chrono: React.FunctionComponent<Partial<TimelineProps>> = (
if (newItems.length) {
timeLineItemsRef.current = newItems;
setTimeLineItems(newItems);
setActiveTimelineItem(0);
}
}, [JSON.stringify(allowDynamicUpdate ? items : null)]);

Original file line number Diff line number Diff line change
@@ -49,7 +49,7 @@ export const TimelineItemContentWrapper = styled.section<
${(p) =>
p.$customContent
? `height: ${p.$minHeight}px;`
: `min-height: ${p.$minHeight};`}
: `min-height: ${p.$minHeight}px;`}
position: relative;
text-align: left;
width: 98%;
7 changes: 5 additions & 2 deletions src/components/timeline/timeline.tsx
Original file line number Diff line number Diff line change
@@ -202,6 +202,10 @@ const Timeline: React.FunctionComponent<TimelineModel> = (
useEffect(() => {
const activeItem = items[activeTimelineItem || 0];

if (slideShowRunning) {
activeItemIndex.current = activeTimelineItem;
}

if (items.length && activeItem) {
// const item = items[activeItem];
const { title, cardTitle, cardSubtitle, cardDetailedText } = activeItem;
@@ -234,7 +238,7 @@ const Timeline: React.FunctionComponent<TimelineModel> = (
}
}
}
}, [activeTimelineItem, items.length]);
}, [activeTimelineItem, items.length, slideShowRunning]);

const handleScroll = (scroll: Partial<Scroll>) => {
const element = timelineMainRef.current;
@@ -335,7 +339,6 @@ const Timeline: React.FunctionComponent<TimelineModel> = (

return (
<Wrapper
// tabIndex={0}
onKeyDown={handleKeyDown}
className={wrapperClass}
cardPositionHorizontal={cardPositionHorizontal}
11 changes: 11 additions & 0 deletions src/components/toolbar/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import { FunctionComponent } from 'react';

export type ToolbarProps = {
children?: React.ReactNode | React.ReactNode[];
};

const Toolbar: FunctionComponent<ToolbarProps> = (props) => {
return <div></div>;
};

export { Toolbar };
2 changes: 1 addition & 1 deletion src/demo/App.tsx
Original file line number Diff line number Diff line change
@@ -177,7 +177,7 @@ const NewDemo: React.FunctionComponent = () => {
<VerticalTree
type={'big-screen'}
items={state > 0 ? items : mixed}
// theme={customTheme}
theme={customTheme}
>
{state}
</VerticalTree>
8 changes: 5 additions & 3 deletions src/demo/horizontal-samples.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { TimelineItemModel } from '@models/TimelineItemModel';
import React, { FunctionComponent } from 'react';
import React, { FunctionComponent, useState } from 'react';
import Chrono from '../components';
import {
ComponentContainer,
@@ -13,8 +13,11 @@ export const HorizontalBasic: React.FunctionComponent<{
type: string;
items: TimelineItemModel[];
}> = ({ items }) => {
const [itemSelected, setItemSelected] = useState(0);

return (
<Horizontal id="horizontal">
<span>{itemSelected}</span>
<ComponentContainer type={'big-screen'}>
<Chrono
items={data}
@@ -25,7 +28,7 @@ export const HorizontalBasic: React.FunctionComponent<{
slideShow
slideItemDuration={2550}
itemWidth={300}
onItemSelected={(selected) => console.log(selected)}
onItemSelected={(selected) => setItemSelected(selected.index)}
timelinePointDimension={20}
timelinePointShape="square"
// disableInteraction
@@ -77,7 +80,6 @@ export const HorizontalAll: React.FunctionComponent<{
itemWidth={400}
focusActiveItemOnLoad
onItemSelected={(selected) => {
console.log('moye', selected.index);
setIndex(selected.index);
}}
timelinePointDimension={20}
13 changes: 7 additions & 6 deletions src/demo/vertical-samples.tsx
Original file line number Diff line number Diff line change
@@ -10,6 +10,7 @@ export const VerticalTree: FunctionComponent<{
type: string;
items: TimelineItemModel[];
theme: Theme;
children: React.ReactNode | React.ReactNode[]
}> = ({ type, items, theme }) => {
return (
<Vertical id="tree">
@@ -128,7 +129,7 @@ export const VerticalBasic: FunctionComponent<{
slideItemDuration={2500}
scrollable={{ scrollbar: false }}
noUniqueId
uniqueID="vertical_basic_test"
uniqueId="vertical_basic_test"
parseDetailsAsHTML
highlightCardsOnHover
// textOverlay
@@ -139,7 +140,7 @@ export const VerticalBasic: FunctionComponent<{
// titleColor: '#922724',
// cardDetailsBackGround: '#e8e8e8',
// }}
onItemSelected={(selected) => console.log(selected.cardTitle)}
onItemSelected={(selected) => console.log(selected.index)}
enableOutline
fontSizes={{
title: '1.5rem',
@@ -195,7 +196,7 @@ export const VerticalNewMedia: FunctionComponent<{
// cardDetailsColor: '#000',
// }}
// darkMode
onItemSelected={(selected) => console.log(selected.cardTitle)}
onItemSelected={(selected) => console.log(selected.index)}
// enableOutline
fontSizes={{
title: '1.5rem',
@@ -255,7 +256,7 @@ export const VerticalAlternatingNested: FunctionComponent<{
// cardDetailsColor: '#000',
// }}
// darkMode
onItemSelected={(selected) => console.log(selected.cardTitle)}
onItemSelected={(selected) => console.log(selected.index)}
// enableOutline
fontSizes={{
title: '1rem',
@@ -357,7 +358,7 @@ export const VerticalBasicCardLess: FunctionComponent<{
cardBgColor: '#fff',
titleColorActive: 'red',
}}
onItemSelected={(selected) => console.log(selected.cardTitle)}
onItemSelected={(selected) => console.log(selected.index)}
/>
</ComponentContainerTree>
</Vertical>
@@ -384,7 +385,7 @@ export const VerticalBasicNested: FunctionComponent<{
// titleColor: '#922724',
// cardDetailsBackGround: '#e8e8e8',
// }}
onItemSelected={(selected) => console.log(selected.cardTitle)}
onItemSelected={(selected) => console.log(selected.index)}
enableOutline
fontSizes={{
title: '1rem',
13 changes: 10 additions & 3 deletions tsconfig.json
Original file line number Diff line number Diff line change
@@ -21,6 +21,7 @@
"rootDir": "src",
"declaration": true,
"declarationDir": "dist",
"baseUrl": ".",
"types": [
"node",
"@types/jest",
@@ -30,17 +31,23 @@
],
"paths": {
"@utils/*": [
"./src/utils/*"
"src/utils/*"
],
"@models/*": [
"./src/models/*"
"src/models/*"
]
}
},
"plugins": [
{
"name": "typescript-plugin-css-modules"
}
]
},
"include": [
"src/components",
"src/models",
"src/utils",
"src/demo"
],
"exclude": [
"node_modules",