diginet-core-ui 1.3.65 → 1.3.66

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 (97) hide show
  1. package/components/button/index.js +13 -14
  2. package/components/button/more.js +16 -16
  3. package/components/button/ripple-effect.js +2 -0
  4. package/components/card/card.js +30 -28
  5. package/components/card/index.js +1 -0
  6. package/components/chart/Pie/Circle.js +2 -1
  7. package/components/chart/Pie-v2/Circle.js +4 -5
  8. package/components/chart/Pie-v2/Sector.js +21 -27
  9. package/components/chart/Pie-v2/Sectors.js +16 -15
  10. package/components/chart/Pie-v2/index.js +141 -16
  11. package/components/chart/bar/Bar.js +20 -18
  12. package/components/chart/bar/Labels.js +20 -18
  13. package/components/chart/bar/index.js +3 -2
  14. package/components/chart/bar-v2/Bar.js +23 -21
  15. package/components/chart/bar-v2/Labels.js +21 -19
  16. package/components/chart/bar-v2/index.js +3 -2
  17. package/components/chart/line/Labels.js +21 -18
  18. package/components/chart/line/Path.js +7 -6
  19. package/components/chart/line/Point.js +2 -0
  20. package/components/chart/line/Title.js +1 -2
  21. package/components/chart/line/index.js +22 -1
  22. package/components/chart/line-v2/Labels.js +21 -18
  23. package/components/chart/line-v2/Path.js +15 -14
  24. package/components/chart/line-v2/Point.js +4 -2
  25. package/components/chart/line-v2/Title.js +1 -2
  26. package/components/chart/line-v2/index.js +8 -7
  27. package/components/check-text/index.js +22 -21
  28. package/components/chip/attach.js +8 -8
  29. package/components/form-control/calendar/index.js +17 -17
  30. package/components/form-control/calendar/range.js +33 -33
  31. package/components/form-control/dropdown/index.js +2 -1
  32. package/components/form-control/form/index.js +1 -0
  33. package/components/form-control/input-base/index.js +39 -30
  34. package/components/form-control/label/index.js +67 -43
  35. package/components/form-control/number-input/index.js +16 -29
  36. package/components/form-control/phone-input/index.js +20 -34
  37. package/components/form-control/text-input/index.js +9 -6
  38. package/components/form-control/time-picker/index.js +2 -1
  39. package/components/form-control/time-picker/swiper.js +80 -76
  40. package/components/form-view/helper-text.js +1 -0
  41. package/components/grid/Col.js +1 -1
  42. package/components/index.js +4 -1
  43. package/components/modal/index.js +1 -0
  44. package/components/others/extra/index.js +2 -0
  45. package/components/others/scrollbar/index.js +25 -26
  46. package/components/popover/body.js +74 -0
  47. package/components/popover/footer.js +76 -0
  48. package/components/popover/header.js +79 -0
  49. package/components/popover/index.js +119 -86
  50. package/components/popup/danger_popup.js +3 -1
  51. package/components/popup/index.js +2 -2
  52. package/components/popup/proposals_popup.js +1 -0
  53. package/components/progress/circular.js +14 -12
  54. package/components/status/index.js +92 -89
  55. package/components/tooltip/index.js +8 -3
  56. package/components/transfer/index.js +86 -94
  57. package/icons/effect.js +32 -34
  58. package/icons/general/clock/clock.js +1 -0
  59. package/icons/general/color-handler/background.js +1 -0
  60. package/icons/general/color-handler/text.js +1 -0
  61. package/icons/general/emoji/emoji.js +1 -0
  62. package/icons/general/font-properties/bold.js +1 -0
  63. package/icons/general/font-properties/font-family.js +1 -0
  64. package/icons/general/font-properties/font-size.js +1 -0
  65. package/icons/general/font-properties/italic.js +1 -0
  66. package/icons/general/font-properties/underline.js +1 -0
  67. package/icons/general/hyperlink/hyperlink.js +1 -0
  68. package/icons/general/indent/decrease.js +1 -0
  69. package/icons/general/indent/increase.js +1 -0
  70. package/icons/general/list/bullets.js +1 -0
  71. package/icons/general/list/numbering.js +1 -0
  72. package/icons/general/picture/picture.js +1 -0
  73. package/icons/general/steps/redo.js +1 -0
  74. package/icons/general/steps/undo.js +1 -0
  75. package/icons/general/text-align/center.js +1 -0
  76. package/icons/general/text-align/justify.js +1 -0
  77. package/icons/general/text-align/left.js +1 -0
  78. package/icons/general/text-align/right.js +1 -0
  79. package/icons/menu/dhr.js +2 -1
  80. package/icons/menu/erp.js +1 -0
  81. package/package.json +1 -1
  82. package/readme.md +15 -0
  83. package/styles/animation.js +2 -1
  84. package/styles/color-helper.js +108 -106
  85. package/styles/font.js +5 -4
  86. package/theme/index.js +1 -3
  87. package/theme/make-styles.js +25 -105
  88. package/theme/theme-provider.js +0 -9
  89. package/utils/console.js +0 -1
  90. package/utils/error/error.js +2 -3
  91. package/utils/index.js +0 -1
  92. package/utils/promisify.js +2 -1
  93. package/utils/renderIcon.js +13 -11
  94. package/styles/media-queries.js +0 -10
  95. package/theme/with-styles.js +0 -15
  96. package/theme/with-theme.js +0 -9
  97. package/utils/number.js +0 -63
