@ntbjs/react-components 1.0.0 → 1.1.0-beta.2

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 (46) hide show
  1. package/{AssetGallery-2d26f3cf.js → AssetGallery-7ff60131.js} +10 -5
  2. package/AssetPreviewTopBar-a172fc5c.js +105 -0
  3. package/Badge-86593df4.js +146 -0
  4. package/Button-00ce7d0f.js +298 -0
  5. package/CompactStarRating-f9997240.js +242 -0
  6. package/CompactTextInput-f00e46a3.js +269 -0
  7. package/ContextMenu-a68d4f28.js +32 -0
  8. package/InputGroup-66dd343c.js +28 -0
  9. package/{Popover-d3e2f6c0.js → Popover-616682bf.js} +39 -9
  10. package/SectionSeparator-12aff748.js +37 -0
  11. package/Tab-06b7a58d.js +30 -0
  12. package/Tabs-cfbf45fe.js +99 -0
  13. package/{TextArea-52cf4c0a.js → TextArea-06d9e80b.js} +51 -20
  14. package/{TextInput-a7c32f5f.js → TextInput-e4c6d536.js} +42 -22
  15. package/{Tooltip-f95a39f4.js → Tooltip-860530ff.js} +1 -1
  16. package/data/Badge/index.js +10 -0
  17. package/data/Popover/index.js +1 -1
  18. package/data/Tab/index.js +10 -0
  19. package/data/Tabs/index.js +12 -0
  20. package/data/index.js +8 -2
  21. package/edit-note-c47d292e.js +41 -0
  22. package/icons/arrow-back.svg +4 -0
  23. package/icons/close.svg +4 -0
  24. package/icons/delete-context-menu.svg +4 -0
  25. package/icons/design-services.svg +4 -0
  26. package/icons/edit-note.svg +4 -0
  27. package/icons/expand-more.svg +4 -0
  28. package/icons/link.svg +4 -0
  29. package/icons/star-filled.svg +3 -0
  30. package/icons/star.svg +3 -0
  31. package/icons/triangle-right.svg +4 -0
  32. package/inputs/Button/index.js +6 -1
  33. package/inputs/CompactStarRating/index.js +11 -0
  34. package/inputs/CompactTextInput/index.js +20 -0
  35. package/inputs/TextArea/index.js +2 -1
  36. package/inputs/TextInput/index.js +2 -1
  37. package/inputs/index.js +16 -4
  38. package/layout/InputGroup/index.js +10 -0
  39. package/layout/SectionSeparator/index.js +10 -0
  40. package/layout/index.js +14 -0
  41. package/package.json +1 -1
  42. package/widgets/AssetGallery/index.js +15 -8
  43. package/widgets/AssetPreview/AssetPreviewTopBar/index.js +10 -0
  44. package/widgets/ContextMenu/index.js +10 -0
  45. package/widgets/index.js +18 -8
  46. package/Button-0d728b52.js +0 -156
@@ -0,0 +1,10 @@
1
+ 'use strict';
2
+
3
+ var Tab = require('../../Tab-06b7a58d.js');
4
+ require('../../defaultTheme-870f7df1.js');
5
+ require('styled-components');
6
+ require('react');
7
+
8
+
9
+
10
+ module.exports = Tab.Tab;
@@ -0,0 +1,12 @@
1
+ 'use strict';
2
+
3
+ var Tabs = require('../../Tabs-cfbf45fe.js');
4
+ require('../../defaultTheme-870f7df1.js');
5
+ require('styled-components');
6
+ require('react');
7
+ require('../../Tab-06b7a58d.js');
8
+ require('lodash');
9
+
10
+
11
+
12
+ module.exports = Tabs.Tabs;
package/data/index.js CHANGED
@@ -2,8 +2,11 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- var Popover = require('../Popover-d3e2f6c0.js');
6
- var Tooltip = require('../Tooltip-f95a39f4.js');
5
+ var Popover = require('../Popover-616682bf.js');
6
+ var Tooltip = require('../Tooltip-860530ff.js');
7
+ var Tab = require('../Tab-06b7a58d.js');
8
+ var Tabs = require('../Tabs-cfbf45fe.js');
9
+ var Badge = require('../Badge-86593df4.js');
7
10
  require('../defaultTheme-870f7df1.js');
