Skip to content

Commit 58dd828

Browse files
author
Jonas Gossens
committed
Merge branch 'feature/dateComponent'
2 parents 57afa99 + f338952 commit 58dd828

File tree

9 files changed

+642
-58
lines changed

9 files changed

+642
-58
lines changed

‎examples/examples.json

+5
Original file line numberDiff line numberDiff line change
@@ -186,4 +186,9 @@
186186
"title": "ImageAccordion",
187187
"example": "react-chayns-image_accordion/Example.jsx",
188188
"readme": true
189+
},{
190+
"id": "react-chayns-dateinfo",
191+
"title": "DateInfo",
192+
"example": "react-chayns-dateinfo/Example.jsx",
193+
"readme": true
189194
}]

‎examples/react-chayns-dateinfo/Example.jsx

+91
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
/* eslint-disable react/jsx-one-expression-per-line,jsx-a11y/click-events-have-key-events */
2+
import React, { Component } from 'react';
3+
import DateInfo from '../../src/react-chayns-dateinfo/component/DateInfo';
4+
import Button from '../../src/react-chayns-button/component/Button';
5+
6+
export default class DateExample extends Component {
7+
constructor(props) {
8+
super(props);
9+
this.state = { date: new Date() };
10+
}
11+
12+
13+
render() {
14+
const { date } = this.state;
15+
const language = 'en';
16+
17+
return (
18+
<div>
19+
<DateInfo date={date} language={language}>
20+
<Button
21+
onClick={() => {
22+
chayns.dialog.advancedDate({ dateType: chayns.dialog.dateType.DATE_TIME }).then((event) => {
23+
if (event.buttonType === 1) {
24+
this.setState({ date: new Date(event.selectedDates[0].timestamp * 1000) });
25+
}
26+
});
27+
}}
28+
>Choose Date
29+
</Button>
30+
</DateInfo>
31+
32+
<div style={{ fontWeight: 'bold' }}>default:</div>
33+
<DateInfo date={date} language={language} />
34+
35+
<div style={{ fontWeight: 'bold' }}>showTime:</div>
36+
<DateInfo date={date} showTime language={language} />
37+
38+
<div style={{ fontWeight: 'bold' }}>showTime=false:</div>
39+
<DateInfo date={date} showTime={false} language={language} />
40+
41+
<div style={{ fontWeight: 'bold' }}>showDate:</div>
42+
<DateInfo date={date} showDate language={language} />
43+
44+
<div style={{ fontWeight: 'bold' }}>showDate=false:</div>
45+
<DateInfo date={date} showDate={false} language={language} />
46+
47+
<div style={{ fontWeight: 'bold' }}>showDate=false showTime:</div>
48+
<DateInfo date={date} showDate={false} showTime language={language} />
49+
50+
<div style={{ fontWeight: 'bold' }}>showDate showTime=false:</div>
51+
<DateInfo date={date} showDate showTime={false} language={language} />
52+
53+
<div style={{ fontWeight: 'bold' }}>showDate showTime:</div>
54+
<DateInfo date={date} showDate showTime language={language} />
55+
56+
<div style={{ fontWeight: 'bold' }}>showDate=false showTime=false:</div>
57+
<DateInfo date={date} showDate={false} showTime={false} language={language} />
58+
59+
<div style={{ fontWeight: 'bold' }}>writeDay:</div>
60+
<DateInfo date={date} writeDay language={language} />
61+
62+
<div style={{ fontWeight: 'bold' }}>writeMonth:</div>
63+
<DateInfo date={date} writeMonth language={language} />
64+
65+
<div style={{ fontWeight: 'bold' }}>writeMonth writeDay:</div>
66+
<DateInfo date={date} writeMonth writeDay language={language} />
67+
68+
<div style={{ fontWeight: 'bold' }}>writeMonth writeDay showTime showDate:</div>
69+
<DateInfo date={date} writeMonth writeDay showTime showDate language={language} />
70+
71+
<div style={{ fontWeight: 'bold' }}>writeMonth writeDay showTime showDate=false:</div>
72+
<DateInfo date={date} writeMonth writeDay showTime showDate={false} language={language} />
73+
74+
<div style={{ fontWeight: 'bold' }}>writeMonth writeDay showTime=false showDate=false:</div>
75+
<DateInfo date={date} writeMonth writeDay showTime={false} showDate={false} language={language} />
76+
77+
<div style={{ fontWeight: 'bold' }}>writeMonth showTime=false showDate=false:</div>
78+
<DateInfo date={date} writeMonth showTime={false} showDate={false} language={language} />
79+
80+
<div style={{ fontWeight: 'bold' }}>two dates:</div>
81+
<DateInfo date={date} date2={new Date()} language={language} />
82+
83+
<div style={{ fontWeight: 'bold' }}>two dates showTime:</div>
84+
<DateInfo date={date} date2={new Date()} showTime language={language} />
85+
86+
<div style={{ fontWeight: 'bold' }}>two dates showDate:</div>
87+
<DateInfo date={date} date2={new Date()} showDate language={language} />
88+
</div>
89+
);
90+
}
91+
}

