@xaypay/tui 0.0.97 → 0.0.99

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 (18) hide show
  1. package/dist/index.es.js +136 -83
  2. package/dist/index.js +135 -83
  3. package/package.json +1 -1
  4. package/src/components/input/index.js +76 -11
  5. package/src/components/input/input.module.css +5 -0
  6. package/src/components/input/input.stories.js +1 -1
  7. package/src/components/modal/index.js +8 -0
  8. package/src/components/newAutocomplete/index.js +9 -3
  9. package/src/components/pagination/index.js +96 -88
  10. package/src/components/select/index.js +9 -5
  11. package/src/components/select/select.module.css +7 -0
  12. package/src/components/toaster/index.js +1 -1
  13. package/src/index.js +0 -1
  14. package/src/stories/configuration.stories.mdx +1 -0
  15. package/tui.config.js +1 -0
  16. package/src/components/chart/chart.module.css +0 -0
  17. package/src/components/chart/chart.stories.js +0 -16
  18. package/src/components/chart/index.js +0 -42
package/src/components/pagination/index.js CHANGED
@@ -108,103 +108,111 @@ export const Pagination = ({
108
108
 
109
109
  let lastPage = paginationRange[paginationRange.length - 1];
110
110
  return (
111
- <ul className={classProps}>
112
- <button
113
- style={{
114
- transform: 'rotate(180deg)'
115
- }}
116
- onClick={onPrevious}
117
- disabled={currentPage === 1 ? true : false}
118
- className={`${styles["pagination-btn"]} pagination-btn-rem`}
119
- >
120
- <SvgNextarrow />
121
- </button>
111
+ <div
112
+ style={{
113
+ display: 'flex',
114
+ margin: '0 auto',
115
+ alignItems: 'center',
116
+ justifyContent: 'center',
117
+ }}
118
+ >
119
+ <ul className={classProps}>
120
+ <button
121
+ style={{
122
+ transform: 'rotate(180deg)'
123
+ }}
124
+ onClick={onPrevious}
125
+ disabled={currentPageNumber === 1 ? true : false}
126
+ className={`${styles["pagination-btn"]} pagination-btn-rem`}
127
+ >
128
+ <SvgNextarrow />
129
+ </button>
130
+
131
+ {paginationRange.map((pageNumber, id) => {
132
+ if (pageNumber === Dots) {
133
+ let currentPageIndex = paginationRange.indexOf(currentPageNumber);
134
+ return (
135
+ <li
136
+ key={id}
137
+ className={classnames(
138
+ `${styles["pagination-jump-next"]} pagination-jump-next-rem`,
139
+ styles.listItem
140
+ )}
141
+ onClick={
142
+ id < currentPageIndex
143
+ ? onPreviousFive
144
+ : onNextFive
145
+ }
146
+ disabled={currentPageIndex === 0 ? true : false}
147
+ >
148
+ {id < currentPageIndex ? (
149
+ <>
150
+ <span
151
+ className={
152
+ `${styles["pagination-jump-next-txt"]} pagination-jump-next-txt-rem`
153
+ }
154
+ >
155
+ <DotsIcon />
156
+ </span>
157
+ <span
158
+ className={
159
+ `${styles["pagination-jump-next-arrow"]} pagination-jump-next-arrow-rem`
160
+ }
161
+ style={{
162
+ transform: 'rotate(180deg)'
163
+ }}
164
+ >
165
+ <SvgNextarrow />
166
+ </span>
167
+ </>
168
+ ) : (
169
+ <>
170
+ <span
171
+ className={
172
+ `${styles["pagination-jump-next-txt"]} pagination-jump-next-txt-rem`
173
+ }
174
+ >
175
+ <DotsIcon />
176
+ </span>
177
+ <span
178
+ className={
179
+ `${styles["pagination-jump-next-arrow"]} pagination-jump-next-arrow-rem`
180
+ }
181
+ >
182
+ <SvgNextarrow />
183
+ </span>
184
+ </>
185
+ )}
186
+ </li>
187
+ );
188
+ }
122
189
 
123
- {paginationRange.map((pageNumber, id) => {
124
- if (pageNumber === Dots) {
125
- let currentPageIndex = paginationRange.indexOf(currentPageNumber);
126
190
  return (
127
191
  <li
192
+ onClick={() => onPageChange(pageNumber)}
128
193
  key={id}
129
194
  className={classnames(
130
- `${styles["pagination-jump-next"]} pagination-jump-next-rem`,
131
- styles.listItem
195
+ `${
196
+ pageNumber === currentPageNumber
197
+ ? styles.selected
198
+ : styles.listItem
199
+ }`,
200
+ `${styles["pagination-item"]} pagination-item-rem`
132
201
  )}
133
- onClick={
134
- id < currentPageIndex
135
- ? onPreviousFive
136
- : onNextFive
137
- }
138
- disabled={currentPageIndex === 0 ? true : false}
139
202
  >
140
- {id < currentPageIndex ? (
141
- <>
142
- <span
143
- className={
144
- `${styles["pagination-jump-next-txt"]} pagination-jump-next-txt-rem`
145
- }
146
- >
147
- <DotsIcon />
148
- </span>
149
- <span
150
- className={
151
- `${styles["pagination-jump-next-arrow"]} pagination-jump-next-arrow-rem`
152
- }
153
- style={{
154
- transform: 'rotate(180deg)'
155
- }}
156
- >
157
- <SvgNextarrow />
158
- </span>
159
- </>
160
- ) : (
161
- <>
162
- <span
163
- className={
164
- `${styles["pagination-jump-next-txt"]} pagination-jump-next-txt-rem`
165
- }
166
- >
167
- <DotsIcon />
168
- </span>
169
- <span
170
- className={
171
- `${styles["pagination-jump-next-arrow"]} pagination-jump-next-arrow-rem`
172
- }
173
- >
174
- <SvgNextarrow />
175
- </span>
176
- </>
177
- )}
203
+ {pageNumber}
178
204
  </li>
179
205
  );
180
- }
181
-
182
- return (
183
- <li
184
- onClick={() => onPageChange(pageNumber)}
185
- key={id}
186
- className={classnames(
187
- `${
188
- pageNumber === currentPageNumber
189
- ? styles.selected
190
- : styles.listItem
191
- }`,
192
- `${styles["pagination-item"]} pagination-item-rem`
193
- )}
194
- >
195
- {pageNumber}
196
- </li>
197
- );
198
- })}
199
-
200
- <button
201
- onClick={onNext}
202
- disabled={currentPageNumber === lastPage ? true : false}
203
- className={`${styles["pagination-btn"]} pagination-btn-rem`}
204
- >
205
- <SvgNextarrow />
206
- </button>
206
+ })}
207
207
 
208
+ <button
209
+ onClick={onNext}
210
+ disabled={currentPageNumber === lastPage ? true : false}
211
+ className={`${styles["pagination-btn"]} pagination-btn-rem`}
212
+ >
213
+ <SvgNextarrow />
214
+ </button>
215
+ </ul>
208
216
  {
209
217
  goTo && <div>
210
218
  <input
@@ -234,7 +242,7 @@ export const Pagination = ({
234
242
  >Էջ</span>
235
243
  </div>
236
244
  }
237
- </ul>
245
+ </div>
238
246
  );
239
247
  };
240
248
 
package/src/components/select/index.js CHANGED
@@ -10,6 +10,7 @@ import ReactCloseIcon from '../icon/CloseIcon';
10
10
  import styles from './select.module.css';
11
11
 
12
12
  export const Select = ({
13
+ dots,
13
14
  options,
14
15
  multiple,
15
16
  disabled,
@@ -158,7 +159,7 @@ export const Select = ({
158
159
  }
159
160
  }
160
161
  return true;
161
- }
162
+ };
162
163
 
163
164
  useEffect(() => {
164
165
  if(opened){
@@ -317,22 +318,24 @@ export const Select = ({
317
318
  onClick={disabled ? _ => _ : _ => handleSelectItem(option)}
318
319
  onMouseEnter={disabled ? _ => _ : e => handleMouseEnterOption(e)}
319
320
  onMouseLeave={disabled ? _ => _ : e => handleMouseLeaveOption(e)}
320
- className={`${styles['select-content-bottom-row']}`}
321
+ className={`${styles['select-content-bottom-row']} ${dots || configStyles.SELECT.dots ? styles['ellipsis'] : ''}`}
321
322
  style={{
323
+ overflowWrap: !dots && !configStyles.SELECT.dots ? 'anywhere' : 'break-word',
322
324
  color: optionItemColor ? optionItemColor : configStyles.SELECT.optionItemColor,
323
325
  cursor: optionItemCursor ? optionItemCursor : configStyles.SELECT.optionItemCursor,
324
326
  padding: optionItemPadding ? optionItemPadding : configStyles.SELECT.optionItemPadding,
325
327
  fontSize: optionItemFontSize ? optionItemFontSize : configStyles.SELECT.optionItemFontSize,
326
328
  boxSizing: optionItemBoxSizing ? optionItemBoxSizing : configStyles.SELECT.optionItemBoxSizing,
327
- minHeight: optionItemMinHeight ? optionItemMinHeight : configStyles.SELECT.optionItemMinHeight,
329
+ minHeight: !dots && !configStyles.SELECT.dots ? 'auto' : optionItemMinHeight ? optionItemMinHeight : configStyles.SELECT.optionItemMinHeight,
328
330
  fontWeight: optionItemFontWeight ? optionItemFontWeight : configStyles.SELECT.optionItemFontWeight,
329
- lineHeight: optionItemLineHeight ? optionItemLineHeight : configStyles.SELECT.optionItemLineHeight,
330
- marginBottom: optionItemMarginBottom ? optionItemMarginBottom : configStyles.SELECT.optionItemMarginBottom,
331
+ lineHeight: dots || configStyles.SELECT.dots ? '46px' : optionItemLineHeight ? optionItemLineHeight : configStyles.SELECT.optionItemLineHeight,
332
+ marginBottom: !dots && !configStyles.SELECT.dots ? '10px' : optionItemMarginBottom ? optionItemMarginBottom : configStyles.SELECT.optionItemMarginBottom,
331
333
  backgroundColor: optionItemBackgroudColor ? optionItemBackgroudColor : configStyles.SELECT.optionItemBackgroudColor,
332
334
  }}
333
335
  >
334
336
  {multiple && multipleCheckbox ? <SingleCheckbox checked={option.checked} /> : ''}
335
337
  {option[keyNames.name]}
338
+
336
339
  </div>
337
340
  })
338
341
  }
@@ -362,6 +365,7 @@ export const Select = ({
362
365
  };
363
366
 
364
367
  Select.propTypes = {
368
+ dots: PropTypes.bool,
365
369
  options: PropTypes.array,
366
370
  multiple: PropTypes.bool,
367
371
  onChange: PropTypes.func,
package/src/components/select/select.module.css CHANGED
@@ -79,6 +79,13 @@
79
79
  margin-bottom: 0px;
80
80
  }
81
81
 
82
+ .ellipsis {
83
+ display: inline-block;
84
+ white-space: nowrap;
85
+ overflow: hidden;
86
+ text-overflow: ellipsis;
87
+ }
88
+
82
89
  @keyframes select-show {
83
90
  100% {
84
91
  max-height: 234px;
package/src/components/toaster/index.js CHANGED
@@ -52,7 +52,7 @@ const createToast = ({
52
52
  toastParentBlock = document.createElement('div');
53
53
  toastParentBlock.style.position = 'fixed';
54
54
  toastParentBlock.style.display = 'flex';
55
- toastParentBlock.style.zIndex = 99999;
55
+ toastParentBlock.style.zIndex = 9999999999999999999999999;
56
56
  toastParentBlock.style.flexDirection = position === 'top-left' || position === 'top-right' || position === 'top-center' ? 'column-reverse' : 'column';
57
57
  toastParentBlock.setAttribute('id', styles[position]);
58
58
  toastParentBlock.appendChild(toastBlock);
package/src/index.js CHANGED
@@ -1,5 +1,4 @@
1
1
  export * from './components/file';
2
- export * from './components/chart';
3
2
  export * from './components/table';
4
3
  export * from './components/modal';
5
4
  export * from './components/input';
package/src/stories/configuration.stories.mdx CHANGED
@@ -325,6 +325,7 @@ import StackAlt from './assets/stackalt.svg';
325
325
 
326
326
  ```
327
327
  {
328
+ dots: false, // for options, cut text and add dots
328
329
  marginTop: '10px', // for error message postion from top
329
330
  labelWeight: '500', // for label font weight
330
331
  labelColor: '#3C393E', // for label color
package/tui.config.js CHANGED
@@ -181,6 +181,7 @@ module.exports = {
181
181
  },
182
182
  // default properties for <Select /> component
183
183
  SELECT: {
184
+ dots: false, // for options, cut text and add dots
184
185
  showCloseIcon: true, // for select reset icon, when prop exist or true is show, otherwise is hide
185
186
  marginTop: '10px', // for error message postion from top
186
187
  labelWeight: '500', // for label font weight
package/src/components/chart/chart.module.css DELETED
File without changes
package/src/components/chart/chart.stories.js DELETED
@@ -1,16 +0,0 @@
1
- import React from "react";
2
- import { Chart } from './index';
3
-
4
- export default {
5
- component: Chart,
6
- title: "Components/Chart",
7
- };
8
-
9
- const Template = (args) => {
10
- return <Chart width={500} height={200} {...args} />;
11
- };
12
-
13
- export const Default = Template.bind({});
14
- Default.args = {
15
-
16
- };
package/src/components/chart/index.js DELETED
@@ -1,42 +0,0 @@
1
- import React, { useEffect } from 'react';
2
- import PropTypes from 'prop-types';
3
- import { compereConfigs } from './../../utils';
4
-
5
- import styles from "./chart.module.css";
6
-
7
- export const Chart = ({
8
- width,
9
- height
10
- }) => {
11
- const configStyles = compereConfigs();
12
- useEffect(() => {
13
- const canvas = document.getElementById('myChart');
14
- // const canvas = canvasRef.current;
15
- const ctx = canvas.getContext('2d');
16
-
17
- const data = [10, 20, 30, 15, 25];
18
- const barWidth = 40;
19
- const chartHeight = 200;
20
-
21
- ctx.clearRect(0, 0, canvas.width, canvas.height);
22
-
23
- data.forEach((value, index) => {
24
- const x = index * (barWidth + 10);
25
- const y = chartHeight - value;
26
-
27
- ctx.fillStyle = 'blue';
28
- ctx.fillRect(x, y, barWidth, value);
29
- });
30
-
31
- }, []);
32
-
33
-
34
- return (
35
- <canvas id='myChart' width={width} height={height}></canvas>
36
- );
37
- };
38
-
39
- Chart.propTypes = {
40
- width: PropTypes.number,
41
- height: PropTypes.number,
42
- };