8
11
  require('styled-components');
9
12
  require('react');
@@ -15,3 +18,6 @@ require('@tippyjs/react');
15
18
 
16
19
  exports.Popover = Popover.Popover;
17
20
  exports.Tooltip = Tooltip.Tooltip;
21
+ exports.Tab = Tab.Tab;
22
+ exports.Tabs = Tabs.Tabs;
23
+ exports.Badge = Badge.Badge;
@@ -0,0 +1,41 @@
1
+ 'use strict';
2
+
3
+ var React = require('react');
4
+
5
+ function _interopNamespace(e) {
6
+ if (e && e.__esModule) return e;
7
+ var n = Object.create(null);
8
+ if (e) {
9
+ Object.keys(e).forEach(function (k) {
10
+ if (k !== 'default') {
11
+ var d = Object.getOwnPropertyDescriptor(e, k);
12
+ Object.defineProperty(n, k, d.get ? d : {
13
+ enumerable: true,
14
+ get: function () {
15
+ return e[k];
16
+ }
17
+ });
18
+ }
19
+ });
20
+ }
21
+ n['default'] = e;
22
+ return Object.freeze(n);
23
+ }
24
+
25
+ var React__namespace = /*#__PURE__*/_interopNamespace(React);
26
+
27
+ function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
28
+
29
+ var _ref = /*#__PURE__*/React__namespace.createElement("path", {
30
+ fill: "currentColor",
31
+ d: "M7 12v-1.77l4.42-4.42 1.77 1.77L8.77 12H7zM0 7.75v-1.5h6v1.5H0zM13.77 7L12 5.23l.67-.67c.15-.15.33-.23.53-.23s.38.08.53.23l.71.71c.15.15.23.33.23.53s-.08.38-.23.53l-.67.67zM0 4.63v-1.5h9v1.5H0zM0 1.5V0h9v1.5H0z"
32
+ });
33
+
34
+ function SvgEditNote(props) {
35
+ return /*#__PURE__*/React__namespace.createElement("svg", _extends({
36
+ xmlns: "http://www.w3.org/2000/svg",
37
+ viewBox: "0 0 14.67 12"
38
+ }, props), _ref);
39
+ }
40
+
41
+ exports.SvgEditNote = SvgEditNote;
@@ -0,0 +1,4 @@
1
+ <?xml version="1.0" encoding="UTF-8"?>
2
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
3
+ <path fill="currentColor" d="m16,32L0,16,16,0l2.1,2.1L5.7,14.5h26.3v3H5.7l12.4,12.4-2.1,2.1Z"/>
4
+ </svg>
@@ -0,0 +1,4 @@
1
+ <?xml version="1.0" encoding="UTF-8"?>
2
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27.3 27.3">
3
+ <path fill="currentColor" d="m2.1,27.3l-2.1-2.1,11.55-11.55L0,2.1,2.1,0l11.55,11.55L25.2,0l2.1,2.1-11.55,11.55,11.55,11.55-2.1,2.1-11.55-11.55L2.1,27.3Z"/>
4
+ </svg>
@@ -0,0 +1,4 @@
1
+ <?xml version="1.0" encoding="UTF-8"?>
2
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 36">
3
+ <path fill="currentColor" d="m5.05,36c-.83,0-1.53-.29-2.12-.88s-.88-1.29-.88-2.12V4.5H0V1.5h9.4V0h13.2v1.5h9.4v3h-2.05v28.5c0,.8-.3,1.5-.9,2.1s-1.3.9-2.1.9H5.05ZM26.95,4.5H5.05v28.5h21.9V4.5ZM10.35,28.7h3V8.75h-3v19.95Zm8.3,0h3V8.75h-3v19.95ZM5.05,4.5v28.5V4.5Z"/>
4
+ </svg>
@@ -0,0 +1,4 @@
1
+ <?xml version="1.0" encoding="UTF-8"?>
2
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 38.75 38.7">
3
+ <path fill="currentColor" d="m32.9,13.6l-7.75-7.75,3.5-3.5c.57-.57,1.27-.85,2.1-.85s1.53.28,2.1.85l3.55,3.55c.57.57.85,1.27.85,2.1s-.28,1.53-.85,2.1l-3.5,3.5ZM1.35,37.4v-7.8l9.7-9.7L0,8.8,8.7,0l11.15,11.15,5.3-5.3,7.75,7.75-5.3,5.3,11.15,11.15-8.75,8.65-11.1-11.05-9.75,9.75H1.35Zm11.85-19.65l4.5-4.5-3.65-3.65-2.4,2.4-2.1-2.1,2.4-2.4-3.2-3.2-4.5,4.5,8.95,8.95Zm16.7,16.75l4.5-4.5-3.2-3.2-2.4,2.4-2.1-2.1,2.4-2.4-3.65-3.65-4.5,4.5,8.95,8.95Zm-25.55-.1h3.5L28.6,13.65l-3.5-3.5L4.35,30.9v3.5Z"/>
4
+ </svg>
@@ -0,0 +1,4 @@
1
+ <?xml version="1.0" encoding="UTF-8"?>
2
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14.67 12">
3
+ <path fill="currentColor" d="m7,12v-1.77l4.42-4.42,1.77,1.77-4.42,4.42h-1.77ZM0,7.75v-1.5h6v1.5H0Zm13.77-.75l-1.77-1.77.67-.67c.15-.15.33-.23.53-.23s.38.08.53.23l.71.71c.15.15.23.33.23.53s-.08.38-.23.53l-.67.67ZM0,4.63v-1.5h9v1.5H0ZM0,1.5V0h9v1.5H0Z"/>
4
+ </svg>
@@ -0,0 +1,4 @@
1
+ <?xml version="1.0" encoding="UTF-8"?>
2
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 14.15">
3
+ <path fill="currentColor" d="m12,14.15L0,2.15,2.15,0l9.85,9.9L21.85.05l2.15,2.15-12,11.95Z"/>
4
+ </svg>
package/icons/link.svg ADDED
@@ -0,0 +1,4 @@
1
+ <?xml version="1.0" encoding="UTF-8"?>
2
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 10">
3
+ <path fill="currentColor" d="m9,10h-4c-1.38,0-2.56-.49-3.54-1.46s-1.46-2.15-1.46-3.54S.49,2.44,1.46,1.46,3.62,0,5,0h4v2h-4c-.83,0-1.54.29-2.13.88s-.88,1.29-.88,2.13.29,1.54.88,2.13,1.29.88,2.13.88h4v2Zm-3-4v-2h8v2H6Zm5,4v-2h4c.83,0,1.54-.29,2.13-.88s.88-1.29.88-2.13-.29-1.54-.88-2.13-1.29-.88-2.13-.88h-4V0h4c1.38,0,2.56.49,3.54,1.46s1.46,2.15,1.46,3.54-.49,2.56-1.46,3.54-2.15,1.46-3.54,1.46h-4Z"/>
4
+ </svg>
@@ -0,0 +1,3 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 38">
2
+ <path fill="currentColor" d="m7.65,38l3.25-14.05L0,14.5l14.4-1.25L20,0l5.6,13.25,14.4,1.25-10.9,9.45,3.25,14.05-12.35-7.45-12.35,7.45Z"/>
3
+ </svg>
package/icons/star.svg ADDED
@@ -0,0 +1,3 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 38">
2
+ <path fill="currentColor" d="m12.2,31.8l7.8-4.7,7.9,4.8-2.1-8.9,6.9-6-9.1-.8-3.6-8.5-3.5,8.4-9.1.8,6.9,6-2.1,8.9Zm-4.5,6.2l3.3-14L0,14.5l14.4-1.2L20,0l5.6,13.2,14.4,1.3-10.9,9.5,3.3,14-12.4-7.4-12.3,7.4Z"/>
3
+ </svg>
@@ -0,0 +1,4 @@
1
+ <?xml version="1.0" encoding="UTF-8"?>
2
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 20">
3
+ <path fill="currentColor" d="m0,20V0l10,10L0,20Z"/>
4
+ </svg>
@@ -1,9 +1,14 @@
1
1
  'use strict';
