@mirai/ui 1.0.240 → 1.0.242
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.
- package/build/components/Slider/Slider.js +17 -6
- package/build/components/Slider/Slider.js.map +1 -1
- package/build/components/Slider/Slider.module.css +24 -3
- package/build/components/Slider/Slider.stories.js +2 -2
- package/build/components/Slider/Slider.stories.js.map +1 -1
- package/build/components/Slider/__tests__/__snapshots__/Slider.test.js.snap +148 -5
- package/build/components/Tooltip/Tooltip.js +10 -7
- package/build/components/Tooltip/Tooltip.js.map +1 -1
- package/build/components/Tooltip/__tests__/__snapshots__/Tooltip.test.jsx.snap +18 -10
- package/build/primitives/Icon/Icon.constants.js +3 -0
- package/build/primitives/Icon/Icon.constants.js.map +1 -1
- package/build/primitives/Icon/__tests__/__snapshots__/Icon.test.js.snap +26 -0
- package/package.json +1 -1
|
@@ -13,7 +13,7 @@ var _primitives = require("../../primitives");
|
|
|
13
13
|
var _helpers2 = require("./helpers");
|
|
14
14
|
var _Slider = require("./Slider.constants");
|
|
15
15
|
var _SliderModule = _interopRequireDefault(require("./Slider.module.css"));
|
|
16
|
-
var _excluded = ["auto", "captions", "height", "images", "index", "width", "onChange"];
|
|
16
|
+
var _excluded = ["auto", "captions", "height", "images", "index", "width", "onChange", "onCounter"];
|
|
17
17
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
18
18
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
19
19
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
@@ -48,6 +48,7 @@ var Slider = function Slider(_ref) {
|
|
|
48
48
|
propWidth = _ref$width === void 0 ? 320 : _ref$width,
|
|
49
49
|
_ref$onChange = _ref.onChange,
|
|
50
50
|
onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange,
|
|
51
|
+
onCounter = _ref.onCounter,
|
|
51
52
|
others = _objectWithoutProperties(_ref, _excluded);
|
|
52
53
|
var _useDevice = (0, _hooks.useDevice)(),
|
|
53
54
|
isDesktop = _useDevice.isDesktop;
|
|
@@ -79,7 +80,7 @@ var Slider = function Slider(_ref) {
|
|
|
79
80
|
setDisabledScroll(true);
|
|
80
81
|
timeout = setTimeout(function () {
|
|
81
82
|
return setDisabledScroll(false);
|
|
82
|
-
}, (0, _helpers2.getMotionExpand)());
|
|
83
|
+
}, (0, _helpers2.getMotionExpand)() * 2);
|
|
83
84
|
onChange(index);
|
|
84
85
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
85
86
|
}, [index]);
|
|
@@ -133,10 +134,19 @@ var Slider = function Slider(_ref) {
|
|
|
133
134
|
className: _SliderModule.default.caption
|
|
134
135
|
}, /*#__PURE__*/_react.default.createElement(_primitives.Text, {
|
|
135
136
|
bold: true,
|
|
136
|
-
|
|
137
|
-
className: _SliderModule.default.text
|
|
137
|
+
tiny: true,
|
|
138
|
+
className: [_SliderModule.default.box, _SliderModule.default.text]
|
|
138
139
|
}, captions[imageIndex])));
|
|
139
|
-
})
|
|
140
|
+
}), images.length > 0 && onCounter && /*#__PURE__*/_react.default.createElement(_primitives.Pressable, {
|
|
141
|
+
className: [_SliderModule.default.box, _SliderModule.default.counter],
|
|
142
|
+
onPress: onCounter
|
|
143
|
+
}, /*#__PURE__*/_react.default.createElement(_primitives.Icon, {
|
|
144
|
+
action: true,
|
|
145
|
+
value: _primitives.ICON.PHOTO_LIBRARY
|
|
146
|
+
}), /*#__PURE__*/_react.default.createElement(_primitives.Text, {
|
|
147
|
+
bold: true,
|
|
148
|
+
tiny: true
|
|
149
|
+
}, images.length))), /*#__PURE__*/_react.default.createElement(_primitives.Pressable, {
|
|
140
150
|
onPress: function onPress() {
|
|
141
151
|
return setIndex(index + 1);
|
|
142
152
|
},
|
|
@@ -154,6 +164,7 @@ Slider.propTypes = {
|
|
|
154
164
|
images: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
|
|
155
165
|
index: _propTypes.default.number,
|
|
156
166
|
width: _propTypes.default.number.isRequired,
|
|
157
|
-
onChange: _propTypes.default.func
|
|
167
|
+
onChange: _propTypes.default.func,
|
|
168
|
+
onCounter: _propTypes.default.func
|
|
158
169
|
};
|
|
159
170
|
//# sourceMappingURL=Slider.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Slider.js","names":["interval","timeout","Slider","auto","captions","height","propHeight","images","index","propIndex","width","propWidth","onChange","others","useDevice","isDesktop","useState","disabledScroll","setDisabledScroll","focus","setFocus","setIndex","useEffect","setInterval","length","clearInterval","clearTimeout","setTimeout","getMotionExpand","handleScroll","x","nextIndex","Math","round","undefined","styles","style","container","className","button","hide","back","ICON","LEFT","floor","scrollView","map","image","imageIndex","item","backgroundImage","PRELOAD_IMAGES","caption","text","forward","RIGHT","displayName","propTypes","PropTypes","bool","arrayOf","string","number","isRequired","func"],"sources":["../../../src/components/Slider/Slider.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React, { useEffect, useState } from 'react';\n\nimport { styles } from '../../helpers';\nimport { useDevice } from '../../hooks';\nimport { Icon, ICON, ScrollView, Pressable, Text, View } from '../../primitives';\nimport { getMotionExpand } from './helpers';\nimport { PRELOAD_IMAGES } from './Slider.constants';\nimport style from './Slider.module.css';\n\nlet interval;\nlet timeout;\n\nconst Slider = ({\n auto = false,\n captions = [],\n height: propHeight = 240,\n images = [],\n index: propIndex = 0,\n width: propWidth = 320,\n onChange = () => {},\n ...others\n}) => {\n const { isDesktop } = useDevice();\n\n const [disabledScroll, setDisabledScroll] = useState(false);\n const [focus, setFocus] = useState(false);\n const [index, setIndex] = useState(propIndex);\n\n useEffect(() => {\n if (auto) interval = setInterval(() => setIndex(index < images.length - 1 ? index + 1 : 0), 2000);\n return () => clearInterval(interval);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [auto, index]);\n\n // eslint-disable-next-line react-hooks/exhaustive-deps\n useEffect(() => {\n clearTimeout(timeout);\n setDisabledScroll(true);\n timeout = setTimeout(() => setDisabledScroll(false), getMotionExpand());\n\n onChange(index);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [index]);\n\n const height = propHeight;\n\n const width = propWidth;\n\n const handleScroll = ({ x } = {}) => {\n const nextIndex = x < width ? 0 : Math.round(x / width);\n\n if (nextIndex !== index) setIndex(nextIndex);\n };\n\n return (\n <View\n {...others}\n role=\"slider\"\n onMouseEnter={isDesktop ? () => setFocus(true) : undefined}\n onMouseLeave={isDesktop ? () => setFocus(false) : undefined}\n className={styles(style.container, others.className)}\n style={{ ...others.style, width }}\n >\n <Pressable\n onPress={() => setIndex(index - 1)}\n className={styles(style.button, (index <= 0 || (isDesktop && !focus)) && style.hide, style.back)}\n >\n <Icon value={ICON.LEFT} />\n </Pressable>\n\n <ScrollView\n horizontal\n scrollTo={index * Math.floor(width)}\n snap\n width={width}\n onScroll={disabledScroll ? undefined : handleScroll}\n className={style.scrollView}\n >\n {images.map((image, imageIndex) => (\n <View key={imageIndex} className={style.item}>\n <View\n role=\"image\"\n className={style.image}\n style={{\n backgroundImage:\n imageIndex >= index - PRELOAD_IMAGES && imageIndex <= index + PRELOAD_IMAGES\n ? `url(${image})`\n : undefined,\n height,\n width,\n }}\n />\n {captions[imageIndex] && (\n <View className={style.caption}>\n <Text bold
|
|
1
|
+
{"version":3,"file":"Slider.js","names":["interval","timeout","Slider","auto","captions","height","propHeight","images","index","propIndex","width","propWidth","onChange","onCounter","others","useDevice","isDesktop","useState","disabledScroll","setDisabledScroll","focus","setFocus","setIndex","useEffect","setInterval","length","clearInterval","clearTimeout","setTimeout","getMotionExpand","handleScroll","x","nextIndex","Math","round","undefined","styles","style","container","className","button","hide","back","ICON","LEFT","floor","scrollView","map","image","imageIndex","item","backgroundImage","PRELOAD_IMAGES","caption","box","text","counter","PHOTO_LIBRARY","forward","RIGHT","displayName","propTypes","PropTypes","bool","arrayOf","string","number","isRequired","func"],"sources":["../../../src/components/Slider/Slider.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React, { useEffect, useState } from 'react';\n\nimport { styles } from '../../helpers';\nimport { useDevice } from '../../hooks';\nimport { Icon, ICON, ScrollView, Pressable, Text, View } from '../../primitives';\nimport { getMotionExpand } from './helpers';\nimport { PRELOAD_IMAGES } from './Slider.constants';\nimport style from './Slider.module.css';\n\nlet interval;\nlet timeout;\n\nconst Slider = ({\n auto = false,\n captions = [],\n height: propHeight = 240,\n images = [],\n index: propIndex = 0,\n width: propWidth = 320,\n onChange = () => {},\n onCounter,\n ...others\n}) => {\n const { isDesktop } = useDevice();\n\n const [disabledScroll, setDisabledScroll] = useState(false);\n const [focus, setFocus] = useState(false);\n const [index, setIndex] = useState(propIndex);\n\n useEffect(() => {\n if (auto) interval = setInterval(() => setIndex(index < images.length - 1 ? index + 1 : 0), 2000);\n return () => clearInterval(interval);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [auto, index]);\n\n // eslint-disable-next-line react-hooks/exhaustive-deps\n useEffect(() => {\n clearTimeout(timeout);\n setDisabledScroll(true);\n timeout = setTimeout(() => setDisabledScroll(false), getMotionExpand() * 2);\n\n onChange(index);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [index]);\n\n const height = propHeight;\n\n const width = propWidth;\n\n const handleScroll = ({ x } = {}) => {\n const nextIndex = x < width ? 0 : Math.round(x / width);\n\n if (nextIndex !== index) setIndex(nextIndex);\n };\n\n return (\n <View\n {...others}\n role=\"slider\"\n onMouseEnter={isDesktop ? () => setFocus(true) : undefined}\n onMouseLeave={isDesktop ? () => setFocus(false) : undefined}\n className={styles(style.container, others.className)}\n style={{ ...others.style, width }}\n >\n <Pressable\n onPress={() => setIndex(index - 1)}\n className={styles(style.button, (index <= 0 || (isDesktop && !focus)) && style.hide, style.back)}\n >\n <Icon value={ICON.LEFT} />\n </Pressable>\n\n <ScrollView\n horizontal\n scrollTo={index * Math.floor(width)}\n snap\n width={width}\n onScroll={disabledScroll ? undefined : handleScroll}\n className={style.scrollView}\n >\n {images.map((image, imageIndex) => (\n <View key={imageIndex} className={style.item}>\n <View\n role=\"image\"\n className={style.image}\n style={{\n backgroundImage:\n imageIndex >= index - PRELOAD_IMAGES && imageIndex <= index + PRELOAD_IMAGES\n ? `url(${image})`\n : undefined,\n height,\n width,\n }}\n />\n {captions[imageIndex] && (\n <View className={style.caption}>\n <Text bold tiny className={[style.box, style.text]}>\n {captions[imageIndex]}\n </Text>\n </View>\n )}\n </View>\n ))}\n\n {images.length > 0 && onCounter && (\n <Pressable className={[style.box, style.counter]} onPress={onCounter}>\n <Icon action value={ICON.PHOTO_LIBRARY} />\n <Text bold tiny>\n {images.length}\n </Text>\n </Pressable>\n )}\n </ScrollView>\n\n <Pressable\n onPress={() => setIndex(index + 1)}\n className={styles(\n style.button,\n (index >= images.length - 1 || (isDesktop && !focus)) && style.hide && style.hide,\n style.forward,\n )}\n >\n <Icon value={ICON.RIGHT} />\n </Pressable>\n </View>\n );\n};\n\nSlider.displayName = 'Component:Slider';\n\nSlider.propTypes = {\n auto: PropTypes.bool,\n captions: PropTypes.arrayOf(PropTypes.string),\n height: PropTypes.number.isRequired,\n images: PropTypes.arrayOf(PropTypes.string).isRequired,\n index: PropTypes.number,\n width: PropTypes.number.isRequired,\n onChange: PropTypes.func,\n onCounter: PropTypes.func,\n};\n\nexport { Slider };\n"],"mappings":"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"}
|
|
@@ -28,11 +28,11 @@
|
|
|
28
28
|
}
|
|
29
29
|
|
|
30
30
|
.button.back {
|
|
31
|
-
left: var(--mirai-ui-space-
|
|
31
|
+
left: var(--mirai-ui-space-S);
|
|
32
32
|
}
|
|
33
33
|
|
|
34
34
|
.button.forward {
|
|
35
|
-
right: var(--mirai-ui-space-
|
|
35
|
+
right: var(--mirai-ui-space-S);
|
|
36
36
|
}
|
|
37
37
|
|
|
38
38
|
.item {
|
|
@@ -56,10 +56,31 @@
|
|
|
56
56
|
}
|
|
57
57
|
|
|
58
58
|
.item .caption .text {
|
|
59
|
+
color: var(--mirai-ui-slider-color);
|
|
60
|
+
padding: calc(var(--mirai-ui-space-XS) / 2) var(--mirai-ui-space-XS);
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.counter {
|
|
64
|
+
bottom: var(--mirai-ui-space-S);
|
|
65
|
+
display: flex;
|
|
66
|
+
flex-direction: row;
|
|
67
|
+
gap: calc(var(--mirai-ui-space-XS) / 2);
|
|
68
|
+
position: absolute;
|
|
69
|
+
right: var(--mirai-ui-space-S);
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.counter [data-role] {
|
|
73
|
+
color: var(--mirai-ui-slider-color);
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
.box {
|
|
59
77
|
background-color: var(--mirai-ui-slider-overlay);
|
|
60
78
|
border-radius: var(--mirai-ui-slider-border-radius);
|
|
79
|
+
padding: calc(var(--mirai-ui-space-XS) / 2);
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.box [data-role] {
|
|
61
83
|
color: var(--mirai-ui-slider-color);
|
|
62
|
-
padding: calc(var(--mirai-ui-space-XS) / 2) var(--mirai-ui-space-XS);
|
|
63
84
|
}
|
|
64
85
|
|
|
65
86
|
/* S */
|
|
@@ -22,12 +22,12 @@ var Story = function Story(props) {
|
|
|
22
22
|
}
|
|
23
23
|
return (_console = console).log.apply(_console, ['onChange'].concat(params));
|
|
24
24
|
},
|
|
25
|
-
|
|
25
|
+
onCounter: function onCounter() {
|
|
26
26
|
var _console2;
|
|
27
27
|
for (var _len2 = arguments.length, params = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
|
|
28
28
|
params[_key2] = arguments[_key2];
|
|
29
29
|
}
|
|
30
|
-
return (_console2 = console).log.apply(_console2, ['
|
|
30
|
+
return (_console2 = console).log.apply(_console2, ['onCounter'].concat(params));
|
|
31
31
|
}
|
|
32
32
|
}));
|
|
33
33
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Slider.stories.js","names":["title","Story","props","params","console","log","storyName","args","auto","captions","undefined","height","index","images","fullScreen","thumbnails","width","testId","style","borderRadius","argTypes"],"sources":["../../../src/components/Slider/Slider.stories.jsx"],"sourcesContent":["import React from 'react';\n\nimport { Slider } from './Slider';\nimport { Icon, ICON } from '../../primitives/Icon';\n\nexport default { title: 'Components' };\n\nexport const Story = (props) => (\n <Slider\n {...props}\n onChange={(...params) => console.log('onChange', ...params)}\n
|
|
1
|
+
{"version":3,"file":"Slider.stories.js","names":["title","Story","props","params","console","log","storyName","args","auto","captions","undefined","height","index","images","fullScreen","thumbnails","width","testId","style","borderRadius","argTypes"],"sources":["../../../src/components/Slider/Slider.stories.jsx"],"sourcesContent":["import React from 'react';\n\nimport { Slider } from './Slider';\nimport { Icon, ICON } from '../../primitives/Icon';\n\nexport default { title: 'Components' };\n\nexport const Story = (props) => (\n <Slider\n {...props}\n onChange={(...params) => console.log('onChange', ...params)}\n onCounter={(...params) => console.log('onCounter', ...params)}\n />\n);\n\nStory.storyName = 'Slider';\n\nStory.args = {\n auto: false,\n captions: ['javi', 'jose', undefined, 'victor', 'svet', 'mario2'],\n height: 200,\n index: 1,\n images: [\n 'https://picsum.photos/seed/@soyjavi/1024/768',\n 'https://picsum.photos/seed/@jose/1024/768',\n 'https://picsum.photos/seed/@mario1/1024/768',\n 'https://picsum.photos/seed/@victor/1024/768',\n 'https://picsum.photos/seed/@svet/1024/768',\n 'https://picsum.photos/seed/@mario2/1024/768',\n 'https://picsum.photos/seed/1/1024/768',\n 'https://picsum.photos/seed/2/1024/768',\n 'https://picsum.photos/seed/3/1024/768',\n 'https://picsum.photos/seed/4/1024/768',\n 'https://picsum.photos/seed/5/1024/768',\n 'https://picsum.photos/seed/6/1024/768',\n 'https://picsum.photos/seed/7/1024/768',\n 'https://picsum.photos/seed/8/1024/768',\n 'https://picsum.photos/seed/9/1024/768',\n 'https://picsum.photos/seed/10/1024/768',\n 'https://picsum.photos/seed/11/1024/768',\n 'https://picsum.photos/seed/12/1024/768',\n ],\n fullScreen: false,\n thumbnails: [\n 'https://picsum.photos/seed/@soyjavi/128/128',\n 'https://picsum.photos/seed/@jose/128/128',\n 'https://picsum.photos/seed/@mario1/128/128',\n 'https://picsum.photos/seed/@victor/128/128',\n 'https://picsum.photos/seed/@svet/128/128',\n 'https://picsum.photos/seed/@mario2/128/128',\n 'https://picsum.photos/seed/1/128/128',\n 'https://picsum.photos/seed/2/128/128',\n 'https://picsum.photos/seed/3/128/128',\n 'https://picsum.photos/seed/4/128/128',\n 'https://picsum.photos/seed/5/128/128',\n 'https://picsum.photos/seed/6/128/128',\n 'https://picsum.photos/seed/7/128/128',\n 'https://picsum.photos/seed/8/128/128',\n 'https://picsum.photos/seed/9/128/128',\n 'https://picsum.photos/seed/10/128/128',\n 'https://picsum.photos/seed/11/128/128',\n 'https://picsum.photos/seed/12/128/128',\n ],\n width: 320,\n // inherited properties\n testId: 'test-story',\n style: { borderRadius: 16 },\n};\n\nStory.argTypes = {};\n"],"mappings":";;;;;;AAAA;AAEA;AACA;AAAmD;AAAA;AAAA,eAEpC;EAAEA,KAAK,EAAE;AAAa,CAAC;AAAA;AAE/B,IAAMC,KAAK,GAAG,SAARA,KAAK,CAAIC,KAAK;EAAA,oBACzB,6BAAC,cAAM,eACDA,KAAK;IACT,QAAQ,EAAE;MAAA;MAAA,kCAAIC,MAAM;QAANA,MAAM;MAAA;MAAA,OAAK,YAAAC,OAAO,EAACC,GAAG,kBAAC,UAAU,SAAKF,MAAM,EAAC;IAAA,CAAC;IAC5D,SAAS,EAAE;MAAA;MAAA,mCAAIA,MAAM;QAANA,MAAM;MAAA;MAAA,OAAK,aAAAC,OAAO,EAACC,GAAG,mBAAC,WAAW,SAAKF,MAAM,EAAC;IAAA;EAAC,GAC9D;AAAA,CACH;AAAC;AAEFF,KAAK,CAACK,SAAS,GAAG,QAAQ;AAE1BL,KAAK,CAACM,IAAI,GAAG;EACXC,IAAI,EAAE,KAAK;EACXC,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,EAAEC,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,CAAC;EACjEC,MAAM,EAAE,GAAG;EACXC,KAAK,EAAE,CAAC;EACRC,MAAM,EAAE,CACN,8CAA8C,EAC9C,2CAA2C,EAC3C,6CAA6C,EAC7C,6CAA6C,EAC7C,2CAA2C,EAC3C,6CAA6C,EAC7C,uCAAuC,EACvC,uCAAuC,EACvC,uCAAuC,EACvC,uCAAuC,EACvC,uCAAuC,EACvC,uCAAuC,EACvC,uCAAuC,EACvC,uCAAuC,EACvC,uCAAuC,EACvC,wCAAwC,EACxC,wCAAwC,EACxC,wCAAwC,CACzC;EACDC,UAAU,EAAE,KAAK;EACjBC,UAAU,EAAE,CACV,6CAA6C,EAC7C,0CAA0C,EAC1C,4CAA4C,EAC5C,4CAA4C,EAC5C,0CAA0C,EAC1C,4CAA4C,EAC5C,sCAAsC,EACtC,sCAAsC,EACtC,sCAAsC,EACtC,sCAAsC,EACtC,sCAAsC,EACtC,sCAAsC,EACtC,sCAAsC,EACtC,sCAAsC,EACtC,sCAAsC,EACtC,uCAAuC,EACvC,uCAAuC,EACvC,uCAAuC,CACxC;EACDC,KAAK,EAAE,GAAG;EACV;EACAC,MAAM,EAAE,YAAY;EACpBC,KAAK,EAAE;IAAEC,YAAY,EAAE;EAAG;AAC5B,CAAC;AAEDlB,KAAK,CAACmB,QAAQ,GAAG,CAAC,CAAC"}
|
|
@@ -272,7 +272,7 @@ exports[`component:<Slider> prop:captions 1`] = `
|
|
|
272
272
|
class="view caption"
|
|
273
273
|
>
|
|
274
274
|
<span
|
|
275
|
-
class="text bold
|
|
275
|
+
class="text bold tiny box text"
|
|
276
276
|
>
|
|
277
277
|
javi
|
|
278
278
|
</span>
|
|
@@ -289,7 +289,7 @@ exports[`component:<Slider> prop:captions 1`] = `
|
|
|
289
289
|
class="view caption"
|
|
290
290
|
>
|
|
291
291
|
<span
|
|
292
|
-
class="text bold
|
|
292
|
+
class="text bold tiny box text"
|
|
293
293
|
>
|
|
294
294
|
jose
|
|
295
295
|
</span>
|
|
@@ -314,7 +314,7 @@ exports[`component:<Slider> prop:captions 1`] = `
|
|
|
314
314
|
class="view caption"
|
|
315
315
|
>
|
|
316
316
|
<span
|
|
317
|
-
class="text bold
|
|
317
|
+
class="text bold tiny box text"
|
|
318
318
|
>
|
|
319
319
|
victor
|
|
320
320
|
</span>
|
|
@@ -331,7 +331,7 @@ exports[`component:<Slider> prop:captions 1`] = `
|
|
|
331
331
|
class="view caption"
|
|
332
332
|
>
|
|
333
333
|
<span
|
|
334
|
-
class="text bold
|
|
334
|
+
class="text bold tiny box text"
|
|
335
335
|
>
|
|
336
336
|
svet
|
|
337
337
|
</span>
|
|
@@ -348,7 +348,7 @@ exports[`component:<Slider> prop:captions 1`] = `
|
|
|
348
348
|
class="view caption"
|
|
349
349
|
>
|
|
350
350
|
<span
|
|
351
|
-
class="text bold
|
|
351
|
+
class="text bold tiny box text"
|
|
352
352
|
>
|
|
353
353
|
mario2
|
|
354
354
|
</span>
|
|
@@ -497,6 +497,149 @@ exports[`component:<Slider> prop:index 1`] = `
|
|
|
497
497
|
</DocumentFragment>
|
|
498
498
|
`;
|
|
499
499
|
|
|
500
|
+
exports[`component:<Slider> prop:onCounter 1`] = `
|
|
501
|
+
<DocumentFragment>
|
|
502
|
+
<div
|
|
503
|
+
class="view container"
|
|
504
|
+
style="width: 360px;"
|
|
505
|
+
>
|
|
506
|
+
<div
|
|
507
|
+
class="pressable button hide back"
|
|
508
|
+
>
|
|
509
|
+
<span
|
|
510
|
+
class="icon headline-3"
|
|
511
|
+
>
|
|
512
|
+
<svg
|
|
513
|
+
fill="currentColor"
|
|
514
|
+
height="1em"
|
|
515
|
+
stroke="currentColor"
|
|
516
|
+
stroke-width="0"
|
|
517
|
+
viewBox="0 0 24 24"
|
|
518
|
+
width="1em"
|
|
519
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
520
|
+
>
|
|
521
|
+
<path
|
|
522
|
+
d="M0 0h24v24H0V0z"
|
|
523
|
+
fill="none"
|
|
524
|
+
/>
|
|
525
|
+
<path
|
|
526
|
+
d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"
|
|
527
|
+
/>
|
|
528
|
+
</svg>
|
|
529
|
+
</span>
|
|
530
|
+
</div>
|
|
531
|
+
<div
|
|
532
|
+
class="scrollview snap horizontal notIndicator scrollView"
|
|
533
|
+
style="width: 360px;"
|
|
534
|
+
>
|
|
535
|
+
<div
|
|
536
|
+
class="view item"
|
|
537
|
+
>
|
|
538
|
+
<div
|
|
539
|
+
class="view image"
|
|
540
|
+
style="background-image: url(https://picsum.photos/seed/@soyjavi/1024/768); height: 230px; width: 360px;"
|
|
541
|
+
/>
|
|
542
|
+
</div>
|
|
543
|
+
<div
|
|
544
|
+
class="view item"
|
|
545
|
+
>
|
|
546
|
+
<div
|
|
547
|
+
class="view image"
|
|
548
|
+
style="background-image: url(https://picsum.photos/seed/@jose/1024/768); height: 230px; width: 360px;"
|
|
549
|
+
/>
|
|
550
|
+
</div>
|
|
551
|
+
<div
|
|
552
|
+
class="view item"
|
|
553
|
+
>
|
|
554
|
+
<div
|
|
555
|
+
class="view image"
|
|
556
|
+
style="background-image: url(https://picsum.photos/seed/@mario1/1024/768); height: 230px; width: 360px;"
|
|
557
|
+
/>
|
|
558
|
+
</div>
|
|
559
|
+
<div
|
|
560
|
+
class="view item"
|
|
561
|
+
>
|
|
562
|
+
<div
|
|
563
|
+
class="view image"
|
|
564
|
+
style="height: 230px; width: 360px;"
|
|
565
|
+
/>
|
|
566
|
+
</div>
|
|
567
|
+
<div
|
|
568
|
+
class="view item"
|
|
569
|
+
>
|
|
570
|
+
<div
|
|
571
|
+
class="view image"
|
|
572
|
+
style="height: 230px; width: 360px;"
|
|
573
|
+
/>
|
|
574
|
+
</div>
|
|
575
|
+
<div
|
|
576
|
+
class="view item"
|
|
577
|
+
>
|
|
578
|
+
<div
|
|
579
|
+
class="view image"
|
|
580
|
+
style="height: 230px; width: 360px;"
|
|
581
|
+
/>
|
|
582
|
+
</div>
|
|
583
|
+
<div
|
|
584
|
+
class="pressable box counter"
|
|
585
|
+
>
|
|
586
|
+
<span
|
|
587
|
+
class="icon action"
|
|
588
|
+
>
|
|
589
|
+
<svg
|
|
590
|
+
fill="currentColor"
|
|
591
|
+
height="1em"
|
|
592
|
+
stroke="currentColor"
|
|
593
|
+
stroke-width="0"
|
|
594
|
+
viewBox="0 0 24 24"
|
|
595
|
+
width="1em"
|
|
596
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
597
|
+
>
|
|
598
|
+
<path
|
|
599
|
+
d="M0 0h24v24H0V0z"
|
|
600
|
+
fill="none"
|
|
601
|
+
/>
|
|
602
|
+
<path
|
|
603
|
+
d="M20 4v12H8V4h12m0-2H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-8.5 9.67 1.69 2.26 2.48-3.1L19 15H9zM2 6v14c0 1.1.9 2 2 2h14v-2H4V6H2z"
|
|
604
|
+
/>
|
|
605
|
+
</svg>
|
|
606
|
+
</span>
|
|
607
|
+
<span
|
|
608
|
+
class="text bold tiny"
|
|
609
|
+
>
|
|
610
|
+
6
|
|
611
|
+
</span>
|
|
612
|
+
</div>
|
|
613
|
+
</div>
|
|
614
|
+
<div
|
|
615
|
+
class="pressable button hide forward"
|
|
616
|
+
>
|
|
617
|
+
<span
|
|
618
|
+
class="icon headline-3"
|
|
619
|
+
>
|
|
620
|
+
<svg
|
|
621
|
+
fill="currentColor"
|
|
622
|
+
height="1em"
|
|
623
|
+
stroke="currentColor"
|
|
624
|
+
stroke-width="0"
|
|
625
|
+
viewBox="0 0 24 24"
|
|
626
|
+
width="1em"
|
|
627
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
628
|
+
>
|
|
629
|
+
<path
|
|
630
|
+
d="M0 0h24v24H0V0z"
|
|
631
|
+
fill="none"
|
|
632
|
+
/>
|
|
633
|
+
<path
|
|
634
|
+
d="m12 4-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8-8-8z"
|
|
635
|
+
/>
|
|
636
|
+
</svg>
|
|
637
|
+
</span>
|
|
638
|
+
</div>
|
|
639
|
+
</div>
|
|
640
|
+
</DocumentFragment>
|
|
641
|
+
`;
|
|
642
|
+
|
|
500
643
|
exports[`component:<Slider> renders 1`] = `
|
|
501
644
|
<DocumentFragment>
|
|
502
645
|
<div
|
|
@@ -51,6 +51,7 @@ var Tooltip = function Tooltip(_ref) {
|
|
|
51
51
|
_useState4 = _slicedToArray(_useState3, 2),
|
|
52
52
|
position = _useState4[0],
|
|
53
53
|
setPosition = _useState4[1];
|
|
54
|
+
var contentRef = (0, _react.useRef)();
|
|
54
55
|
var ref = (0, _react.useRef)();
|
|
55
56
|
var fixed = inherit.fixed,
|
|
56
57
|
_inherit$role = inherit.role,
|
|
@@ -64,10 +65,10 @@ var Tooltip = function Tooltip(_ref) {
|
|
|
64
65
|
(0, _react.useEffect)(function () {
|
|
65
66
|
if (!pressable || !visible) return;
|
|
66
67
|
var handleClickOutside = function handleClickOutside() {
|
|
67
|
-
var _ref$current;
|
|
68
|
+
var _contentRef$current, _ref$current;
|
|
68
69
|
var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
|
|
69
70
|
target = _ref2.target;
|
|
70
|
-
return !((_ref$current = ref.current) !== null && _ref$current !== void 0 && _ref$current.contains(target)) && setVisible(false);
|
|
71
|
+
return !((_contentRef$current = contentRef.current) !== null && _contentRef$current !== void 0 && _contentRef$current.contains(target)) && !((_ref$current = ref.current) !== null && _ref$current !== void 0 && _ref$current.contains(target)) && setVisible(false);
|
|
71
72
|
};
|
|
72
73
|
document.addEventListener('click', handleClickOutside, true);
|
|
73
74
|
return function () {
|
|
@@ -88,11 +89,11 @@ var Tooltip = function Tooltip(_ref) {
|
|
|
88
89
|
left: propLeft,
|
|
89
90
|
right: propRight,
|
|
90
91
|
onPosition: setPosition
|
|
91
|
-
}, _react.default.
|
|
92
|
+
}, /*#__PURE__*/_react.default.createElement(pressable ? _primitives.View : _react.default.Fragment, _objectSpread({}, pressable ? {
|
|
93
|
+
ref: ref
|
|
94
|
+
} : undefined), _react.default.Children.map(children, function (child, index) {
|
|
92
95
|
var _objectSpread2;
|
|
93
|
-
return /*#__PURE__*/_react.default.cloneElement(child, _objectSpread(_objectSpread(
|
|
94
|
-
ref: ref
|
|
95
|
-
} : null), {}, {
|
|
96
|
+
return /*#__PURE__*/_react.default.cloneElement(child, _objectSpread(_objectSpread({
|
|
96
97
|
key: index
|
|
97
98
|
}, child.props), {}, (_objectSpread2 = {
|
|
98
99
|
onClick: pressable ? function () {
|
|
@@ -103,7 +104,9 @@ var Tooltip = function Tooltip(_ref) {
|
|
|
103
104
|
} : undefined), _defineProperty(_objectSpread2, (0, _helpers2.isPressableInstance)(child) ? 'onLeave' : 'onMouseLeave', !pressable ? function () {
|
|
104
105
|
return setVisible(false);
|
|
105
106
|
} : undefined), _defineProperty(_objectSpread2, "className", (0, _helpers.styles)(_TooltipModule.default.dispatcher, child.props.className)), _defineProperty(_objectSpread2, "testId", testId ? "".concat(testId, "-dispatcher") : undefined), _objectSpread2)));
|
|
106
|
-
}), /*#__PURE__*/_react.default.createElement(_primitives.LayerContent, null, /*#__PURE__*/_react.default.createElement(_primitives.View, _extends({}, others, {
|
|
107
|
+
})), /*#__PURE__*/_react.default.createElement(_primitives.LayerContent, null, /*#__PURE__*/_react.default.createElement(_primitives.View, _extends({}, others, pressable ? {
|
|
108
|
+
ref: contentRef
|
|
109
|
+
} : undefined, {
|
|
107
110
|
className: (0, _helpers.styles)(_TooltipModule.default.tooltip, (propLeft || propRight) && _TooltipModule.default.align, left && _TooltipModule.default.left, right && _TooltipModule.default.right, top ? _TooltipModule.default.top : _TooltipModule.default.bottom, others.className)
|
|
108
111
|
}), Template ? /*#__PURE__*/_react.default.createElement(Template, null) : /*#__PURE__*/_react.default.createElement(_primitives.Text, {
|
|
109
112
|
bold: true,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tooltip.js","names":["Tooltip","children","propLeft","left","pressable","propRight","right","Template","text","timestamp","propTop","top","visible","propVisible","inherit","useState","setVisible","position","setPosition","
|
|
1
|
+
{"version":3,"file":"Tooltip.js","names":["Tooltip","children","propLeft","left","pressable","propRight","right","Template","text","timestamp","propTop","top","visible","propVisible","inherit","useState","setVisible","position","setPosition","contentRef","useRef","ref","fixed","role","testId","others","useEffect","handleClickOutside","target","current","contains","document","addEventListener","removeEventListener","React","createElement","View","Fragment","undefined","Children","map","child","index","cloneElement","key","props","onClick","isPressableInstance","styles","style","dispatcher","className","tooltip","align","bottom","displayName","propTypes","PropTypes","node","isRequired","bool","oneOfType","func","string","number"],"sources":["../../../src/components/Tooltip/Tooltip.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React, { useEffect, useState, useRef } from 'react';\n\nimport { styles } from '../../helpers';\nimport { Layer, LayerContent, Text, View } from '../../primitives';\nimport { isPressableInstance } from './helpers';\nimport style from './Tooltip.module.css';\n\nconst Tooltip = ({\n children,\n left: propLeft,\n pressable = false,\n right: propRight,\n Template,\n text,\n timestamp,\n top: propTop,\n visible: propVisible = false,\n ...inherit\n}) => {\n const [visible, setVisible] = useState(propVisible);\n const [position, setPosition] = useState({});\n const contentRef = useRef();\n const ref = useRef();\n\n const { fixed, role = 'tooltip', testId, ...others } = inherit;\n const { left, right, top = propTop } = position;\n\n useEffect(() => {\n if (!pressable || !visible) return;\n\n const handleClickOutside = ({ target } = {}) =>\n !contentRef.current?.contains(target) && !ref.current?.contains(target) && setVisible(false);\n\n document.addEventListener('click', handleClickOutside, true);\n\n return () => document.removeEventListener('click', handleClickOutside, true);\n\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [visible]);\n\n return text || Template ? (\n <Layer\n {...{ fixed, role, testId, timestamp, top, visible }}\n centered\n forceRender={false}\n left={propLeft}\n right={propRight}\n onPosition={setPosition}\n >\n {React.createElement(\n pressable ? View : React.Fragment,\n { ...(pressable ? { ref } : undefined) },\n React.Children.map(children, (child, index) => {\n return React.cloneElement(child, {\n key: index,\n ...child.props,\n onClick: pressable ? () => setVisible(!visible) : undefined,\n [isPressableInstance(child) ? 'onEnter' : 'onMouseEnter']: !pressable ? () => setVisible(true) : undefined,\n [isPressableInstance(child) ? 'onLeave' : 'onMouseLeave']: !pressable ? () => setVisible(false) : undefined,\n className: styles(style.dispatcher, child.props.className),\n testId: testId ? `${testId}-dispatcher` : undefined,\n });\n }),\n )}\n\n <LayerContent>\n <View\n {...others}\n {...(pressable ? { ref: contentRef } : undefined)}\n className={styles(\n style.tooltip,\n (propLeft || propRight) && style.align,\n left && style.left,\n right && style.right,\n top ? style.top : style.bottom,\n others.className,\n )}\n >\n {Template ? (\n <Template />\n ) : (\n <Text bold small className={style.text}>\n {text}\n </Text>\n )}\n </View>\n </LayerContent>\n </Layer>\n ) : (\n <>{children}</>\n );\n};\n\nTooltip.displayName = 'Component:Tooltip';\n\nTooltip.propTypes = {\n children: PropTypes.node.isRequired,\n left: PropTypes.bool,\n pressable: PropTypes.bool,\n right: PropTypes.bool,\n Template: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),\n text: PropTypes.string,\n timestamp: PropTypes.number,\n top: PropTypes.bool,\n visible: PropTypes.bool,\n};\n\nexport { Tooltip };\n"],"mappings":"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"}
|
|
@@ -35,12 +35,16 @@ exports[` 3`] = `
|
|
|
35
35
|
<span
|
|
36
36
|
data-testid="onPress"
|
|
37
37
|
>
|
|
38
|
-
<
|
|
39
|
-
class="
|
|
40
|
-
data-testid="onPress-dispatcher"
|
|
38
|
+
<div
|
|
39
|
+
class="view"
|
|
41
40
|
>
|
|
42
|
-
|
|
43
|
-
|
|
41
|
+
<button
|
|
42
|
+
class="pressable button dispatcher"
|
|
43
|
+
data-testid="onPress-dispatcher"
|
|
44
|
+
>
|
|
45
|
+
Action
|
|
46
|
+
</button>
|
|
47
|
+
</div>
|
|
44
48
|
</span>
|
|
45
49
|
</DocumentFragment>
|
|
46
50
|
`;
|
|
@@ -50,12 +54,16 @@ exports[` 4`] = `
|
|
|
50
54
|
<span
|
|
51
55
|
data-testid="onPress"
|
|
52
56
|
>
|
|
53
|
-
<
|
|
54
|
-
class="
|
|
55
|
-
data-testid="onPress-dispatcher"
|
|
57
|
+
<div
|
|
58
|
+
class="view"
|
|
56
59
|
>
|
|
57
|
-
|
|
58
|
-
|
|
60
|
+
<button
|
|
61
|
+
class="pressable button dispatcher"
|
|
62
|
+
data-testid="onPress-dispatcher"
|
|
63
|
+
>
|
|
64
|
+
Action
|
|
65
|
+
</button>
|
|
66
|
+
</div>
|
|
59
67
|
</span>
|
|
60
68
|
</DocumentFragment>
|
|
61
69
|
`;
|
|
@@ -18,6 +18,7 @@ var _MdOutlineExpandLess = require("@react-icons/all-files/md/MdOutlineExpandLes
|
|
|
18
18
|
var _MdOutlineExpandMore = require("@react-icons/all-files/md/MdOutlineExpandMore");
|
|
19
19
|
var _MdOutlineFilterList = require("@react-icons/all-files/md/MdOutlineFilterList");
|
|
20
20
|
var _MdOutlineInfo = require("@react-icons/all-files/md/MdOutlineInfo");
|
|
21
|
+
var _MdOutlinePhotoLibrary = require("@react-icons/all-files/md/MdOutlinePhotoLibrary");
|
|
21
22
|
var _MdOutlineRemove = require("@react-icons/all-files/md/MdOutlineRemove");
|
|
22
23
|
var _MdOutlineSearch = require("@react-icons/all-files/md/MdOutlineSearch");
|
|
23
24
|
var _MdOutlineVisibility = require("@react-icons/all-files/md/MdOutlineVisibility");
|
|
@@ -48,6 +49,8 @@ var ICON = {
|
|
|
48
49
|
INFO: _MdOutlineInfo.MdOutlineInfo,
|
|
49
50
|
SUCCESS: _MdOutlineCheckCircle.MdOutlineCheckCircle,
|
|
50
51
|
WARNING: _MdOutlineWarningAmber.MdOutlineWarningAmber,
|
|
52
|
+
// <Slider>
|
|
53
|
+
PHOTO_LIBRARY: _MdOutlinePhotoLibrary.MdOutlinePhotoLibrary,
|
|
51
54
|
// <Table>
|
|
52
55
|
FILTER: _MdOutlineFilterList.MdOutlineFilterList,
|
|
53
56
|
// Filetype
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Icon.constants.js","names":["ICON","LEFT","RIGHT","UP","DOWN","CHECK","ADD","REMOVE","EXPAND_LESS","EXPAND_MORE","SEARCH","EYE_OPEN","EYE_CLOSE","CLOSE","ERROR","INFO","SUCCESS","WARNING","FILTER","MARKDOWN"],"sources":["../../../src/primitives/Icon/Icon.constants.js"],"sourcesContent":["import { LiaMarkdown as MARKDOWN } from '@react-icons/all-files/lia/LiaMarkdown';\nimport { MdErrorOutline as ERROR } from '@react-icons/all-files/md/MdErrorOutline';\nimport { MdOutlineAdd as ADD } from '@react-icons/all-files/md/MdOutlineAdd';\nimport { MdOutlineArrowBack as LEFT } from '@react-icons/all-files/md/MdOutlineArrowBack';\nimport { MdOutlineArrowDownward as DOWN } from '@react-icons/all-files/md/MdOutlineArrowDownward';\nimport { MdOutlineArrowForward as RIGHT } from '@react-icons/all-files/md/MdOutlineArrowForward';\nimport { MdOutlineArrowUpward as UP } from '@react-icons/all-files/md/MdOutlineArrowUpward';\nimport { MdOutlineCheck as CHECK } from '@react-icons/all-files/md/MdOutlineCheck';\nimport { MdOutlineCheckCircle as SUCCESS } from '@react-icons/all-files/md/MdOutlineCheckCircle';\nimport { MdOutlineClose as CLOSE } from '@react-icons/all-files/md/MdOutlineClose';\nimport { MdOutlineExpandLess as EXPAND_LESS } from '@react-icons/all-files/md/MdOutlineExpandLess';\nimport { MdOutlineExpandMore as EXPAND_MORE } from '@react-icons/all-files/md/MdOutlineExpandMore';\nimport { MdOutlineFilterList as FILTER } from '@react-icons/all-files/md/MdOutlineFilterList';\nimport { MdOutlineInfo as INFO } from '@react-icons/all-files/md/MdOutlineInfo';\nimport { MdOutlineRemove as REMOVE } from '@react-icons/all-files/md/MdOutlineRemove';\nimport { MdOutlineSearch as SEARCH } from '@react-icons/all-files/md/MdOutlineSearch';\nimport { MdOutlineVisibility as EYE_OPEN } from '@react-icons/all-files/md/MdOutlineVisibility';\nimport { MdOutlineVisibilityOff as EYE_CLOSE } from '@react-icons/all-files/md/MdOutlineVisibilityOff';\nimport { MdOutlineWarningAmber as WARNING } from '@react-icons/all-files/md/MdOutlineWarningAmber';\n\nexport const ICON = {\n // <Calendar>\n LEFT,\n RIGHT,\n UP,\n DOWN,\n // <Check>\n CHECK,\n // <InputOption>\n ADD,\n REMOVE,\n // <InputSelect>\n EXPAND_LESS,\n EXPAND_MORE,\n // <InputText>\n SEARCH,\n EYE_OPEN,\n EYE_CLOSE,\n // <Modal>\n CLOSE,\n // <Notification> & <InputText>\n ERROR,\n INFO,\n SUCCESS,\n WARNING,\n // <Table>\n FILTER,\n // Filetype\n MARKDOWN,\n};\n"],"mappings":";;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEO,IAAMA,IAAI,GAAG;EAClB;EACAC,IAAI,EAAJA,sCAAI;EACJC,KAAK,EAALA,4CAAK;EACLC,EAAE,EAAFA,0CAAE;EACFC,IAAI,EAAJA,8CAAI;EACJ;EACAC,KAAK,EAALA,8BAAK;EACL;EACAC,GAAG,EAAHA,0BAAG;EACHC,MAAM,EAANA,gCAAM;EACN;EACAC,WAAW,EAAXA,wCAAW;EACXC,WAAW,EAAXA,wCAAW;EACX;EACAC,MAAM,EAANA,gCAAM;EACNC,QAAQ,EAARA,wCAAQ;EACRC,SAAS,EAATA,8CAAS;EACT;EACAC,KAAK,EAALA,8BAAK;EACL;EACAC,KAAK,EAALA,8BAAK;EACLC,IAAI,EAAJA,4BAAI;EACJC,OAAO,EAAPA,0CAAO;EACPC,OAAO,EAAPA,4CAAO;EACP;EACAC,MAAM,EAANA,wCAAM;EACN;EACAC,QAAQ,EAARA;AACF,CAAC;AAAC"}
|
|
1
|
+
{"version":3,"file":"Icon.constants.js","names":["ICON","LEFT","RIGHT","UP","DOWN","CHECK","ADD","REMOVE","EXPAND_LESS","EXPAND_MORE","SEARCH","EYE_OPEN","EYE_CLOSE","CLOSE","ERROR","INFO","SUCCESS","WARNING","PHOTO_LIBRARY","FILTER","MARKDOWN"],"sources":["../../../src/primitives/Icon/Icon.constants.js"],"sourcesContent":["import { LiaMarkdown as MARKDOWN } from '@react-icons/all-files/lia/LiaMarkdown';\nimport { MdErrorOutline as ERROR } from '@react-icons/all-files/md/MdErrorOutline';\nimport { MdOutlineAdd as ADD } from '@react-icons/all-files/md/MdOutlineAdd';\nimport { MdOutlineArrowBack as LEFT } from '@react-icons/all-files/md/MdOutlineArrowBack';\nimport { MdOutlineArrowDownward as DOWN } from '@react-icons/all-files/md/MdOutlineArrowDownward';\nimport { MdOutlineArrowForward as RIGHT } from '@react-icons/all-files/md/MdOutlineArrowForward';\nimport { MdOutlineArrowUpward as UP } from '@react-icons/all-files/md/MdOutlineArrowUpward';\nimport { MdOutlineCheck as CHECK } from '@react-icons/all-files/md/MdOutlineCheck';\nimport { MdOutlineCheckCircle as SUCCESS } from '@react-icons/all-files/md/MdOutlineCheckCircle';\nimport { MdOutlineClose as CLOSE } from '@react-icons/all-files/md/MdOutlineClose';\nimport { MdOutlineExpandLess as EXPAND_LESS } from '@react-icons/all-files/md/MdOutlineExpandLess';\nimport { MdOutlineExpandMore as EXPAND_MORE } from '@react-icons/all-files/md/MdOutlineExpandMore';\nimport { MdOutlineFilterList as FILTER } from '@react-icons/all-files/md/MdOutlineFilterList';\nimport { MdOutlineInfo as INFO } from '@react-icons/all-files/md/MdOutlineInfo';\nimport { MdOutlinePhotoLibrary as PHOTO_LIBRARY } from '@react-icons/all-files/md/MdOutlinePhotoLibrary';\nimport { MdOutlineRemove as REMOVE } from '@react-icons/all-files/md/MdOutlineRemove';\nimport { MdOutlineSearch as SEARCH } from '@react-icons/all-files/md/MdOutlineSearch';\nimport { MdOutlineVisibility as EYE_OPEN } from '@react-icons/all-files/md/MdOutlineVisibility';\nimport { MdOutlineVisibilityOff as EYE_CLOSE } from '@react-icons/all-files/md/MdOutlineVisibilityOff';\nimport { MdOutlineWarningAmber as WARNING } from '@react-icons/all-files/md/MdOutlineWarningAmber';\n\nexport const ICON = {\n // <Calendar>\n LEFT,\n RIGHT,\n UP,\n DOWN,\n // <Check>\n CHECK,\n // <InputOption>\n ADD,\n REMOVE,\n // <InputSelect>\n EXPAND_LESS,\n EXPAND_MORE,\n // <InputText>\n SEARCH,\n EYE_OPEN,\n EYE_CLOSE,\n // <Modal>\n CLOSE,\n // <Notification> & <InputText>\n ERROR,\n INFO,\n SUCCESS,\n WARNING,\n // <Slider>\n PHOTO_LIBRARY,\n // <Table>\n FILTER,\n // Filetype\n MARKDOWN,\n};\n"],"mappings":";;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEO,IAAMA,IAAI,GAAG;EAClB;EACAC,IAAI,EAAJA,sCAAI;EACJC,KAAK,EAALA,4CAAK;EACLC,EAAE,EAAFA,0CAAE;EACFC,IAAI,EAAJA,8CAAI;EACJ;EACAC,KAAK,EAALA,8BAAK;EACL;EACAC,GAAG,EAAHA,0BAAG;EACHC,MAAM,EAANA,gCAAM;EACN;EACAC,WAAW,EAAXA,wCAAW;EACXC,WAAW,EAAXA,wCAAW;EACX;EACAC,MAAM,EAANA,gCAAM;EACNC,QAAQ,EAARA,wCAAQ;EACRC,SAAS,EAATA,8CAAS;EACT;EACAC,KAAK,EAALA,8BAAK;EACL;EACAC,KAAK,EAALA,8BAAK;EACLC,IAAI,EAAJA,4BAAI;EACJC,OAAO,EAAPA,0CAAO;EACPC,OAAO,EAAPA,4CAAO;EACP;EACAC,aAAa,EAAbA,4CAAa;EACb;EACAC,MAAM,EAANA,wCAAM;EACN;EACAC,QAAQ,EAARA;AACF,CAAC;AAAC"}
|
|
@@ -569,6 +569,32 @@ exports[`primitive:<Icon> prop:value prop:value (MARKDOWN) 1`] = `
|
|
|
569
569
|
</DocumentFragment>
|
|
570
570
|
`;
|
|
571
571
|
|
|
572
|
+
exports[`primitive:<Icon> prop:value prop:value (PHOTO_LIBRARY) 1`] = `
|
|
573
|
+
<DocumentFragment>
|
|
574
|
+
<span
|
|
575
|
+
class="icon headline-3"
|
|
576
|
+
>
|
|
577
|
+
<svg
|
|
578
|
+
fill="currentColor"
|
|
579
|
+
height="1em"
|
|
580
|
+
stroke="currentColor"
|
|
581
|
+
stroke-width="0"
|
|
582
|
+
viewBox="0 0 24 24"
|
|
583
|
+
width="1em"
|
|
584
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
585
|
+
>
|
|
586
|
+
<path
|
|
587
|
+
d="M0 0h24v24H0V0z"
|
|
588
|
+
fill="none"
|
|
589
|
+
/>
|
|
590
|
+
<path
|
|
591
|
+
d="M20 4v12H8V4h12m0-2H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-8.5 9.67 1.69 2.26 2.48-3.1L19 15H9zM2 6v14c0 1.1.9 2 2 2h14v-2H4V6H2z"
|
|
592
|
+
/>
|
|
593
|
+
</svg>
|
|
594
|
+
</span>
|
|
595
|
+
</DocumentFragment>
|
|
596
|
+
`;
|
|
597
|
+
|
|
572
598
|
exports[`primitive:<Icon> prop:value prop:value (REMOVE) 1`] = `
|
|
573
599
|
<DocumentFragment>
|
|
574
600
|
<span
|