react-image-accordion 1.1.4 → 1.1.6

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.
Files changed (3) hide show
  1. package/dist/index.es.js +41 -30
  2. package/dist/index.js +41 -30
  3. package/package.json +1 -1
package/dist/index.es.js CHANGED
@@ -37,6 +37,7 @@ function UseImageAccordion({
37
37
  ContentSize
38
38
  }) {
39
39
  const [activePanel, setActivePanel] = useState(null);
40
+ const ContentSizeFont = ContentSize || [];
40
41
  function toggleAccordion(panelToActivate) {
41
42
  setActivePanel(prevPanel => {
42
43
  if (prevPanel === panelToActivate) {
@@ -46,28 +47,38 @@ function UseImageAccordion({
46
47
  }
47
48
  });
48
49
  }
49
- const HeightStyle = {
50
- "@media (max-width: 480px)": {
51
- height: AccordionHeight
50
+ const HeightStyle = `
51
+ @media (min-width: 480px) {
52
+ .AccHeight {
53
+ height: ${AccordionHeight};
54
+ }
55
+ }`;
56
+ const css = `
57
+ @media (max-width: 480px) {
58
+ .ContentSize {
59
+ font-size: ${ContentSizeFont[0] || "0.65rem"};
60
+ }
61
+ }
62
+ @media (min-width: 481px) and (max-width: 768px) {
63
+ .ContentSize {
64
+ font-size: ${ContentSizeFont[1] || "0.8rem"};
65
+ }
52
66
  }
53
- };
54
- const ContentStyle = {
55
- "@media (max-width: 480px)": {
56
- fontSize: ContentSize[0] || "0.65rem"
57
- },
58
- "@media (min-width: 481px) and (max-width: 768px)": {
59
- fontSize: ContentSize[1] || "0.8rem"
60
- },
61
- "@media (min-width: 769px) and (max-width: 1024px)": {
62
- fontSize: ContentSize[2] || "1rem"
63
- },
64
- "@media (min-width: 1025px) and (max-width: 1200px)": {
65
- fontSize: ContentSize[3] || "1.2rem"
66
- },
67
- "@media (min-width: 1201px)": {
68
- fontSize: ContentSize[4] || "1.5rem"
67
+ @media (min-width: 769px) and (max-width: 1024px) {
68
+ .ContentSize {
69
+ font-size: ${ContentSizeFont[2] || "1rem"};
70
+ }
71
+ }
72
+ @media (min-width: 1025px) and (max-width: 1200px) {
73
+ .ContentSize {
74
+ font-size: ${ContentSizeFont[3] || "1.2rem"};
75
+ }
69
76
  }
70
- };
77
+ @media (min-width: 1201px) {
78
+ .ContentSize {
79
+ font-size: ${ContentSizeFont[4] || "1.5rem"};
80
+ }
81
+ }`;
71
82
  useEffect(() => {
72
83
  setActivePanel(accordionData[0].id);
73
84
  }, []);
@@ -77,9 +88,10 @@ function UseImageAccordion({
77
88
  style: {
78
89
  width: AccordionWidth
79
90
  }
80
- }, /*#__PURE__*/React.createElement("div", {
81
- className: "accordion",
82
- style: HeightStyle
91
+ }, /*#__PURE__*/React.createElement("style", {
92
+ scoped: true
93
+ }, HeightStyle), /*#__PURE__*/React.createElement("div", {
94
+ className: "accordion AccHeight"
83
95
  }, accordionData.map(item => /*#__PURE__*/React.createElement("div", {
84
96
  key: item.id,
85
97
  className: "accordion-panel",
@@ -100,16 +112,15 @@ function UseImageAccordion({
100
112
  xmlns: "http://www.w3.org/2000/svg"
101
113
  }, /*#__PURE__*/React.createElement("image", {
102
114
  href: item.svg
103
- })))), /*#__PURE__*/React.createElement("div", {
104
- className: "accordion-content",
115
+ })))), /*#__PURE__*/React.createElement("style", {
116
+ scoped: true
117
+ }, css), /*#__PURE__*/React.createElement("div", {
118
+ className: "accordion-content ContentSize",
105
119
  id: item.id,
106
120
  "aria-labelledby": item.id,
107
121
  "aria-hidden": activePanel !== item.id,
108
- role: "region",
109
- style: ContentStyle
110
- }, /*#__PURE__*/React.createElement("p", {
111
- style: ContentStyle
112
- }, item.content), /*#__PURE__*/React.createElement("img", {
122
+ role: "region"
123
+ }, /*#__PURE__*/React.createElement("p", null, item.content), /*#__PURE__*/React.createElement("img", {
113
124
  className: "accordion-image",
114
125
  src: item.image,
115
126
  alt: item.alt
package/dist/index.js CHANGED
@@ -45,6 +45,7 @@ function UseImageAccordion({
45
45
  ContentSize
46
46
  }) {
47
47
  const [activePanel, setActivePanel] = React.useState(null);
48
+ const ContentSizeFont = ContentSize || [];
48
49
  function toggleAccordion(panelToActivate) {
49
50
  setActivePanel(prevPanel => {
50
51
  if (prevPanel === panelToActivate) {
@@ -54,28 +55,38 @@ function UseImageAccordion({
54
55
  }
55
56
  });
56
57
  }
57
- const HeightStyle = {
58
- "@media (max-width: 480px)": {
59
- height: AccordionHeight
58
+ const HeightStyle = `
59
+ @media (min-width: 480px) {
60
+ .AccHeight {
61
+ height: ${AccordionHeight};
62
+ }
63
+ }`;
64
+ const css = `
65
+ @media (max-width: 480px) {
66
+ .ContentSize {
67
+ font-size: ${ContentSizeFont[0] || "0.65rem"};
68
+ }
69
+ }
70
+ @media (min-width: 481px) and (max-width: 768px) {
71
+ .ContentSize {
72
+ font-size: ${ContentSizeFont[1] || "0.8rem"};
73
+ }
60
74
  }
61
- };
62
- const ContentStyle = {
63
- "@media (max-width: 480px)": {
64
- fontSize: ContentSize[0] || "0.65rem"
65
- },
66
- "@media (min-width: 481px) and (max-width: 768px)": {
67
- fontSize: ContentSize[1] || "0.8rem"
68
- },
69
- "@media (min-width: 769px) and (max-width: 1024px)": {
70
- fontSize: ContentSize[2] || "1rem"
71
- },
72
- "@media (min-width: 1025px) and (max-width: 1200px)": {
73
- fontSize: ContentSize[3] || "1.2rem"
74
- },
75
- "@media (min-width: 1201px)": {
76
- fontSize: ContentSize[4] || "1.5rem"
75
+ @media (min-width: 769px) and (max-width: 1024px) {
76
+ .ContentSize {
77
+ font-size: ${ContentSizeFont[2] || "1rem"};
78
+ }
79
+ }
80
+ @media (min-width: 1025px) and (max-width: 1200px) {
81
+ .ContentSize {
82
+ font-size: ${ContentSizeFont[3] || "1.2rem"};
83
+ }
77
84
  }
78
- };
85
+ @media (min-width: 1201px) {
86
+ .ContentSize {
87
+ font-size: ${ContentSizeFont[4] || "1.5rem"};
88
+ }
89
+ }`;
79
90
  React.useEffect(() => {
80
91
  setActivePanel(accordionData[0].id);
81
92
  }, []);
@@ -85,9 +96,10 @@ function UseImageAccordion({
85
96
  style: {
86
97
  width: AccordionWidth
87
98
  }
88
- }, /*#__PURE__*/React__default["default"].createElement("div", {
89
- className: "accordion",
90
- style: HeightStyle
99
+ }, /*#__PURE__*/React__default["default"].createElement("style", {
100
+ scoped: true
101
+ }, HeightStyle), /*#__PURE__*/React__default["default"].createElement("div", {
102
+ className: "accordion AccHeight"
91
103
  }, accordionData.map(item => /*#__PURE__*/React__default["default"].createElement("div", {
92
104
  key: item.id,
93
105
  className: "accordion-panel",
@@ -108,16 +120,15 @@ function UseImageAccordion({
108
120
  xmlns: "http://www.w3.org/2000/svg"
109
121
  }, /*#__PURE__*/React__default["default"].createElement("image", {
110
122
  href: item.svg
111
- })))), /*#__PURE__*/React__default["default"].createElement("div", {
112
- className: "accordion-content",
123
+ })))), /*#__PURE__*/React__default["default"].createElement("style", {
124
+ scoped: true
125
+ }, css), /*#__PURE__*/React__default["default"].createElement("div", {
126
+ className: "accordion-content ContentSize",
113
127
  id: item.id,
114
128
  "aria-labelledby": item.id,
115
129
  "aria-hidden": activePanel !== item.id,
116
- role: "region",
117
- style: ContentStyle
118
- }, /*#__PURE__*/React__default["default"].createElement("p", {
119
- style: ContentStyle
120
- }, item.content), /*#__PURE__*/React__default["default"].createElement("img", {
130
+ role: "region"
131
+ }, /*#__PURE__*/React__default["default"].createElement("p", null, item.content), /*#__PURE__*/React__default["default"].createElement("img", {
121
132
  className: "accordion-image",
122
133
  src: item.image,
123
134
  alt: item.alt
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-image-accordion",
3
- "version": "1.1.4",
3
+ "version": "1.1.6",
4
4
  "description": "Accordion component for React",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.es.js",