2
2
 
3
- var Button = require('../../Button-0d728b52.js');
3
+ var Button = require('../../Button-00ce7d0f.js');
4
4
  require('../../defaultTheme-870f7df1.js');
5
5
  require('styled-components');
6
6
  require('react');
7
+ require('../../Popover-616682bf.js');
8
+ require('lodash');
9
+ require('polished');
10
+ require('@tippyjs/react');
11
+ require('../../ContextMenu-a68d4f28.js');
7
12
 
8
13
 
9
14
 
@@ -0,0 +1,11 @@
1
+ 'use strict';
2
+
3
+ var CompactStarRating = require('../../CompactStarRating-f9997240.js');
4
+ require('../../defaultTheme-870f7df1.js');
5
+ require('styled-components');
6
+ require('react');
7
+ require('lodash');
8
+
9
+
10
+
11
+ module.exports = CompactStarRating.CompactStarRating;
@@ -0,0 +1,20 @@
1
+ 'use strict';
2
+
3
+ var CompactTextInput = require('../../CompactTextInput-f00e46a3.js');
4
+ require('../../defaultTheme-870f7df1.js');
5
+ require('styled-components');
6
+ require('react');
7
+ require('nanoid');
8
+ require('lodash');
9
+ require('../../edit-note-c47d292e.js');
10
+ require('../../Popover-616682bf.js');
11
+ require('polished');
12
+ require('@tippyjs/react');
13
+ require('../../Tooltip-860530ff.js');
14
+ require('../../Tab-06b7a58d.js');
15
+ require('../../Tabs-cfbf45fe.js');
16
+ require('../../Badge-86593df4.js');
17
+
18
+
19
+
20
+ module.exports = CompactTextInput.CompactTextInput;
@@ -1,11 +1,12 @@
1
1
  'use strict';