‎examples/react-chayns-gallery/Example.jsx

+74-56
Original file line numberDiff line numberDiff line change
@@ -1,67 +1,85 @@
1-
import React from 'react';
1+
import React, { Component } from 'react';
22

33
import Gallery from '../../src/react-chayns-gallery/component/Gallery';
44
import Image from '../../src/react-chayns-gallery/component/Image';
55
import ImageContainer from '../../src/react-chayns-gallery/component/ImageContainer';
66

7-
export default function GalleryExample() {
8-
const images = ['https://tsimg.cloud/127-89061/9d6979d3ac95a053c532f86af9acfb5af9262020.jpg',
9-
'https://tsimg.cloud/127-89061/2b83dfa29f2f88bcb35372cbfbefe04a3f899d00.jpg',
10-
'https://tsimg.cloud/72975-12914/e087202f5badd652fd015d39df83c35065941fe5.png',
11-
'https://tsimg.space/v1/images/6ffbd340-a77b-e811-80d6-0025905a8161.jpg',
12-
'https://tsimg.space/v1/images/59a25b31-3997-e811-80d6-0025905a8161.jpg',
13-
'https://tsimg.space/v1/images/59a25b31-3997-e811-80d6-0025905a8161.jpg',
14-
];
7+
export default class GalleryExample extends Component {
8+
constructor(props) {
9+
super(props);
10+
this.state = {
11+
images: ['https://tsimg.cloud/127-89061/9d6979d3ac95a053c532f86af9acfb5af9262020.jpg',
12+
'https://tsimg.cloud/127-89061/2b83dfa29f2f88bcb35372cbfbefe04a3f899d00.jpg',
13+
'https://tsimg.cloud/72975-12914/e087202f5badd652fd015d39df83c35065941fe5.png',
14+
'https://tsimg.space/v1/images/6ffbd340-a77b-e811-80d6-0025905a8161.jpg',
15+
'https://tsimg.space/v1/images/59a25b31-3997-e811-80d6-0025905a8161.jpg',
16+
'https://tsimg.space/v1/images/59a25b31-3997-e811-80d6-0025905a8161.jpg',
17+
],
18+
};
19+
}
1520

16-
return (
17-
<div>
18-
<h3>Gallery-Component</h3>
19-
<Gallery
20-
style={{ marginBottom: '30px' }}
21-
images={images}
22-
/>
23-
<Gallery
24-
style={{ marginBottom: '30px' }}
25-
images={[images[0], images[1], images[2], images[3], images[4]]}
26-
/>
27-
<Gallery
28-
style={{ marginBottom: '30px' }}
29-
images={[images[0], images[1], images[2], images[3]]}
30-
/>
31-
<Gallery
32-
style={{ marginBottom: '30px' }}
33-
images={[images[0], images[1], images[2]]}
34-
/>
35-
<Gallery
36-
style={{ marginBottom: '30px' }}
37-
images={[images[0], images[1]]}
38-
/>
39-
<Gallery
40-
style={{ marginBottom: '30px' }}
41-
images={[images[0]]}
42-
/>
43-
<h3>Image-Component</h3>
44-
<Image
45-
image={images[0]}
46-
onClick={console.log}
47-
style={{ width: '100px', height: '100px', marginBottom: '30px' }}
48-
styleLandscape={{ borderRadius: '10px' }}
49-
stylePortrait={{ border: '3px solid black' }}
50-
/>
51-
<h3>ImageContainer-Component</h3>
52-
<ImageContainer
53-
tools={[
54-
{ icon: 'ts-tobit', onClick: console.log },
55-
{ icon: 'ts-wrong', onClick: console.log },
56-
{ icon: 'ts-check', onClick: console.log },
57-
]}
58-
style={{ marginBottom: '30px' }}
59-
>
21+
22+
render() {
23+
const { images } = this.state;
24+
25+
return (
26+
<div>
27+
<h3>Gallery-Component</h3>
28+
<Gallery
29+
style={{ marginBottom: '30px' }}
30+
images={images}
31+
dragMode
32+
onDragEnd={(images) => {
33+
this.setState({ images });
34+
}}
35+
/>
36+
<Gallery
37+
style={{ marginBottom: '30px' }}
38+
images={images}
39+
/>
40+
<Gallery
41+
style={{ marginBottom: '30px' }}
42+
images={[images[0], images[1], images[2], images[3], images[4]]}
43+
/>
44+
<Gallery
45+
style={{ marginBottom: '30px' }}
46+
images={[images[0], images[1], images[2], images[3]]}
47+
/>
48+
<Gallery
49+
style={{ marginBottom: '30px' }}
50+
images={[images[0], images[1], images[2]]}
51+
/>
52+
<Gallery
53+
style={{ marginBottom: '30px' }}
54+
images={[images[0], images[1]]}
55+
/>
56+
<Gallery
57+
style={{ marginBottom: '30px' }}
58+
images={[images[0]]}
59+
/>
60+
<h3>Image-Component</h3>
6061
<Image
6162
image={images[0]}
6263
onClick={console.log}
64+
style={{ width: '100px', height: '100px', marginBottom: '30px' }}
65+
styleLandscape={{ borderRadius: '10px' }}
66+
stylePortrait={{ border: '3px solid black' }}
6367
/>
64-
</ImageContainer>
65-
</div>
66-
);
68+
<h3>ImageContainer-Component</h3>
69+
<ImageContainer
70+
tools={[
71+
{ icon: 'ts-tobit', onClick: console.log },
72+
{ icon: 'ts-wrong', onClick: console.log },
73+
{ icon: 'ts-check', onClick: console.log },
74+
]}
75+
style={{ marginBottom: '30px' }}
76+
>
77+
<Image
78+
image={images[0]}
79+
onClick={console.log}
80+
/>
81+
</ImageContainer>
82+
</div>
83+
);
84+
}
6785
}

‎examples/utils/components/ExampleList.jsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ export default class ExampleList extends Component {
1111
static propTypes = {
1212
children: PropTypes.oneOfType([
1313
PropTypes.node,
14-
PropTypes.arrayOf(PropTypes.node)
14+
PropTypes.arrayOf(PropTypes.node),
1515
]).isRequired,
1616
};
1717

@@ -38,7 +38,7 @@ export default class ExampleList extends Component {
3838
handleOpen(id) {
3939
chayns.appendUrlParameter({
4040
component: String(id),
41-
});
41+
}, true);
4242

4343
chayns.showBackButton(() => {
4444
this.setState({

‎src/index.js

+3
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,8 @@ import Checkbox from './react-chayns-checkbox/component/Checkbox';
1212
import ComboBox from './react-chayns-combobox/component/ComboBox';
1313
import ContextMenu from './react-chayns-contextmenu/component/ContextMenu';
1414

15+
import DateInfo from './react-chayns-dateinfo/component/DateInfo';
16+
1517
import EmojiInput from './react-chayns-emoji_input/component/EmojiInput';
1618

1719
import ExpandableContent from './react-chayns-expandable_content/component/ExpandableContent';
@@ -91,6 +93,7 @@ export {
9193
Checkbox,
9294
ComboBox,
9395
ContextMenu,
96+
DateInfo,
9497
EmojiInput,
9598
ExpandableContent,
9699
FormattedInput,

‎src/react-chayns-dateinfo/README.md

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
# DateInfo-Component #
2+
3+
The **DateInfo** - Component shows an date as a fancy text with the absolute date in the title on hover. It is part of the **chayns-component** package. You can install the whole package with the following statement:
4+
5+
npm install -S chayns-components@latest
6+
7+
If you need the text as a string for a dialog, you can use the static functions getRelativeDateString and getAbsoluteDateString.
8+
9+
## Usage ##
10+
11+
First of all import the component to a component of your own project.
12+
13+
```jsx harmony
14+
import { DateInfo } from 'chayns-components';
15+
```
16+
17+
You can use the DateInfo-component like in the [example](https://github.com/TobitSoftware/chayns-components/blob/master/examples/react-chayns-date/Example.jsx).
18+
19+
20+
## Props ##
21+
22+
The component got the following properties:
23+
24+
| Property | Description | Type | Required | Default |
25+
|------------|-----------------------------------------------------------------------------------------------------|------------------------|----------|---------|
26+
| children | children the text should be written into | node | | <div/> |
27+
| language | language of the text | string | | de |
28+
| date | date that should be shown | string, number or Date | true | |
29+
| date2 | second date for time interval | string, number or Date | | null |
30+
| showTime | show time in the text | bool | | null |
31+
| showDate | show date in the text | bool | | null |
32+
| writeDay | write day (e.g. monday) | bool | | false |
33+
| writeMonth | write month (e.g. december instead of 12.) | bool | | false |
34+
| noTitle | don't add the title attribute | bool | | false |

0 commit comments

Comments
 (0)