package/icons/general/indent/increase.js CHANGED
@@ -1,3 +1,4 @@
1
+ /* eslint-disable react/prop-types */
1
2
  import React from 'react';
2
3
 
3
4
  const Increase = ({
package/icons/general/list/bullets.js CHANGED
@@ -1,3 +1,4 @@
1
+ /* eslint-disable react/prop-types */
1
2
  import React from 'react';
2
3
 
3
4
  const Bullets = ({
package/icons/general/list/numbering.js CHANGED
@@ -1,3 +1,4 @@
1
+ /* eslint-disable react/prop-types */
1
2
  import React from 'react';
2
3
 
3
4
  const Bullets = ({
package/icons/general/picture/picture.js CHANGED
@@ -1,3 +1,4 @@
1
+ /* eslint-disable react/prop-types */
1
2
  import React from 'react';
2
3
 
3
4
  const Picture = ({
package/icons/general/steps/redo.js CHANGED
@@ -1,3 +1,4 @@
1
+ /* eslint-disable react/prop-types */
1
2
  import React from 'react';
2
3
 
3
4
  const Redo = ({
package/icons/general/steps/undo.js CHANGED
@@ -1,3 +1,4 @@
1
+ /* eslint-disable react/prop-types */
1
2
  import React from 'react';
2
3
 
3
4
  const Undo = ({
package/icons/general/text-align/center.js CHANGED
@@ -1,3 +1,4 @@
1
+ /* eslint-disable react/prop-types */
1
2
  import React from 'react';
2
3
 
3
4
  const Center = ({
package/icons/general/text-align/justify.js CHANGED
@@ -1,3 +1,4 @@
1
+ /* eslint-disable react/prop-types */
1
2
  import React from 'react';
2
3
 
3
4
  const Justify = ({
package/icons/general/text-align/left.js CHANGED
@@ -1,3 +1,4 @@
1
+ /* eslint-disable react/prop-types */
1
2
  import React from 'react';
2
3
 
3
4
  const Left = ({
package/icons/general/text-align/right.js CHANGED
@@ -1,3 +1,4 @@
1
+ /* eslint-disable react/prop-types */
1
2
  import React from 'react';
2
3
 
3
4
  const Right = ({
package/icons/menu/dhr.js CHANGED
@@ -1,3 +1,4 @@
1
+ /* eslint-disable react/display-name */
1
2
  import React, { memo } from 'react';
2
3
  export const Default = /*#__PURE__*/memo(() => {
3
4
  return /*#__PURE__*/React.createElement("svg", {
@@ -531,7 +532,7 @@ export const MHRP21N0002 = /*#__PURE__*/memo(() => {
531
532
  fill: "#ff6f00"
532
533
  })));
533
534
  });
534
- export const MHRP25N0001 = /*#__PURE__*/memo(props => {
535
+ export const MHRP25N0001 = /*#__PURE__*/memo(() => {
535
536
  return /*#__PURE__*/React.createElement("svg", {
536
537
  width: 39,
537
538
  height: 39
package/icons/menu/erp.js CHANGED
@@ -1,3 +1,4 @@
1
+ /* eslint-disable react/display-name */
1
2
  import React, { memo } from 'react';
2
3
  export const D05 = /*#__PURE__*/memo(() => {
3
4
  return /*#__PURE__*/React.createElement("svg", {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "diginet-core-ui",
3
- "version": "1.3.65",
3
+ "version": "1.3.66",
4
4
  "description": "The DigiNet core ui",
5
5
  "homepage": "https://diginet.com.vn",
6
6
  "main": "index.js",
package/readme.md CHANGED
@@ -38,6 +38,21 @@ npm test
38
38
  ```
39
39
 
40
40
  ## Changelog
41
+ ## 1.3.66
42
+ - \[Changed\]: THEME – Update makestyles
43
+ - \[Changed\]: THEME – Refactoring makeStyles
44
+ - \[Changed\]: Popover – Update Popover with new design
45
+ - \[Changed\]: Status – Update Status with new design
46
+ - \[Changed\]: Popover – Add prop clickOutsideToClose
47
+ - \[Changed\]: TextInput – Add cursor not-allow when disabled
48
+ - \[Changed\]: Tooltip – Add prop disabled
49
+ - \[Changed\]: InputBase – Allow startIcon, endIcon as node
50
+ - \[Fixed\]: TECH – Fix eslint, remove unused code
51
+ - \[Fixed\]: Popover – Fix css children height and overflow
52
+ - \[Fixed\]: Dropdown – Fix css disabled
53
+ - \[Fixed\]: Label – Fix not show required when label too long
54
+ - \[Fixed\]: Dropdown – Fix bug not reset search text when rerender
55
+
41
56
  ## 1.3.65
42
57
  - \[Changed\]: Dropdown – Add viewType none
43
58
 
package/styles/animation.js CHANGED
@@ -1,8 +1,9 @@
1
+ /* eslint-disable no-prototype-builtins */
1
2
  import { keyframes } from '@emotion/core';
2
3
  import { promisify } from '../utils';
3
4
 
4
5
  const loadStyles = css => {
5
- const head = document.head || document.getElementsByTagName('head')[0]; // no <head> node? create one...
6
+ let head = document.head || document.getElementsByTagName('head')[0]; // no <head> node? create one...
6
7
 
7
8
  if (!head) {
8
9
  head = document.createElement('head');
package/styles/color-helper.js CHANGED
@@ -1,10 +1,12 @@
1
- /**
2
- * Returns a number whose value is limited to the given range.
3
- *
4
- * @param {number} value The value to be clamped
5
- * @param {number} min The lower boundary of the output range
6
- * @param {number} max The upper boundary of the output range
7
- * @returns {number} A number in the range [min, max]
1
+ /* eslint-disable no-undef */
2
+
3
+ /**
4
+ * Returns a number whose value is limited to the given range.
5
+ *
6
+ * @param {number} value The value to be clamped
7
+ * @param {number} min The lower boundary of the output range
8
+ * @param {number} max The upper boundary of the output range
9
+ * @returns {number} A number in the range [min, max]
8
10
  */
9
11
  const clamp = (value, min = 0, max = 1) => {
10
12
  if (process.env.NODE_ENV !== 'production') {
@@ -15,11 +17,11 @@ const clamp = (value, min = 0, max = 1) => {
15
17
 
16
18
  return Math.min(Math.max(min, value), max);
17
19
  };
18
- /**
19
- * Converts a color from CSS hex format to CSS rgb format.
20
- *
21
- * @param {string} color - Hex color, i.e. #nnn or #nnnnnn
22
- * @returns {string} A CSS rgb color string
20
+ /**
21
+ * Converts a color from CSS hex format to CSS rgb format.
22
+ *
23
+ * @param {string} color - Hex color, i.e. #nnn or #nnnnnn
24
+ * @returns {string} A CSS rgb color string
23
25
  */
24
26
 
25
27
 
@@ -41,11 +43,11 @@ const intToHex = int => {
41
43
  const hex = int.toString(16);
42
44
  return hex.length === 1 ? `0${hex}` : hex;
43
45
  };
44
- /**
45
- * Converts a color from CSS rgb format to CSS hex format.
46
- *
47
- * @param {string} color - RGB color, i.e. rgb(n, n, n)
48
- * @returns {string} A CSS rgb color string, i.e. #nnnnnn
46
+ /**
47
+ * Converts a color from CSS rgb format to CSS hex format.
48
+ *
49
+ * @param {string} color - RGB color, i.e. rgb(n, n, n)
50
+ * @returns {string} A CSS rgb color string, i.e. #nnnnnn
49
51
  */
50
52
 
51
53
 
@@ -59,11 +61,11 @@ export const rgbToHex = color => {
59
61
  } = decomposeColor(color);
60
62
  return `#${values.map(n => intToHex(n)).join('')}`;
61
63
  };
62
- /**
63
- * Converts a color from CSS rgb format to CSS hex format.
64
- *
65
- * @param {string} color - RGBA color, i.e. rgba(n, n, n, f)
66
- * @returns {string} A CSS rgb A color string, i.e. #nnnnnnnn
64
+ /**
65
+ * Converts a color from CSS rgb format to CSS hex format.
66
+ *
67
+ * @param {string} color - RGBA color, i.e. rgba(n, n, n, f)
68
+ * @returns {string} A CSS rgb A color string, i.e. #nnnnnnnn
67
69
  */
68
70
 
69
71
  export const rgbaToHexA = color => {
@@ -96,11 +98,11 @@ export const rgbaToHexA = color => {
96
98
  if (a.length == 1) a = '0' + a;
97
99
  return '#' + r + g + b + a;
98
100
  };
99
- /**
100
- * Converts a color from hsl format to rgb format.
101
- *
102
- * @param {string} color - HSL color values
103
- * @returns {string} rgb color values
101
+ /**
102
+ * Converts a color from hsl format to rgb format.
103
+ *
104
+ * @param {string} color - HSL color values
105
+ * @returns {string} rgb color values
104
106
  */
105
107
 
106
108
  export const hslToRgb = color => {
@@ -128,13 +130,13 @@ export const hslToRgb = color => {
128
130
  values: rgb
129
131
  });
130
132
  };
131
- /**
132
- * Returns an object with the type and values of a color.
133
- *
134
- * Note: Does not support rgb % values.
135
- *
136
- * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
137
- * @returns {object} - A color object: {type: string, values: number[]}
133
+ /**
134
+ * Returns an object with the type and values of a color.
135
+ *
136
+ * Note: Does not support rgb % values.
137
+ *
138
+ * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
139
+ * @returns {object} - A color object: {type: string, values: number[]}
138
140
  */
139
141
 
140
142
  export const decomposeColor = color => {
@@ -160,13 +162,13 @@ export const decomposeColor = color => {
160
162
  values
161
163
  };
162
164
  };
163
- /**
164
- * Converts a color object with type and values to a string.
165
- *
166
- * @param {object} color - Decomposed color
167
- * @param {string} color.type - One of: 'rgb', 'rgba', 'hsl', 'hsla'
168
- * @param {array} color.values - [n,n,n] or [n,n,n,n]
169
- * @returns {string} A CSS color string
165
+ /**
166
+ * Converts a color object with type and values to a string.
167
+ *
168
+ * @param {object} color - Decomposed color
169
+ * @param {string} color.type - One of: 'rgb', 'rgba', 'hsl', 'hsla'
170
+ * @param {array} color.values - [n,n,n] or [n,n,n,n]
171
+ * @returns {string} A CSS color string
170
172
  */
171
173
 
172
174
  export const recomposeColor = color => {
@@ -187,14 +189,14 @@ export const recomposeColor = color => {
187
189
 
188
190
  return `${type}(${values.join(', ')})`;
189
191
  };
190
- /**
191
- * Calculates the contrast ratio between two colors.
192
- *
193
- * Formula: https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
194
- *
195
- * @param {string} foreground - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
196
- * @param {string} background - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
197
- * @returns {number} A contrast ratio value in the range 0 - 21.
192
+ /**
193
+ * Calculates the contrast ratio between two colors.
194
+ *
195
+ * Formula: https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
196
+ *
197
+ * @param {string} foreground - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
198
+ * @param {string} background - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
199
+ * @returns {number} A contrast ratio value in the range 0 - 21.
198
200
  */
199
201
 
200
202
  export const getContrastRatio = (foreground, background) => {
@@ -202,14 +204,14 @@ export const getContrastRatio = (foreground, background) => {
202
204
  const lumB = getLuminance(background);
203
205
  return (Math.max(lumA, lumB) + 0.05) / (Math.min(lumA, lumB) + 0.05);
204
206
  };
205
- /**
206
- * The relative brightness of any point in a color space,
207
- * normalized to 0 for darkest black and 1 for lightest white.
208
- *
209
- * Formula: https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
210
- *
211
- * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
212
- * @returns {number} The relative brightness of the color in the range 0 - 1
207
+ /**
208
+ * The relative brightness of any point in a color space,
209
+ * normalized to 0 for darkest black and 1 for lightest white.
210
+ *
211
+ * Formula: https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
212
+ *
213
+ * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
214
+ * @returns {number} The relative brightness of the color in the range 0 - 1
213
215
  */
214
216
 
215
217
  export const getLuminance = color => {
@@ -223,25 +225,25 @@ export const getLuminance = color => {
223
225
 
224
226
  return Number((0.2126 * rgb[0] + 0.7152 * rgb[1] + 0.0722 * rgb[2]).toFixed(3));
225
227
  };
226
- /**
227
- * Darken or lighten a color, depending on its luminance.
228
- * Light colors are darkened, dark colors are lightened.
229
- *
230
- * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
231
- * @param {number} coefficient=0.15 - multiplier in the range 0 - 1
232
- * @returns {string} A CSS color string. Hex input values are returned as rgb
228
+ /**
229
+ * Darken or lighten a color, depending on its luminance.
230
+ * Light colors are darkened, dark colors are lightened.
231
+ *
232
+ * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
233
+ * @param {number} coefficient=0.15 - multiplier in the range 0 - 1
234
+ * @returns {string} A CSS color string. Hex input values are returned as rgb
233
235
  */
234
236
 
235
237
  export const emphasize = (color, coefficient = 0.15) => {
236
238
  return getLuminance(color) > 0.5 ? darken(color, coefficient) : lighten(color, coefficient);
237
239
  };
238
- /**
239
- * Set the absolute transparency of a color.
240
- * Any existing alpha values are overwritten.
241
- *
242
- * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
243
- * @param {number} value - value to set the alpha channel to in the range 0 -1
244
- * @returns {string} A CSS color string. Hex input values are returned as rgb
240
+ /**
241
+ * Set the absolute transparency of a color.
242
+ * Any existing alpha values are overwritten.
243
+ *
244
+ * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
245
+ * @param {number} value - value to set the alpha channel to in the range 0 -1
246
+ * @returns {string} A CSS color string. Hex input values are returned as rgb
245
247
  */
246
248
 
247
249
  export const fade = (color, value) => {
@@ -255,12 +257,12 @@ export const fade = (color, value) => {
255
257
  color.values[3] = value;
256
258
  return recomposeColor(color);
257
259
  };
258
- /**
259
- * Darkens a color.
260
- *
261
- * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
262
- * @param {number} coefficient - multiplier in the range 0 - 1
263
- * @returns {string} A CSS color string. Hex input values are returned as rgb
260
+ /**
261
+ * Darkens a color.
262
+ *
263
+ * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
264
+ * @param {number} coefficient - multiplier in the range 0 - 1
265
+ * @returns {string} A CSS color string. Hex input values are returned as rgb
264
266
  */
265
267
 
266
268
  export const darken = (color, coefficient) => {
@@ -279,12 +281,12 @@ export const darken = (color, coefficient) => {
279
281
 
280
282
  return recomposeColor(color);
281
283
  };
282
- /**
283
- * Lightens a color.
284
- *
285
- * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
286
- * @param {number} coefficient - multiplier in the range 0 - 1
287
- * @returns {string} A CSS color string. Hex input values are returned as rgb
284
+ /**
285
+ * Lightens a color.
286
+ *
287
+ * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
288
+ * @param {number} coefficient - multiplier in the range 0 - 1
289
+ * @returns {string} A CSS color string. Hex input values are returned as rgb
288
290
  */
289
291
 
290
292
  export const lighten = (color, coefficient) => {
@@ -303,22 +305,22 @@ export const lighten = (color, coefficient) => {
303
305
 
304
306
  return recomposeColor(color);
305
307
  };
306
- /**
307
- * Validate a color string.
308
- *
309
- * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
310
- * @returns {boolean} is a color
308
+ /**
309
+ * Validate a color string.
310
+ *
311
+ * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
312
+ * @returns {boolean} is a color
311
313
  */
312
314
 
313
315
  export const isColor = color => {
314
- const regex = /(^#([0-9a-f]{3}|[0-9a-f]{4}|[0-9a-f]{6}|[0-9a-f]{8})$|^(rgb|hsl)a\((\d{1,3}%?,\s?){3}(1|0|0?\.\d+)\)$|^(rgb|hsl)\(\d{1,3}%?(,\s?\d{1,3}%?){2}\)$)/igm;
316
+ const regex = /(^#([0-9a-f]{3}|[0-9a-f]{4}|[0-9a-f]{6}|[0-9a-f]{8})$|^(rgb|hsl)a\((\d{1,3}%?,\s?){3}(1|0|0?\.\d+)\)$|^(rgb|hsl)\(\d{1,3}%?(,\s?\d{1,3}%?){2}\)$)/gim;
315
317
  return regex.test(color);
316
318
  };
317
- /**
318
- * Detect a color string type.
319
- *
320
- * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
321
- * @returns {string | false} color type, string or false
319
+ /**
320
+ * Detect a color string type.
321
+ *
322
+ * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
323
+ * @returns {string | false} color type, string or false
322
324
  */
323
325
 
324
326
  export const detectColor = color => {
@@ -333,11 +335,11 @@ export const detectColor = color => {
333
335
 
334
336
  return null;
335
337
  };
336
- /**
337
- * Validate a color name.
338
- *
339
- * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
340
- * @returns {boolean} is a color
338
+ /**
339
+ * Validate a color name.
340
+ *
341
+ * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
342
+ * @returns {boolean} is a color
341
343
  */
342
344
 
343
345
  export const isColorName = color => {
@@ -345,11 +347,11 @@ export const isColorName = color => {
345
347
  ctx.fillStyle = color;
346
348
  return ctx.fillStyle === '#000000' ? false : ctx.fillStyle;
347
349
  };
348
- /**
349
- * Convert from #ffffff to rgba()
350
- * @param hex color - #ffffff
351
- * @param {number} alpha - 0.5
352
- * @returns {string} color - rgba()
350
+ /**
351
+ * Convert from #ffffff to rgba()
352
+ * @param hex color - #ffffff
353
+ * @param {number} alpha - 0.5
354
+ * @returns {string} color - rgba()
353
355
  */
354
356
 
355
357
  export const hexToRGBA = (hex, alpha) => {
@@ -360,8 +362,8 @@ export const hexToRGBA = (hex, alpha) => {
360
362
  b = parseInt(hex.slice(5, 7), 16);
361
363
 
362
364
  if (alpha) {
363
- return "rgba(" + r + ", " + g + ", " + b + ", " + alpha + ")";
365
+ return 'rgba(' + r + ', ' + g + ', ' + b + ', ' + alpha + ')';
364
366
  } else {
365
- return "rgb(" + r + ", " + g + ", " + b + ")";
367
+ return 'rgb(' + r + ', ' + g + ', ' + b + ')';
366
368
  }
367
369
  };
package/styles/font.js CHANGED
@@ -1,3 +1,4 @@
1
+ /* eslint-disable no-undef */
1
2
  export const fontSizes = {
2
3
  xsmall: '12px',
3
4
  small: '14px',
@@ -8,10 +9,10 @@ export const fontSizes = {
8
9
  };
9
10
  export const font = {
10
11
  fontFamily: `"SF Pro Display"`,
11
- fontFamilyLink: require("../assets/fonts/SF-Pro-Display-Regular.otf"),
12
+ fontFamilyLink: require('../assets/fonts/SF-Pro-Display-Regular.otf'),
12
13
  fontFamilyMedium: `"SF Pro Display Medium"`,
13
- fontFamilyMediumLink: require("../assets/fonts/SF-Pro-Display-Medium.otf"),
14
+ fontFamilyMediumLink: require('../assets/fonts/SF-Pro-Display-Medium.otf'),
14
15
  fontFamilyBold: `"SF Pro Display Bold"`,
15
- fontFamilyBoldLink: require("../assets/fonts/SF-Pro-Display-Bold.otf"),
16
- fontSize: "16px"
16
+ fontFamilyBoldLink: require('../assets/fonts/SF-Pro-Display-Bold.otf'),
17
+ fontSize: '16px'
17
18
  };
package/theme/index.js CHANGED
@@ -1,5 +1,3 @@
1
1
  export { default as ThemeProvider } from './theme-provider';
2
- export { default as withTheme } from './with-theme';
3
2
  export { useTheme } from './set-theme';
4
- export { default as makeStyles } from './make-styles';
5
- export { default as withStyles } from './with-styles';
3
+ export { default as makeStyles } from './make-styles';
package/theme/make-styles.js CHANGED
@@ -1,112 +1,32 @@
1
- import { css } from '@emotion/core';
1
+ import createCache from '@emotion/cache';
2
+ import { insertStyles } from '@emotion/utils';
3
+ import { serializeStyles } from '@emotion/serialize';
2
4
  import theme from './settings';
3
- let makeStylesEls = [];
5
+ export const makeStylesCache = createCache({
6
+ key: 'css'
7
+ });
4
8
 
5
- const setMakeStylesEls = value => {
6
- makeStylesEls = value;
7
- };
8
-
9
- export { makeStylesEls, setMakeStylesEls };
10
-
11
- const makeStyle = obj => {
12
- if (typeof obj === 'function') {
13
- obj = obj(theme);
14
- }
15
-
16
- return props => {
17
- const classes = {};
18
- Object.keys(obj).forEach(key => {
19
- let CSS = obj[key];
20
-
21
- if (typeof CSS === 'function') {
22
- CSS = CSS(props);
23
- }
24
-
25
- CSS = css(CSS);
26
- const className = `css-${CSS.name}`;
27
- const style = CSS.styles;
28
- separateStyle(className, style);
29
- classes[key] = className;
30
- });
31
- return classes;
32
- };
33
- };
34
-
35
- const separateStyle = (className, style) => {
36
- const styles = [];
37
-
38
- while (style.includes('{')) {
39
- const start = style.match(/[^;]+\{/).index;
40
- const end = getEndBraces(style, style.indexOf('{') + 1);
41
- styles.push(style.slice(start, end + 1));
42
- style = style.slice(0, start) + style.slice(end + 1);
43
- }
44
-
45
- if (style) {
46
- if (style.includes('content:;')) {
47
- style = style.replace('content:;', 'content:"";');
48
- }
9
+ const makeStyles = styles => {
10
+ return (props = {}) => {
11
+ const cache = makeStylesCache;
49
12
 
50
- createStyle(className, style);
51
- }
52
-
53
- if (styles.length) {
54
- styles.forEach(style => {
55
- const indexBraces = style.indexOf('{');
56
- const childClass = style.slice(0, indexBraces);
57
- style = style.slice(indexBraces + 1, style.length - 1);
58
- const separateClass = (childClass[0] === '&' ? '' : ' ') + childClass.replace('&', '');
59
- let newClass = '';
60
-
61
- if (separateClass.includes('@media')) {
62
- newClass = separateClass + '{.' + className;
63
- style += '}';
64
- } else {
65
- newClass = className + separateClass;
66
- }
67
-
68
- separateStyle(newClass, style);
69
- });
70
- }
71
- };
72
-
73
- const createStyle = (className, style) => {
74
- const styleInnerHTML = `${/@media/.test(className) ? '' : '.'}${className} {${style}}`; // Nếu đã có style trong head thì không thêm vào nữa
75
-
76
- if (checkExist(styleInnerHTML)) return;
77
- const styleEl = document.createElement('style');
78
- styleEl.type = 'text/css';
79
- styleEl.dataMeta = 'makeStyles';
80
- document.head.appendChild(styleEl);
81
- styleEl.appendChild(document.createTextNode(styleInnerHTML));
82
- makeStylesEls.push(styleEl);
83
- };
84
-
85
- const getEndBraces = (str, start) => {
86
- let temp = 0;
87
-
88
- for (let i = start; i < str.length; i++) {
89
- if (str[i] === '}') {
90
- if (!temp) {
91
- temp = i;
92
- break;
93
- } else {
94
- temp--;
95
- }
96
- } else if (str[i] === '{') {
97
- temp++;
13
+ if (typeof styles === 'function') {
14
+ styles = styles(theme);
98
15
  }
99
- }
100
16
 
101
- return temp;
102
- };
103
-
104
- const checkExist = styleInnerHTML => {
105
- let isExist = false;
106
- makeStylesEls.some(el => {
107
- if (el.innerHTML === styleInnerHTML) isExist = true;
108
- });
109
- return isExist;
17
+ const result = Object.keys(styles).reduce((acc, key) => {
18
+ const _styles = { ...styles[key]
19
+ };
20
+ Object.keys(_styles).forEach(item => {
21
+ if (typeof _styles[item] === 'function') _styles[item] = _styles[item](props);
22
+ });
23
+ const serialized = serializeStyles([_styles], cache.registered, props);
24
+ insertStyles(cache, serialized, false);
25
+ acc[key] = `DGN-UI-makeStyles-${key} ${cache.key || 'css'}-${serialized.name}`;
26
+ return acc;
27
+ }, {});
28
+ return result;
29
+ };
110
30
  };
111
31
 
112
- export default makeStyle;
32
+ export default makeStyles;
package/theme/theme-provider.js CHANGED
@@ -4,7 +4,6 @@
4
4
  import { memo, useEffect } from 'react';
5
5
  import { jsx, css } from '@emotion/core';
6
6
  import { setTheme } from './set-theme';
7
- import { makeStylesEls, setMakeStylesEls } from './make-styles';
8
7
  import { string, object, node } from 'prop-types';
9
8
  import { font } from '../styles/font';
10
9
  const {
@@ -49,14 +48,6 @@ const ThemeProvider = /*#__PURE__*/memo(({
49
48
  className,
50
49
  children
51
50
  }) => {
52
- useEffect(() => {
53
- setMakeStylesEls([]);
54
- return () => {
55
- if (makeStylesEls.length) {
56
- makeStylesEls.forEach(el => el && el.remove && el.remove());
57
- }
58
- };
59
- }, []);
60
51
  useEffect(() => {
61
52
  setTheme(theme);
62
53
  }, [theme]);
package/utils/console.js CHANGED
@@ -1,4 +1,3 @@
1
- /* global console */
2
1
  import { isFunction } from './type';
3
2
 
4
3
  const noop = () => {};
package/utils/error/error.js CHANGED
@@ -1,9 +1,8 @@
1
- /* eslint-disable import/no-commonjs */
2
1
  import { extend } from '../object/extend';
3
2
  import { logger } from '../console';
4
3
  import { format } from '../string/string';
5
- /**
6
- * future
4
+ /**
5
+ * future
7
6
  */
8
7
 
9
8
  const ERROR_URL = 'http://core.diginet.com.vn/ui/error/';