2
2
 
3
- var TextArea = require('../../TextArea-52cf4c0a.js');
3
+ var TextArea = require('../../TextArea-06d9e80b.js');
4
4
  require('../../defaultTheme-870f7df1.js');
5
5
  require('styled-components');
6
6
  require('react');
7
7
  require('nanoid');
8
8
  require('lodash');
9
+ require('../../edit-note-c47d292e.js');
9
10
 
10
11
 
11
12
 
@@ -1,11 +1,12 @@
1
1
  'use strict';
2
2
 
3
- var TextInput = require('../../TextInput-a7c32f5f.js');
3
+ var TextInput = require('../../TextInput-e4c6d536.js');
4
4
  require('../../defaultTheme-870f7df1.js');
5
5
  require('styled-components');
6
6
  require('react');
7
7
  require('nanoid');
8
8
  require('lodash');
9
+ require('../../edit-note-c47d292e.js');
9
10
 
10
11
 
11
12
 
package/inputs/index.js CHANGED
@@ -3,24 +3,36 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var ActionButton = require('../ActionButton-90485300.js');
6
- var Button = require('../Button-0d728b52.js');
6
+ var Button = require('../Button-00ce7d0f.js');
7
7
  var Checkbox = require('../Checkbox-50f1f3c7.js');
8
+ var CompactStarRating = require('../CompactStarRating-f9997240.js');
9
+ var CompactTextInput = require('../CompactTextInput-f00e46a3.js');
8
10
  var Radio = require('../Radio-0b46b2a8.js');
9
- var TextArea = require('../TextArea-52cf4c0a.js');
10
- var TextInput = require('../TextInput-a7c32f5f.js');
11
+ var TextArea = require('../TextArea-06d9e80b.js');
12
+ var TextInput = require('../TextInput-e4c6d536.js');
11
13
  var Switch = require('../Switch-aa384260.js');
12
14
  require('../defaultTheme-870f7df1.js');
13
15
  require('styled-components');
14
16
  require('react');
15
- require('nanoid');
17
+ require('../Popover-616682bf.js');
16
18
  require('lodash');
17
19
  require('polished');
