Skip to content

Commit 1502bce

Browse files
foxprogsfoxprogs
authored
Merge pull request #12 from texttree/fix-dima-bibleBookListClasses
Fix bible book list classes
2 parents 02f8e54 + c6327e4 commit 1502bce

5 files changed

Lines changed: 190 additions & 135 deletions

File tree

‎src/components/BibleBookList/BibleBookList.js‎

Lines changed: 95 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -1,100 +1,114 @@
1-
import React, { useState } from "react";
2-
import BookList from "../BookList";
3-
import PropTypes from "prop-types";
4-
import { bibleList, ALL_BIBLE_BOOKS } from "./config";
5-
import Checkbox from "@material-ui/core/Checkbox";
6-
import { FormControlLabel } from "@material-ui/core";
1+
import React, { useState } from 'react';
2+
import BookList from '../BookList';
3+
import PropTypes from 'prop-types';
4+
import { BIBLE_LIST, BIBLE_BOOKS } from './config';
5+
import Checkbox from '@material-ui/core/Checkbox';
6+
import { FormControlLabel } from '@material-ui/core';
77

88
function BibleBookList({
9-
label,
10-
check,
9+
labelForCheckbox,
10+
showCheckbox,
11+
showInactive,
1112
onClickBook,
1213
selectedBookId,
1314
titleOT,
1415
titleNT,
1516
availableBookList,
16-
titleBook,
17-
bookListClasses,
17+
titleBooks,
18+
BibleBookListClasses,
1819
bookClasses,
1920
testaments,
2021
showTitle,
2122
sortFirstNT,
2223
}) {
23-
const [checkState, setCheckState] = useState(false);
24-
25-
const currentBookList = bibleList.map((el) => {
24+
const [checkState, setCheckState] = useState(!showInactive);
25+
const currentBookList = BIBLE_LIST.map((el) => {
2626
return {
2727
...el,
28-
text:
29-
titleBook && titleBook[el.identifier]
30-
? titleBook[el.identifier]
31-
: ALL_BIBLE_BOOKS[el.identifier],
32-
isset: availableBookList?.includes(el.identifier) ? true : false,
28+
text: titleBooks[el.identifier] ?? BIBLE_BOOKS[el.identifier],
29+
isset: availableBookList.includes(el.identifier),
3330
};
3431
});
3532

3633
const currentBookListOT = currentBookList.filter(
37-
(el) => el.categories === "bible-ot"
34+
(el) => el.categories === 'bible-ot'
3835
);
3936

4037
const currentBookListNT = currentBookList.filter(
41-
(el) => el.categories === "bible-nt"
38+
(el) => el.categories === 'bible-nt'
4239
);
4340
const handleChange = () => {
4441
setCheckState((prev) => !prev);
4542
};
4643

47-
let testamentList = [
48-
{ title: titleOT ? titleOT : "Old Testament", bookList: currentBookListOT },
49-
{ title: titleNT ? titleNT : "New Testament", bookList: currentBookListNT },
50-
];
44+
let testamentList = [];
5145

52-
if (testaments === "nt") {
53-
testamentList = [
54-
{
55-
title: titleNT ? titleNT : "New Testament",
56-
bookList: currentBookListNT,
57-
},
58-
];
59-
} else if (testaments === "ot") {
60-
testamentList = [
61-
{
62-
title: titleOT ? titleOT : "Old Testament",
63-
bookList: currentBookListOT,
64-
},
65-
];
66-
}
46+
switch (testaments) {
47+
case 'nt':
48+
testamentList = [
49+
{
50+
title: titleNT,
51+
bookList: currentBookListNT,
52+
},
53+
];
54+
break;
55+
56+
case 'ot':
57+
testamentList = [
58+
{
59+
title: titleOT,
60+
bookList: currentBookListOT,
61+
},
62+
];
63+
break;
64+
case 'all':
65+
testamentList = [
66+
{ title: titleOT, bookList: currentBookListOT },
67+
{ title: titleNT, bookList: currentBookListNT },
68+
];
69+
if (sortFirstNT) {
70+
testamentList.reverse();
71+
}
72+
break;
6773

68-
if (sortFirstNT === true) {
69-
testamentList.reverse();
74+
default:
75+
break;
7076
}
7177

72-
const hideCheckRender = check ? (
78+
const checkboxRender = showCheckbox ? (
7379
<FormControlLabel
80+
classes={{
81+
label: BibleBookListClasses?.label,
82+
}}
7483
control={
7584
<Checkbox
7685
checked={checkState}
7786
onChange={handleChange}
78-
color="primary"
87+
color='primary'
7988
/>
8089
}
81-
label={label}
90+
label={labelForCheckbox}
8291
/>
8392
) : (
84-
[]
93+
''
8594
);
95+
8696
return (
8797
<>
88-
{hideCheckRender}
98+
{checkboxRender}
8999
{testamentList.map((el, index) => {
90100
return (
91101
<BookList
92-
title={showTitle === true ? el.title : ""}
102+
title={showTitle ? el.title : ''}
93103
bookList={el.bookList}
94104
showInactive={!checkState}
95105
onClickBook={onClickBook}
96106
selectedBookId={selectedBookId}
97-
bookListClasses={bookListClasses}
107+
bookListClasses={{
108+
title: BibleBookListClasses?.title,
109+
book: BibleBookListClasses?.book,
110+
bookList: BibleBookListClasses?.bookList,
111+
}}
98112
bookClasses={bookClasses}
99113
key={index}
100114
/>
@@ -105,15 +119,20 @@ function BibleBookList({
105119
}
106120

107121
BibleBookList.defaultProps = {
108-
check: false,
109-
testaments: "all",
122+
showCheckbox: false,
123+
testaments: 'all',
124+
titleOT: 'Old Testament',
125+
titleNT: 'New Testament',
126+
showInactive: true,
127+
onClickBook: () => {},
128+
labelForCheckbox: 'Show only existing books',
129+
titleBooks: {},
130+
BibleBookListClasses: {},
131+
availableBookList: [],
110132
};
111133

112134
BibleBookList.propTypes = {
113-
/**
114-
* When prop is all, show 2 Testaments
115-
*/
116-
testaments: PropTypes.string,
135+
testaments: PropTypes.oneOf(['all', 'nt', 'ot']),
117136
/**
118137
* Block header of "New Testament"
119138
*/
@@ -127,27 +146,40 @@ BibleBookList.propTypes = {
127146
*/
128147
showTitle: PropTypes.bool,
129148
/**
130-
* When true, show first NT, second - OT
149+
* When true, show first New Testament, second - Old Testament
131150
*/
132151
sortFirstNT: PropTypes.bool,
133152
/**
134-
* Array of bookId
153+
* Array of existing bookId's
135154
*/
136155
availableBookList: PropTypes.array,
137156
/**
138-
* Array of bookId with titles ,needfull to translate
157+
* Array of bookId with the titles to be translated. If not set - get the default value in English
139158
*/
140-
titleBook: PropTypes.object,
159+
titleBooks: PropTypes.object,
141160
/**
142-
* When show 1 Testament, need to write title of Testament
161+
* show or hide checkbox that show only existing books
143162
*/
144-
check: PropTypes.bool,
163+
showCheckbox: PropTypes.bool,
164+
/** Whether to display inactive books */
165+
showInactive: PropTypes.bool,
145166
/**
146-
* label of check
167+
* label of checkbox
147168
*/
148-
label: PropTypes.string,
169+
labelForCheckbox: PropTypes.string,
149170

150-
bookListClasses: PropTypes.string,
171+
BibleBookListClasses: PropTypes.objectOf(
172+
PropTypes.shape({
173+
/** title className */
174+
title: PropTypes.string,
175+
/** book className */
176+
book: PropTypes.string,
177+
/** bookList className */
178+
bookList: PropTypes.string,
179+
/** className for label of checkbox */
180+
label: PropTypes.string,
181+
})
182+
),
151183
bookClasses: PropTypes.object,
152184
/** An open book, a different style will be applied to it */
153185
selectedBookId: PropTypes.string,

‎src/components/BibleBookList/BibleBookList.md‎

Lines changed: 75 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -4,40 +4,33 @@ Show 2 Testaments
44
import React from "react";
55
import { BibleBookList } from "demo-bsa-reference-rcl";
66

7-
const titleBook = {
8-
mat: " Матфей ",
9-
mrk: " Марк ",
10-
luk: " Лука ",
11-
tit: " Титу ",
7+
const titleBooks = {
8+
mat: "Матфей", mrk: "Марк",
9+
luk: "Лука", tit: "Титу",
1210
};
1311

14-
const onClickBook = (bookId) => alert("bookId " + bookId);
12+
const [selectedBookId, setSelectedBookId] = React.useState("exo");
13+
14+
const onClickBook = (bookId) => setSelectedBookId(bookId);
15+
1516
const availableBookList = [
16-
"gen",
17-
"exo",
18-
"lev",
19-
"num",
20-
"deu",
21-
"mat",
22-
"mrk",
23-
"luk",
24-
"tit",
17+
"gen", "exo", "lev", "num",
18+
"mat", "mrk", "luk", "tit",
2519
];
2620

27-
<>
28-
<BibleBookList
29-
titleBook={titleBook}
30-
availableBookList={availableBookList}
31-
label="show existing book"
32-
check={true}
33-
selectedBookId="exo"
34-
onClickBook={onClickBook}
35-
testaments="all"
36-
titleOT="Ветхий завет"
37-
showTitle={true}
38-
sortFirstNT={true}
39-
/>
40-
</>;
21+
<BibleBookList
22+
titleBooks={titleBooks}
23+
showInactive={false}
24+
availableBookList={availableBookList}
25+
labelForCheckbox="show existing book"
26+
showCheckbox={true}
27+
selectedBookId={selectedBookId}
28+
onClickBook={onClickBook}
29+
testaments="all"
30+
titleOT="Ветхий завет"
31+
showTitle={true}
32+
sortFirstNT={true}
33+
/>;
4134
```
4235

4336
Show 1 Testament
@@ -46,36 +39,63 @@ Show 1 Testament
4639
import React from "react";
4740
import { BibleBookList } from "demo-bsa-reference-rcl";
4841

49-
const titleBook = {
50-
mat: " Матфей ",
51-
mrk: " Марк ",
52-
luk: " Лука ",
53-
tit: " Титу ",
42+
const titleBooks = {
43+
mat: "Матфей", mrk: "Марк",
44+
luk: "Лука", tit: "Титу",
5445
};
5546

56-
const onClickBook = (bookId) => alert("bookId " + bookId);
5747
const availableBookList = [
58-
"gen",
59-
"exo",
60-
"lev",
61-
"num",
62-
"deu",
63-
"mat",
64-
"mrk",
65-
"luk",
66-
"tit",
48+
"gen", "jon", "lev", "num",
49+
"mat", "1ko", "rev", "tit",
6750
];
6851

69-
<>
7052
<BibleBookList
71-
titleBook={titleBook}
72-
availableBookList={availableBookList}
73-
label="show existing book"
74-
check={true}
75-
selectedBookId="exo"
76-
onClickBook={onClickBook}
77-
testaments="nt"
78-
showTitle={true}
79-
/>
80-
</>;
53+
titleBooks={titleBooks}
54+
availableBookList={availableBookList}
55+
showCheckbox={true}
56+
testaments="ot"
57+
titleOT="OT"
58+
titleNT="NT"
59+
showTitle={true}/>;
60+
```
61+
62+
Use styles
63+
64+
```jsx
65+
import React from "react";
66+
import { BibleBookList } from "demo-bsa-reference-rcl";
67+
import { makeStyles } from "@material-ui/core/styles";
68+
69+
const useStyles = makeStyles((theme) => ({
70+
title: {
71+
margin: theme.spacing(3),
72+
fontSize: 24,
73+
},
74+
book: {
75+
margin: theme.spacing(1),
76+
},
77+
bookList: {
78+
border: "2px solid " + theme.palette.info.main,
79+
},
80+
label: {
81+
fontWeight: "bold",
82+
textDecoration: "underline",
83+
}
84+
}));
85+
86+
const classes = useStyles();
87+
88+
const availableBookList = [
89+
"gen", "exo", "lev", "num", '1sa', '2sa', '1ch', 'isa', 'mal',
90+
];
91+
92+
<BibleBookList
93+
availableBookList={availableBookList}
94+
selectedBookId="exo"
95+
BibleBookListClasses={classes}
96+
showCheckbox={true}
97+
testaments="ot"
98+
titleOT="Ветхий завет"
99+
showTitle={true}
100+
/>;
81101
```

0 commit comments

Comments
 (0)