20
+ require('@tippyjs/react');
21
+ require('../ContextMenu-a68d4f28.js');
22
+ require('nanoid');
23
+ require('../edit-note-c47d292e.js');
24
+ require('../Tooltip-860530ff.js');
25
+ require('../Tab-06b7a58d.js');
26
+ require('../Tabs-cfbf45fe.js');
27
+ require('../Badge-86593df4.js');
18
28
 
19
29
 
20
30
 
21
31
  exports.ActionButton = ActionButton.ActionButton;
22
32
  exports.Button = Button.Button;
23
33
  exports.Checkbox = Checkbox.Checkbox;
34
+ exports.CompactStarRating = CompactStarRating.CompactStarRating;
35
+ exports.CompactTextInput = CompactTextInput.CompactTextInput;
24
36
  exports.Radio = Radio.Radio;
25
37
  exports.TextArea = TextArea.TextArea;
26
38
  exports.TextInput = TextInput.TextInput;
@@ -0,0 +1,10 @@
1
+ 'use strict';
2
+
3
+ var InputGroup = require('../../InputGroup-66dd343c.js');
4
+ require('../../defaultTheme-870f7df1.js');
5
+ require('styled-components');
6
+ require('react');
7
+
8
+
9
+
10
+ module.exports = InputGroup.InputGroup;
@@ -0,0 +1,10 @@
1
+ 'use strict';
2
+
3
+ var SectionSeparator = require('../../SectionSeparator-12aff748.js');
4
+ require('../../defaultTheme-870f7df1.js');
5
+ require('styled-components');
6
+ require('react');
7
+
8
+
9
+
10
+ module.exports = SectionSeparator.SectionSeparator;
@@ -0,0 +1,14 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ var InputGroup = require('../InputGroup-66dd343c.js');
6
+ var SectionSeparator = require('../SectionSeparator-12aff748.js');
7
+ require('../defaultTheme-870f7df1.js');
8
+ require('styled-components');
9
+ require('react');
10
+
11
+
12
+
13
+ exports.InputGroup = InputGroup.InputGroup;
14
+ exports.SectionSeparator = SectionSeparator.SectionSeparator;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ntbjs/react-components",
3
- "version": "1.0.0",
3
+ "version": "1.1.0-beta.2",
4
4
  "description": "NTBs common front-end design utilities and React components.",
5
5
  "scripts": {
6
6
  "build": "cross-env NODE_ENV=production rollup -c",
@@ -1,24 +1,31 @@
1
1
  'use strict';
2
2
 
3
- var AssetGallery = require('../../AssetGallery-2d26f3cf.js');
3
+ var AssetGallery = require('../../AssetGallery-7ff60131.js');
4
4
  require('../../defaultTheme-870f7df1.js');
5
5
  require('styled-components');
6
6
  require('react');
7
7
  require('lodash');
8
- require('../../TextInput-a7c32f5f.js');
8
+ require('../../TextInput-e4c6d536.js');
9
9
  require('nanoid');
10
+ require('../../edit-note-c47d292e.js');
10
11
  require('resize-observer-polyfill');
11
12
  require('react-lazy-load-image-component');
12
13
  require('../../ActionButton-90485300.js');
13
- require('../../Button-0d728b52.js');
14
+ require('../../Button-00ce7d0f.js');
15
+ require('../../Popover-616682bf.js');
16
+ require('polished');
17
+ require('@tippyjs/react');
18
+ require('../../ContextMenu-a68d4f28.js');
14
19
  require('../../Checkbox-50f1f3c7.js');
20
+ require('../../CompactStarRating-f9997240.js');
21
+ require('../../CompactTextInput-f00e46a3.js');
22
+ require('../../Tooltip-860530ff.js');
23
+ require('../../Tab-06b7a58d.js');
24
+ require('../../Tabs-cfbf45fe.js');
25
+ require('../../Badge-86593df4.js');
15
26
  require('../../Radio-0b46b2a8.js');
16
- require('polished');
17
- require('../../TextArea-52cf4c0a.js');
27
+ require('../../TextArea-06d9e80b.js');
18
28
  require('../../Switch-aa384260.js');
19
- require('../../Popover-d3e2f6c0.js');
20
- require('@tippyjs/react');
21
- require('../../Tooltip-f95a39f4.js');
22
29
 
23
30
 
24
31
 
@@ -0,0 +1,10 @@
1
+ 'use strict';
2
+
3
+ var AssetPreviewTopBar = require('../../../AssetPreviewTopBar-a172fc5c.js');
4
+ require('../../../defaultTheme-870f7df1.js');
5
+ require('styled-components');
6
+ require('react');
7
+
8
+
9
+
10
+ module.exports = AssetPreviewTopBar.AssetPreviewTopBar;
@@ -0,0 +1,10 @@
1
+ 'use strict';
2
+
3
+ var ContextMenu = require('../../ContextMenu-a68d4f28.js');
4
+ require('../../defaultTheme-870f7df1.js');
5
+ require('styled-components');
6
+ require('react');
7
+
8
+
9
+
10
+ module.exports = ContextMenu.ContextMenu;
package/widgets/index.js CHANGED
@@ -2,26 +2,36 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- var AssetGallery = require('../AssetGallery-2d26f3cf.js');
5
+ var AssetGallery = require('../AssetGallery-7ff60131.js');
6
+ var ContextMenu = require('../ContextMenu-a68d4f28.js');
7
+ var AssetPreviewTopBar = require('../AssetPreviewTopBar-a172fc5c.js');
6
8
  require('../defaultTheme-870f7df1.js');
7
9
  require('styled-components');
8
10
  require('react');
9
11
  require('lodash');
10
- require('../TextInput-a7c32f5f.js');
12
+ require('../TextInput-e4c6d536.js');
11
13
  require('nanoid');
14
+ require('../edit-note-c47d292e.js');
12
15
  require('resize-observer-polyfill');
13
16
  require('react-lazy-load-image-component');
14
17
  require('../ActionButton-90485300.js');
15
- require('../Button-0d728b52.js');
18
+ require('../Button-00ce7d0f.js');
19
+ require('../Popover-616682bf.js');
20
+ require('polished');
21
+ require('@tippyjs/react');
16
22
  require('../Checkbox-50f1f3c7.js');
23
+ require('../CompactStarRating-f9997240.js');
24
+ require('../CompactTextInput-f00e46a3.js');
25
+ require('../Tooltip-860530ff.js');
26
+ require('../Tab-06b7a58d.js');
27
+ require('../Tabs-cfbf45fe.js');
28
+ require('../Badge-86593df4.js');
17
29
  require('../Radio-0b46b2a8.js');
18
- require('polished');
19
- require('../TextArea-52cf4c0a.js');
30
+ require('../TextArea-06d9e80b.js');
20
31
  require('../Switch-aa384260.js');
21
- require('../Popover-d3e2f6c0.js');
22
- require('@tippyjs/react');
23
- require('../Tooltip-f95a39f4.js');
24
32
 
25
33
 
26
34
 
27
35
  exports.AssetGallery = AssetGallery.AssetGallery;
36
+ exports.ContextMenu = ContextMenu.ContextMenu;
37
+ exports.AssetPreviewTopBar = AssetPreviewTopBar.AssetPreviewTopBar;
@@ -1,156 +0,0 @@
1
- 'use strict';
2
-
3
- var defaultTheme = require('./defaultTheme-870f7df1.js');
4
- var React = require('react');
5
- var styled = require('styled-components');
6
-
7
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
8
-
9
- var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
10
- var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
11
-
12
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14;
13
- var Button$1 = styled__default['default'].button.attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n position: relative;\n border-radius: 3px;\n font-family: inherit;\n font-size: 1rem;\n font-weight: 500;\n padding: 6px 18px;\n cursor: pointer;\n background: ", ";\n border: 2px solid ", ";\n line-height: 1.2;\n transition: all 250ms, opacity 200ms;\n\n &:hover {\n background: #5a9b88;\n border-color: #5a9b88;\n }\n\n ", "\n\n && {\n ", ";\n }\n\n && {\n ", ";\n }\n\n && {\n ", ";\n }\n\n ", ";\n\n ", ";\n\n ", ";\n"])), function (props) {
14
- return props.theme.getColor('emerald-500');
15
- }, function (props) {
16
- return props.theme.getColor('emerald-500');
17
- }, function (props) {
18
- return props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('white'));
19
- }, function (props) {
20
- return props.secondary && styled.css(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n background: ", ";\n ", "\n border-color: ", ";\n\n &:hover {\n background: ", ";\n border-color: ", ";\n }\n "])), function (props) {
21
- return props.theme.getColor('gray-200');
22
- }, props.theme.themeProp('color', props.theme.getColor('gray-700'), props.theme.getColor('gray-700')), function (props) {
23
- return props.theme.getColor('gray-200');
24
- }, function (props) {
25
- return props.theme.getColor('gray-100');
26
- }, function (props) {
27
- return props.theme.getColor('gray-100');
28
- });
29
- }, function (props) {
30
- return props.outlined && styled.css(_templateObject3 || (_templateObject3 = defaultTheme._taggedTemplateLiteral(["\n background: transparent;\n border-color: ", ";\n\n ", "\n &:hover {\n border-color: ", ";\n }\n "])), props.theme.getColor('gray-200'), props.theme.themeProp('color', props.theme.getColor('emerald-500'), props.theme.getColor('emerald-500')), props.theme.getColor('gray-300'));
31
- }, function (props) {
32
- return props.outlined && props.secondary && styled.css(_templateObject4 || (_templateObject4 = defaultTheme._taggedTemplateLiteral(["\n ", "\n\n &:hover {\n background: transparent;\n }\n "])), props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('gray-700')));
33
- }, function (props) {
34
- return props.block && styled.css(_templateObject5 || (_templateObject5 = defaultTheme._taggedTemplateLiteral(["\n width: 100%;\n "])));
35
- }, function (props) {
36
- return props.disabled && styled.css(_templateObject6 || (_templateObject6 = defaultTheme._taggedTemplateLiteral(["\n opacity: 0.5;\n cursor: not-allowed;\n pointer-events: none;\n "])));
37
- }, function (props) {
38
- return props.size === 'small' && styled.css(_templateObject7 || (_templateObject7 = defaultTheme._taggedTemplateLiteral(["\n font-size: 0.875rem;\n line-height: 1.15;\n padding: 3px 12px;\n "])));
39
- });
40
- var ButtonContent = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject8 || (_templateObject8 = defaultTheme._taggedTemplateLiteral(["\n display: flex;\n justify-content: center;\n align-items: center;\n transform: scale(1);\n opacity: 1;\n transition: all 200ms;\n\n > svg {\n width: 100%;\n max-width: 16px;\n max-height: 16px;\n margin-right: 7px;\n\n ", ";\n }\n\n ", "\n"])), function (props) {
41
- return props.size === 'small' && styled.css(_templateObject9 || (_templateObject9 = defaultTheme._taggedTemplateLiteral(["\n max-width: 13px;\n max-height: 13px;\n "])));
42
- }, function (props) {
43
- return props.$loading && styled.css(_templateObject10 || (_templateObject10 = defaultTheme._taggedTemplateLiteral(["\n transform: scale(0.95);\n opacity: 0;\n "])));
44
- });
45
- var LoadingIndicator = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject11 || (_templateObject11 = defaultTheme._taggedTemplateLiteral(["\n position: absolute;\n height: 100%;\n width: 100%;\n top: 0;\n left: 0;\n padding: 4px;\n background: inherit;\n opacity: 0;\n transition: opacity 200ms;\n box-sizing: border-box;\n\n ", "\n"])), function (props) {
46
- return props.$loading && styled.css(_templateObject12 || (_templateObject12 = defaultTheme._taggedTemplateLiteral(["\n opacity: 1;\n "])));
47
- });
48
- var LoadingIndicatorSvg = styled__default['default'].svg.attrs(defaultTheme.applyDefaultTheme)(_templateObject13 || (_templateObject13 = defaultTheme._taggedTemplateLiteral(["\n height: 100%;\n color: inherit;\n transform: rotate(-88deg);\n"])));
49
- var LoadingIndicatorSvgCircle = styled__default['default'].circle.attrs(defaultTheme.applyDefaultTheme)(_templateObject14 || (_templateObject14 = defaultTheme._taggedTemplateLiteral(["\n transition: stroke-dashoffset 300ms linear;\n stroke-dasharray: 113;\n"])));
50
-
51
- var Button = React__default['default'].forwardRef(function Button(_ref, forwardedRef) {
52
- var secondary = _ref.secondary,
53
- outlined = _ref.outlined,
54
- block = _ref.block,
55
- icon = _ref.icon,
56
- size = _ref.size,
57
- disabled = _ref.disabled,
58
- loading = _ref.loading,
59
- className = _ref.className,
60
- children = _ref.children,
61
- props = defaultTheme._objectWithoutProperties(_ref, ["secondary", "outlined", "block", "icon", "size", "disabled", "loading", "className", "children"]);
62
-
63
- var _useState = React.useState(loading || false),
64
- _useState2 = defaultTheme._slicedToArray(_useState, 2),
65
- loadingState = _useState2[0],
66
- setLoadingState = _useState2[1];
67
-
68
- var _useState3 = React.useState(113),
69
- _useState4 = defaultTheme._slicedToArray(_useState3, 2),
70
- loadingStep = _useState4[0],
71
- setLoadingStep = _useState4[1];
72
-
73
- var loadingInterval = React.useRef(0);
74
-
75
- var enableLoading = function enableLoading() {
76
- loadingInterval.current = setInterval(function () {
77
- setLoadingStep(function (currentLoadingStep) {
78
- var newLoadingStep = Math.round(currentLoadingStep - 15 * currentLoadingStep / 100);
79
-
80
- if (newLoadingStep === currentLoadingStep) {
81
- clearInterval(loadingInterval.current);
82
- }
83
-
84
- return newLoadingStep;
85
- });
86
- }, 300);
87
- setLoadingState(true);
88
- };
89
-
90
- var disableLoading = function disableLoading() {
91
- clearInterval(loadingInterval.current);
92
- setLoadingStep(0);
93
- setTimeout(function () {
94
- setLoadingState(false);
95
- setLoadingStep(113);
96
- }, 500);
97
- };
98
-
99
- React.useEffect(function () {
100
- if (loading) {
101
- enableLoading();
102
- } else {
103
- disableLoading();
104
- }
105
-
106
- return function () {
107
- return clearInterval(loadingInterval.current);
108
- };
109
- }, [loading]);
110
- return React__default['default'].createElement(Button$1, defaultTheme._extends({
111
- ref: forwardedRef,
112
- secondary: secondary,
113
- outlined: outlined,
114
- block: block,
115
- size: size,
116
- disabled: disabled,
117
- className: className,
118
- "aria-busy": disabled
119
- }, props), React__default['default'].createElement(ButtonContent, {
120
- $loading: loadingState,
121
- size: size
122
- }, icon, children), React__default['default'].createElement(LoadingIndicator, {
123
- $loading: loadingState,
124
- style: {
125
- opacity: loadingState ? 1 : 0
126
- }
127
- }, React__default['default'].createElement(LoadingIndicatorSvg, {
128
- viewBox: "22 22 44 44"
129
- }, React__default['default'].createElement(LoadingIndicatorSvgCircle, {
130
- cx: "44",
131
- cy: "44",
132
- r: "18",
133
- fill: "none",
134
- strokeWidth: "4",
135
- stroke: "currentColor",
136
- style: {
137
- strokeDashoffset: "".concat(loadingStep, "px")
138
- }
139
- }))));
140
- });
141
- Button.defaultProps = {
142
- size: 'normal'
143
- };
144
- Button.propTypes = process.env.NODE_ENV !== "production" ? {
145
- secondary: defaultTheme.PropTypes.bool,
146
- outlined: defaultTheme.PropTypes.bool,
147
- block: defaultTheme.PropTypes.bool,
148
- icon: defaultTheme.PropTypes.element,
149
- size: defaultTheme.PropTypes.oneOf(['normal', 'small']),
150
- disabled: defaultTheme.PropTypes.bool,
151
- loading: defaultTheme.PropTypes.bool,
152
- className: defaultTheme.PropTypes.string,
153
- children: defaultTheme.PropTypes.any.isRequired
154
- } : {};
155
-
156
- exports.Button = Button;