@mirai/ui 2.1.40 → 2.1.41
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/README.md +3 -0
- package/build/components/Menu/Menu.Option.js +4 -2
- package/build/components/Menu/Menu.Option.js.map +1 -1
- package/build/components/Menu/Menu.js +7 -3
- package/build/components/Menu/Menu.js.map +1 -1
- package/build/components/Menu/Menu.module.css +12 -3
- package/build/components/Menu/Menu.stories.js +1 -0
- package/build/components/Menu/Menu.stories.js.map +1 -1
- package/build/components/Menu/__tests__/__snapshots__/Menu.test.jsx.snap +157 -0
- package/build/theme/default.theme.css +2 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -940,6 +940,7 @@ This component helps you to create a menu over a determinate component receiving
|
|
|
940
940
|
|
|
941
941
|
- `children:node` The element which we will use as reference for display the menu.
|
|
942
942
|
- `options:arrayOf(Option:shape)`
|
|
943
|
+
- `selected:string|number` if you want highlight one of the options
|
|
943
944
|
- `Template:node` if you don't want use the default option scaffold.
|
|
944
945
|
- `title:string` shows a title for the modal
|
|
945
946
|
- `visible:boolean` showing or hiding the menu
|
|
@@ -986,6 +987,8 @@ const MyComponent = () => {
|
|
|
986
987
|
--mirai-ui-menu-option-background-active: var(--mirai-ui-content-background);
|
|
987
988
|
--mirai-ui-menu-option-color-active: var(--mirai-ui-content);
|
|
988
989
|
--mirai-ui-menu-option-color-disabled: var(--mirai-ui-content-border);
|
|
990
|
+
--mirai-ui-menu-option-selected-background: var(--mirai-ui-accent);
|
|
991
|
+
--mirai-ui-menu-option-selected-color: var(--mirai-ui-base);
|
|
989
992
|
--mirai-ui-menu-shadow: var(--mirai-ui-shadow);
|
|
990
993
|
```
|
|
991
994
|
|
|
@@ -9,7 +9,7 @@ var _react = _interopRequireDefault(require("react"));
|
|
|
9
9
|
var _helpers = require("../../helpers");
|
|
10
10
|
var _primitives = require("../../primitives");
|
|
11
11
|
var _MenuModule = _interopRequireDefault(require("./Menu.module.css"));
|
|
12
|
-
var _excluded = ["children", "disabled", "divider", "icon", "label", "value", "onPress"];
|
|
12
|
+
var _excluded = ["children", "disabled", "divider", "icon", "label", "selected", "value", "onPress"];
|
|
13
13
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
|
|
14
14
|
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) { ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } } return n; }, _extends.apply(null, arguments); }
|
|
15
15
|
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) { o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } } return i; }
|
|
@@ -20,11 +20,12 @@ var Option = function Option(_ref) {
|
|
|
20
20
|
divider = _ref.divider,
|
|
21
21
|
icon = _ref.icon,
|
|
22
22
|
label = _ref.label,
|
|
23
|
+
selected = _ref.selected,
|
|
23
24
|
value = _ref.value,
|
|
24
25
|
onPress = _ref.onPress,
|
|
25
26
|
others = _objectWithoutProperties(_ref, _excluded);
|
|
26
27
|
return /*#__PURE__*/_react["default"].createElement(_primitives.Pressable, _extends({}, others, {
|
|
27
|
-
className: (0, _helpers.styles)(_MenuModule["default"].option, value && _MenuModule["default"].value, divider && _MenuModule["default"].divider, disabled && _MenuModule["default"].disabled),
|
|
28
|
+
className: (0, _helpers.styles)(_MenuModule["default"].option, value && _MenuModule["default"].value, divider && _MenuModule["default"].divider, disabled && _MenuModule["default"].disabled, selected && _MenuModule["default"].selected, others.className),
|
|
28
29
|
onPress: !disabled && value ? onPress : undefined
|
|
29
30
|
}), /*#__PURE__*/_react["default"].createElement(_primitives.View, {
|
|
30
31
|
row: true,
|
|
@@ -45,6 +46,7 @@ Option.propTypes = {
|
|
|
45
46
|
divider: _propTypes["default"].bool,
|
|
46
47
|
icon: _propTypes["default"].func,
|
|
47
48
|
label: _propTypes["default"].string,
|
|
49
|
+
selected: _propTypes["default"].bool,
|
|
48
50
|
value: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
|
|
49
51
|
onPress: _propTypes["default"].func
|
|
50
52
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Menu.Option.js","names":["_propTypes","_interopRequireDefault","require","_react","_helpers","_primitives","_MenuModule","_excluded","e","__esModule","_extends","Object","assign","bind","n","arguments","length","t","r","hasOwnProperty","call","apply","_objectWithoutProperties","o","i","_objectWithoutPropertiesLoose","getOwnPropertySymbols","s","includes","propertyIsEnumerable","Option","_ref","children","disabled","divider","icon","label","value","onPress","others","createElement","Pressable","className","styles","style","option","undefined","View","row","wide","content","Icon","Text","exports","displayName","propTypes","PropTypes","node","bool","func","string","oneOfType","number"],"sources":["../../../src/components/Menu/Menu.Option.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport { Icon, Pressable, Text, View } from '../../primitives';\nimport style from './Menu.module.css';\n\nconst Option = ({ children, disabled, divider, icon, label, value, onPress, ...others }) => (\n <Pressable\n {...others}\n className={styles(style.option
|
|
1
|
+
{"version":3,"file":"Menu.Option.js","names":["_propTypes","_interopRequireDefault","require","_react","_helpers","_primitives","_MenuModule","_excluded","e","__esModule","_extends","Object","assign","bind","n","arguments","length","t","r","hasOwnProperty","call","apply","_objectWithoutProperties","o","i","_objectWithoutPropertiesLoose","getOwnPropertySymbols","s","includes","propertyIsEnumerable","Option","_ref","children","disabled","divider","icon","label","selected","value","onPress","others","createElement","Pressable","className","styles","style","option","undefined","View","row","wide","content","Icon","Text","exports","displayName","propTypes","PropTypes","node","bool","func","string","oneOfType","number"],"sources":["../../../src/components/Menu/Menu.Option.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport { Icon, Pressable, Text, View } from '../../primitives';\nimport style from './Menu.module.css';\n\nconst Option = ({ children, disabled, divider, icon, label, selected, value, onPress, ...others }) => (\n <Pressable\n {...others}\n className={styles(\n style.option,\n value && style.value,\n divider && style.divider,\n disabled && style.disabled,\n selected && style.selected,\n others.className,\n )}\n onPress={!disabled && value ? onPress : undefined}\n >\n <View row wide className={style.content}>\n {icon && <Icon value={icon} className={style.icon} />}\n {label && <Text className={style.label}>{label}</Text>}\n {children}\n </View>\n </Pressable>\n);\n\nOption.displayName = 'Component:Menu:Option';\n\nOption.propTypes = {\n children: PropTypes.node,\n disabled: PropTypes.bool,\n divider: PropTypes.bool,\n icon: PropTypes.func,\n label: PropTypes.string,\n selected: PropTypes.bool,\n value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n onPress: PropTypes.func,\n};\n\nexport { Option };\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -12,7 +12,7 @@ var _primitives = require("../../primitives");
|
|
|
12
12
|
var _Modal = require("../Modal");
|
|
13
13
|
var _MenuModule = _interopRequireDefault(require("./Menu.module.css"));
|
|
14
14
|
var _Menu = require("./Menu.Option");
|
|
15
|
-
var _excluded = ["children", "options", "Template", "title", "visible", "onPress"];
|
|
15
|
+
var _excluded = ["children", "options", "selected", "Template", "title", "visible", "onPress"];
|
|
16
16
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
|
|
17
17
|
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) { ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } } return n; }, _extends.apply(null, arguments); }
|
|
18
18
|
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) { o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } } return i; }
|
|
@@ -21,6 +21,7 @@ var Menu = function Menu(_ref) {
|
|
|
21
21
|
var children = _ref.children,
|
|
22
22
|
_ref$options = _ref.options,
|
|
23
23
|
options = _ref$options === void 0 ? [] : _ref$options,
|
|
24
|
+
selected = _ref.selected,
|
|
24
25
|
_ref$Template = _ref.Template,
|
|
25
26
|
Template = _ref$Template === void 0 ? _Menu.Option : _ref$Template,
|
|
26
27
|
title = _ref.title,
|
|
@@ -37,8 +38,10 @@ var Menu = function Menu(_ref) {
|
|
|
37
38
|
}).map(function () {
|
|
38
39
|
var option = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
39
40
|
var index = arguments.length > 1 ? arguments[1] : undefined;
|
|
40
|
-
return /*#__PURE__*/_react["default"].createElement(Template, _extends({
|
|
41
|
-
key: index
|
|
41
|
+
return /*#__PURE__*/_react["default"].createElement(Template, _extends({
|
|
42
|
+
key: index
|
|
43
|
+
}, option, {
|
|
44
|
+
selected: option.value && selected === option.value,
|
|
42
45
|
onPress: function onPress(event) {
|
|
43
46
|
return _onPress(option.value, event);
|
|
44
47
|
},
|
|
@@ -77,6 +80,7 @@ Menu.propTypes = {
|
|
|
77
80
|
label: _propTypes["default"].string,
|
|
78
81
|
value: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number])
|
|
79
82
|
})),
|
|
83
|
+
selected: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
|
|
80
84
|
Template: _propTypes["default"].any,
|
|
81
85
|
title: _propTypes["default"].string,
|
|
82
86
|
visible: _propTypes["default"].bool,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Menu.js","names":["_propTypes","_interopRequireDefault","require","_react","_helpers","_hooks","_primitives","_Modal","_MenuModule","_Menu","_excluded","e","__esModule","_extends","Object","assign","bind","n","arguments","length","t","r","hasOwnProperty","call","apply","_objectWithoutProperties","o","i","_objectWithoutPropertiesLoose","getOwnPropertySymbols","s","includes","propertyIsEnumerable","Menu","_ref","children","_ref$options","options","_ref$Template","Template","Option","title","visible","_ref$onPress","onPress","others","_useDevice","useDevice","isMobile","testId","renderOptions","filter","option","map","undefined","index","createElement","key","
|
|
1
|
+
{"version":3,"file":"Menu.js","names":["_propTypes","_interopRequireDefault","require","_react","_helpers","_hooks","_primitives","_Modal","_MenuModule","_Menu","_excluded","e","__esModule","_extends","Object","assign","bind","n","arguments","length","t","r","hasOwnProperty","call","apply","_objectWithoutProperties","o","i","_objectWithoutPropertiesLoose","getOwnPropertySymbols","s","includes","propertyIsEnumerable","Menu","_ref","children","_ref$options","options","selected","_ref$Template","Template","Option","title","visible","_ref$onPress","onPress","others","_useDevice","useDevice","isMobile","testId","renderOptions","filter","option","map","undefined","index","createElement","key","value","event","concat","Layer","forceRender","tag","className","styles","style","menu","LayerContent","Fragment","Modal","onClose","onOverflow","exports","displayName","propTypes","PropTypes","node","arrayOf","shape","disabled","bool","divider","icon","func","label","string","oneOfType","number","any"],"sources":["../../../src/components/Menu/Menu.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport { useDevice } from '../../hooks';\nimport { Layer, LayerContent } from '../../primitives';\nimport { Modal } from '../Modal';\nimport style from './Menu.module.css';\nimport { Option } from './Menu.Option';\n\nconst Menu = ({\n children,\n options = [],\n selected,\n Template = Option,\n title,\n visible,\n onPress = () => {},\n ...others\n}) => {\n const { isMobile } = useDevice();\n\n const { testId } = others;\n\n const renderOptions = () =>\n options\n .filter((option) => !!option)\n .map((option = {}, index) => (\n <Template\n key={index}\n {...option}\n selected={option.value && selected === option.value}\n onPress={(event) => onPress(option.value, event)}\n testId={testId ? `${testId}-${index}` : undefined}\n />\n ));\n\n return !isMobile ? (\n <Layer\n forceRender={false}\n {...others}\n tag=\"menu\"\n visible={visible}\n className={styles(style.menu, visible && style.visible, others.className)}\n >\n {children}\n <LayerContent>{renderOptions()}</LayerContent>\n </Layer>\n ) : (\n <>\n {children}\n <Modal\n title={title}\n visible={visible}\n onClose={(event) => onPress(undefined, event)}\n onOverflow={(event) => onPress(undefined, event)}\n className={styles(style.menu, others.className)}\n testId={testId ? `${testId}-modal` : undefined}\n >\n {renderOptions()}\n </Modal>\n </>\n );\n};\n\nMenu.displayName = 'Component:Menu';\n\nMenu.propTypes = {\n children: PropTypes.node,\n options: PropTypes.arrayOf(\n PropTypes.shape({\n children: PropTypes.node,\n disabled: PropTypes.bool,\n divider: PropTypes.bool,\n icon: PropTypes.func,\n label: PropTypes.string,\n value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n }),\n ),\n selected: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n Template: PropTypes.any,\n title: PropTypes.string,\n visible: PropTypes.bool,\n onPress: PropTypes.func,\n};\n\nexport { Menu };\n"],"mappings":";;;;;;AAAA,IAAAA,UAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,MAAA,GAAAF,sBAAA,CAAAC,OAAA;AAEA,IAAAE,QAAA,GAAAF,OAAA;AACA,IAAAG,MAAA,GAAAH,OAAA;AACA,IAAAI,WAAA,GAAAJ,OAAA;AACA,IAAAK,MAAA,GAAAL,OAAA;AACA,IAAAM,WAAA,GAAAP,sBAAA,CAAAC,OAAA;AACA,IAAAO,KAAA,GAAAP,OAAA;AAAuC,IAAAQ,SAAA;AAAA,SAAAT,uBAAAU,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,gBAAAA,CAAA;AAAA,SAAAE,SAAA,WAAAA,QAAA,GAAAC,MAAA,CAAAC,MAAA,GAAAD,MAAA,CAAAC,MAAA,CAAAC,IAAA,eAAAC,CAAA,aAAAN,CAAA,MAAAA,CAAA,GAAAO,SAAA,CAAAC,MAAA,EAAAR,CAAA,UAAAS,CAAA,GAAAF,SAAA,CAAAP,CAAA,YAAAU,CAAA,IAAAD,CAAA,SAAAE,cAAA,CAAAC,IAAA,CAAAH,CAAA,EAAAC,CAAA,MAAAJ,CAAA,CAAAI,CAAA,IAAAD,CAAA,CAAAC,CAAA,eAAAJ,CAAA,KAAAJ,QAAA,CAAAW,KAAA,OAAAN,SAAA;AAAA,SAAAO,yBAAAd,CAAA,EAAAS,CAAA,gBAAAT,CAAA,iBAAAe,CAAA,EAAAL,CAAA,EAAAM,CAAA,GAAAC,6BAAA,CAAAjB,CAAA,EAAAS,CAAA,OAAAN,MAAA,CAAAe,qBAAA,QAAAC,CAAA,GAAAhB,MAAA,CAAAe,qBAAA,CAAAlB,CAAA,QAAAU,CAAA,MAAAA,CAAA,GAAAS,CAAA,CAAAX,MAAA,EAAAE,CAAA,MAAAK,CAAA,GAAAI,CAAA,CAAAT,CAAA,GAAAD,CAAA,CAAAW,QAAA,CAAAL,CAAA,QAAAM,oBAAA,CAAAT,IAAA,CAAAZ,CAAA,EAAAe,CAAA,MAAAC,CAAA,CAAAD,CAAA,IAAAf,CAAA,CAAAe,CAAA,eAAAC,CAAA;AAAA,SAAAC,8BAAAP,CAAA,EAAAV,CAAA,gBAAAU,CAAA,iBAAAD,CAAA,gBAAAH,CAAA,IAAAI,CAAA,WAAAC,cAAA,CAAAC,IAAA,CAAAF,CAAA,EAAAJ,CAAA,SAAAN,CAAA,CAAAoB,QAAA,CAAAd,CAAA,aAAAG,CAAA,CAAAH,CAAA,IAAAI,CAAA,CAAAJ,CAAA,cAAAG,CAAA;AAEvC,IAAMa,IAAI,GAAG,SAAPA,IAAIA,CAAAC,IAAA,EASJ;EAAA,IARJC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;IAAAC,YAAA,GAAAF,IAAA,CACRG,OAAO;IAAPA,OAAO,GAAAD,YAAA,cAAG,EAAE,GAAAA,YAAA;IACZE,QAAQ,GAAAJ,IAAA,CAARI,QAAQ;IAAAC,aAAA,GAAAL,IAAA,CACRM,QAAQ;IAARA,QAAQ,GAAAD,aAAA,cAAGE,YAAM,GAAAF,aAAA;IACjBG,KAAK,GAAAR,IAAA,CAALQ,KAAK;IACLC,OAAO,GAAAT,IAAA,CAAPS,OAAO;IAAAC,YAAA,GAAAV,IAAA,CACPW,OAAO;IAAPA,QAAO,GAAAD,YAAA,cAAG,YAAM,CAAC,CAAC,GAAAA,YAAA;IACfE,MAAM,GAAArB,wBAAA,CAAAS,IAAA,EAAAxB,SAAA;EAET,IAAAqC,UAAA,GAAqB,IAAAC,gBAAS,EAAC,CAAC;IAAxBC,QAAQ,GAAAF,UAAA,CAARE,QAAQ;EAEhB,IAAQC,MAAM,GAAKJ,MAAM,CAAjBI,MAAM;EAEd,IAAMC,aAAa,GAAG,SAAhBA,aAAaA,CAAA;IAAA,OACjBd,OAAO,CACJe,MAAM,CAAC,UAACC,MAAM;MAAA,OAAK,CAAC,CAACA,MAAM;IAAA,EAAC,CAC5BC,GAAG,CAAC;MAAA,IAACD,MAAM,GAAAnC,SAAA,CAAAC,MAAA,QAAAD,SAAA,QAAAqC,SAAA,GAAArC,SAAA,MAAG,CAAC,CAAC;MAAA,IAAEsC,KAAK,GAAAtC,SAAA,CAAAC,MAAA,OAAAD,SAAA,MAAAqC,SAAA;MAAA,oBACtBpD,MAAA,YAAAsD,aAAA,CAACjB,QAAQ,EAAA3B,QAAA;QACP6C,GAAG,EAAEF;MAAM,GACPH,MAAM;QACVf,QAAQ,EAAEe,MAAM,CAACM,KAAK,IAAIrB,QAAQ,KAAKe,MAAM,CAACM,KAAM;QACpDd,OAAO,EAAE,SAAAA,QAACe,KAAK;UAAA,OAAKf,QAAO,CAACQ,MAAM,CAACM,KAAK,EAAEC,KAAK,CAAC;QAAA,CAAC;QACjDV,MAAM,EAAEA,MAAM,MAAAW,MAAA,CAAMX,MAAM,OAAAW,MAAA,CAAIL,KAAK,IAAKD;MAAU,EACnD,CAAC;IAAA,CACH,CAAC;EAAA;EAEN,OAAO,CAACN,QAAQ,gBACd9C,MAAA,YAAAsD,aAAA,CAACnD,WAAA,CAAAwD,KAAK,EAAAjD,QAAA;IACJkD,WAAW,EAAE;EAAM,GACfjB,MAAM;IACVkB,GAAG,EAAC,MAAM;IACVrB,OAAO,EAAEA,OAAQ;IACjBsB,SAAS,EAAE,IAAAC,eAAM,EAACC,sBAAK,CAACC,IAAI,EAAEzB,OAAO,IAAIwB,sBAAK,CAACxB,OAAO,EAAEG,MAAM,CAACmB,SAAS;EAAE,IAEzE9B,QAAQ,eACThC,MAAA,YAAAsD,aAAA,CAACnD,WAAA,CAAA+D,YAAY,QAAElB,aAAa,CAAC,CAAgB,CACxC,CAAC,gBAERhD,MAAA,YAAAsD,aAAA,CAAAtD,MAAA,YAAAmE,QAAA,QACGnC,QAAQ,eACThC,MAAA,YAAAsD,aAAA,CAAClD,MAAA,CAAAgE,KAAK;IACJ7B,KAAK,EAAEA,KAAM;IACbC,OAAO,EAAEA,OAAQ;IACjB6B,OAAO,EAAE,SAAAA,QAACZ,KAAK;MAAA,OAAKf,QAAO,CAACU,SAAS,EAAEK,KAAK,CAAC;IAAA,CAAC;IAC9Ca,UAAU,EAAE,SAAAA,WAACb,KAAK;MAAA,OAAKf,QAAO,CAACU,SAAS,EAAEK,KAAK,CAAC;IAAA,CAAC;IACjDK,SAAS,EAAE,IAAAC,eAAM,EAACC,sBAAK,CAACC,IAAI,EAAEtB,MAAM,CAACmB,SAAS,CAAE;IAChDf,MAAM,EAAEA,MAAM,MAAAW,MAAA,CAAMX,MAAM,cAAWK;EAAU,GAE9CJ,aAAa,CAAC,CACV,CACP,CACH;AACH,CAAC;AAACuB,OAAA,CAAAzC,IAAA,GAAAA,IAAA;AAEFA,IAAI,CAAC0C,WAAW,GAAG,gBAAgB;AAEnC1C,IAAI,CAAC2C,SAAS,GAAG;EACfzC,QAAQ,EAAE0C,qBAAS,CAACC,IAAI;EACxBzC,OAAO,EAAEwC,qBAAS,CAACE,OAAO,CACxBF,qBAAS,CAACG,KAAK,CAAC;IACd7C,QAAQ,EAAE0C,qBAAS,CAACC,IAAI;IACxBG,QAAQ,EAAEJ,qBAAS,CAACK,IAAI;IACxBC,OAAO,EAAEN,qBAAS,CAACK,IAAI;IACvBE,IAAI,EAAEP,qBAAS,CAACQ,IAAI;IACpBC,KAAK,EAAET,qBAAS,CAACU,MAAM;IACvB5B,KAAK,EAAEkB,qBAAS,CAACW,SAAS,CAAC,CAACX,qBAAS,CAACU,MAAM,EAAEV,qBAAS,CAACY,MAAM,CAAC;EACjE,CAAC,CACH,CAAC;EACDnD,QAAQ,EAAEuC,qBAAS,CAACW,SAAS,CAAC,CAACX,qBAAS,CAACU,MAAM,EAAEV,qBAAS,CAACY,MAAM,CAAC,CAAC;EACnEjD,QAAQ,EAAEqC,qBAAS,CAACa,GAAG;EACvBhD,KAAK,EAAEmC,qBAAS,CAACU,MAAM;EACvB5C,OAAO,EAAEkC,qBAAS,CAACK,IAAI;EACvBrC,OAAO,EAAEgC,qBAAS,CAACQ;AACrB,CAAC","ignoreList":[]}
|
|
@@ -17,13 +17,13 @@
|
|
|
17
17
|
width: 100%;
|
|
18
18
|
}
|
|
19
19
|
|
|
20
|
-
.menu .option.value:hover:not(.disabled) {
|
|
20
|
+
.menu .option.value:hover:not(.disabled):not(.selected) {
|
|
21
21
|
background-color: var(--mirai-ui-menu-option-background-active);
|
|
22
22
|
cursor: pointer;
|
|
23
23
|
}
|
|
24
24
|
|
|
25
|
-
.menu .option.value:hover:not(.disabled) .icon,
|
|
26
|
-
.menu .option.value:hover:not(.disabled) .label {
|
|
25
|
+
.menu .option.value:hover:not(.disabled):not(.selected) .icon,
|
|
26
|
+
.menu .option.value:hover:not(.disabled):not(.selected) .label {
|
|
27
27
|
color: var(--mirai-ui-menu-option-color-active);
|
|
28
28
|
cursor: pointer;
|
|
29
29
|
}
|
|
@@ -47,6 +47,15 @@
|
|
|
47
47
|
white-space: nowrap;
|
|
48
48
|
}
|
|
49
49
|
|
|
50
|
+
.menu .option.selected {
|
|
51
|
+
background-color: var(--mirai-ui-menu-option-selected-background);
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.menu .option.selected .icon,
|
|
55
|
+
.menu .option.selected .label {
|
|
56
|
+
color: var(--mirai-ui-menu-option-selected-color);
|
|
57
|
+
}
|
|
58
|
+
|
|
50
59
|
.menu .option.disabled .icon,
|
|
51
60
|
.menu .option.disabled .label {
|
|
52
61
|
color: var(--mirai-ui-menu-option-color-disabled);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Menu.stories.js","names":["_react","_interopRequireWildcard","require","_","_2","_Menu","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","_typeof","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","_extends","assign","bind","arguments","length","apply","_slicedToArray","_arrayWithHoles","_iterableToArrayLimit","_unsupportedIterableToArray","_nonIterableRest","TypeError","_arrayLikeToArray","toString","slice","constructor","name","Array","from","test","l","Symbol","iterator","f","o","next","done","push","value","isArray","_default","title","exports","Story","props","_useState","useState","_useState2","visible","setVisible","handlePress","_console","_len","others","_key","console","log","concat","createElement","Menu","onPress","Action","className","storyName","args","options","children","Fragment","Text","bold","divider","undefined","label","icon","ICON","ADD","testId","disabled","Button","small","secondary","wide","style","argTypes"],"sources":["../../../src/components/Menu/Menu.stories.jsx"],"sourcesContent":["import React, { useState } from 'react';\n\nimport { Button } from '../';\nimport { Action, ICON, Text } from '../..';\nimport { Menu } from './Menu';\n\nexport default { title: 'Components' };\n\nexport const Story = (props) => {\n const [visible, setVisible] = useState(false);\n\n const handlePress = (value, ...others) => {\n console.log('<Menu>::onPress', value, ...others);\n if (!value) setVisible(false);\n };\n\n return (\n <Menu {...props} visible={visible} onPress={handlePress}>\n <Action onPress={() => setVisible(!visible)}>\n <span className=\"children\">children</span>\n </Action>\n </Menu>\n );\n};\n\nStory.storyName = 'Menu';\n\nStory.args = {\n options: [\n {\n children: (\n <>\n <Text bold>Lorem</Text>\n <Text>Ipsum is simply dummy text...</Text>\n </>\n ),\n divider: true,\n },\n undefined,\n { label: 'Lorem Ipsum is simply dummy text...', divider: true },\n undefined,\n undefined,\n { icon: ICON.ADD, label: 'Item 1', value: 'one', testId: 'custom-test' },\n { icon: ICON.ADD, label: 'Item 2', disabled: true, value: 'two' },\n { label: 'Item 3', divider: true, value: 'three' },\n { label: 'Item 4', children: <Button small>Add</Button>, value: 'four' },\n {\n children: (\n <Button secondary wide>\n Logout\n </Button>\n ),\n },\n ],\n title: 'title',\n // inherited properties\n testId: 'test-story',\n style: {},\n};\n\nStory.argTypes = {};\n"],"mappings":"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
|
|
1
|
+
{"version":3,"file":"Menu.stories.js","names":["_react","_interopRequireWildcard","require","_","_2","_Menu","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","_typeof","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","_extends","assign","bind","arguments","length","apply","_slicedToArray","_arrayWithHoles","_iterableToArrayLimit","_unsupportedIterableToArray","_nonIterableRest","TypeError","_arrayLikeToArray","toString","slice","constructor","name","Array","from","test","l","Symbol","iterator","f","o","next","done","push","value","isArray","_default","title","exports","Story","props","_useState","useState","_useState2","visible","setVisible","handlePress","_console","_len","others","_key","console","log","concat","createElement","Menu","onPress","Action","className","storyName","args","options","children","Fragment","Text","bold","divider","undefined","label","icon","ICON","ADD","testId","disabled","Button","small","secondary","wide","selected","style","argTypes"],"sources":["../../../src/components/Menu/Menu.stories.jsx"],"sourcesContent":["import React, { useState } from 'react';\n\nimport { Button } from '../';\nimport { Action, ICON, Text } from '../..';\nimport { Menu } from './Menu';\n\nexport default { title: 'Components' };\n\nexport const Story = (props) => {\n const [visible, setVisible] = useState(false);\n\n const handlePress = (value, ...others) => {\n console.log('<Menu>::onPress', value, ...others);\n if (!value) setVisible(false);\n };\n\n return (\n <Menu {...props} visible={visible} onPress={handlePress}>\n <Action onPress={() => setVisible(!visible)}>\n <span className=\"children\">children</span>\n </Action>\n </Menu>\n );\n};\n\nStory.storyName = 'Menu';\n\nStory.args = {\n options: [\n {\n children: (\n <>\n <Text bold>Lorem</Text>\n <Text>Ipsum is simply dummy text...</Text>\n </>\n ),\n divider: true,\n },\n undefined,\n { label: 'Lorem Ipsum is simply dummy text...', divider: true },\n undefined,\n undefined,\n { icon: ICON.ADD, label: 'Item 1', value: 'one', testId: 'custom-test' },\n { icon: ICON.ADD, label: 'Item 2', disabled: true, value: 'two' },\n { label: 'Item 3', divider: true, value: 'three' },\n { label: 'Item 4', children: <Button small>Add</Button>, value: 'four' },\n {\n children: (\n <Button secondary wide>\n Logout\n </Button>\n ),\n },\n ],\n selected: 'three',\n title: 'title',\n // inherited properties\n testId: 'test-story',\n style: {},\n};\n\nStory.argTypes = {};\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -38,6 +38,163 @@ exports[`component:<Menu> prop:children 1`] = `
|
|
|
38
38
|
</DocumentFragment>
|
|
39
39
|
`;
|
|
40
40
|
|
|
41
|
+
exports[`component:<Menu> prop:options & visible & selected 1`] = `
|
|
42
|
+
<DocumentFragment>
|
|
43
|
+
<ui-menu
|
|
44
|
+
class="container"
|
|
45
|
+
>
|
|
46
|
+
<ui-button
|
|
47
|
+
class="pressable button"
|
|
48
|
+
tabindex="0"
|
|
49
|
+
>
|
|
50
|
+
Action
|
|
51
|
+
</ui-button>
|
|
52
|
+
</ui-menu>
|
|
53
|
+
<ui-menu-content
|
|
54
|
+
class="layer"
|
|
55
|
+
style="left: 0px; top: 0px;"
|
|
56
|
+
>
|
|
57
|
+
<div
|
|
58
|
+
class="menu visible"
|
|
59
|
+
>
|
|
60
|
+
<ui-pressable
|
|
61
|
+
class="pressable option divider"
|
|
62
|
+
tabindex="0"
|
|
63
|
+
>
|
|
64
|
+
<ui-view
|
|
65
|
+
class="view row wide content"
|
|
66
|
+
>
|
|
67
|
+
<ui-text
|
|
68
|
+
class="text paragraph label"
|
|
69
|
+
>
|
|
70
|
+
Lorem Ipsum...
|
|
71
|
+
</ui-text>
|
|
72
|
+
</ui-view>
|
|
73
|
+
</ui-pressable>
|
|
74
|
+
<ui-pressable
|
|
75
|
+
class="pressable option value"
|
|
76
|
+
tabindex="0"
|
|
77
|
+
>
|
|
78
|
+
<ui-view
|
|
79
|
+
class="view row wide content"
|
|
80
|
+
>
|
|
81
|
+
<ui-icon
|
|
82
|
+
class="icon headline-3 icon"
|
|
83
|
+
>
|
|
84
|
+
<svg
|
|
85
|
+
fill="currentColor"
|
|
86
|
+
height="1em"
|
|
87
|
+
stroke="currentColor"
|
|
88
|
+
stroke-width="0"
|
|
89
|
+
viewBox="0 0 24 24"
|
|
90
|
+
width="1em"
|
|
91
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
92
|
+
>
|
|
93
|
+
<path
|
|
94
|
+
d="M0 0h24v24H0V0z"
|
|
95
|
+
fill="none"
|
|
96
|
+
/>
|
|
97
|
+
<path
|
|
98
|
+
d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
|
|
99
|
+
/>
|
|
100
|
+
</svg>
|
|
101
|
+
</ui-icon>
|
|
102
|
+
<ui-text
|
|
103
|
+
class="text paragraph label"
|
|
104
|
+
>
|
|
105
|
+
Item 1
|
|
106
|
+
</ui-text>
|
|
107
|
+
</ui-view>
|
|
108
|
+
</ui-pressable>
|
|
109
|
+
<ui-pressable
|
|
110
|
+
class="pressable option value disabled"
|
|
111
|
+
tabindex="0"
|
|
112
|
+
>
|
|
113
|
+
<ui-view
|
|
114
|
+
class="view row wide content"
|
|
115
|
+
>
|
|
116
|
+
<ui-icon
|
|
117
|
+
class="icon headline-3 icon"
|
|
118
|
+
>
|
|
119
|
+
<svg
|
|
120
|
+
fill="currentColor"
|
|
121
|
+
height="1em"
|
|
122
|
+
stroke="currentColor"
|
|
123
|
+
stroke-width="0"
|
|
124
|
+
viewBox="0 0 24 24"
|
|
125
|
+
width="1em"
|
|
126
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
127
|
+
>
|
|
128
|
+
<path
|
|
129
|
+
d="M0 0h24v24H0V0z"
|
|
130
|
+
fill="none"
|
|
131
|
+
/>
|
|
132
|
+
<path
|
|
133
|
+
d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
|
|
134
|
+
/>
|
|
135
|
+
</svg>
|
|
136
|
+
</ui-icon>
|
|
137
|
+
<ui-text
|
|
138
|
+
class="text paragraph label"
|
|
139
|
+
>
|
|
140
|
+
Item 2
|
|
141
|
+
</ui-text>
|
|
142
|
+
</ui-view>
|
|
143
|
+
</ui-pressable>
|
|
144
|
+
<ui-pressable
|
|
145
|
+
class="pressable option value divider"
|
|
146
|
+
tabindex="0"
|
|
147
|
+
>
|
|
148
|
+
<ui-view
|
|
149
|
+
class="view row wide content"
|
|
150
|
+
>
|
|
151
|
+
<ui-text
|
|
152
|
+
class="text paragraph label"
|
|
153
|
+
>
|
|
154
|
+
Item 3
|
|
155
|
+
</ui-text>
|
|
156
|
+
</ui-view>
|
|
157
|
+
</ui-pressable>
|
|
158
|
+
<ui-pressable
|
|
159
|
+
class="pressable option value"
|
|
160
|
+
tabindex="0"
|
|
161
|
+
>
|
|
162
|
+
<ui-view
|
|
163
|
+
class="view row wide content"
|
|
164
|
+
>
|
|
165
|
+
<ui-text
|
|
166
|
+
class="text paragraph label"
|
|
167
|
+
>
|
|
168
|
+
Item 4
|
|
169
|
+
</ui-text>
|
|
170
|
+
<ui-button
|
|
171
|
+
class="pressable button small"
|
|
172
|
+
tabindex="0"
|
|
173
|
+
>
|
|
174
|
+
Add
|
|
175
|
+
</ui-button>
|
|
176
|
+
</ui-view>
|
|
177
|
+
</ui-pressable>
|
|
178
|
+
<ui-pressable
|
|
179
|
+
class="pressable option"
|
|
180
|
+
tabindex="0"
|
|
181
|
+
>
|
|
182
|
+
<ui-view
|
|
183
|
+
class="view row wide content"
|
|
184
|
+
>
|
|
185
|
+
<ui-button
|
|
186
|
+
class="pressable button"
|
|
187
|
+
tabindex="0"
|
|
188
|
+
>
|
|
189
|
+
Add
|
|
190
|
+
</ui-button>
|
|
191
|
+
</ui-view>
|
|
192
|
+
</ui-pressable>
|
|
193
|
+
</div>
|
|
194
|
+
</ui-menu-content>
|
|
195
|
+
</DocumentFragment>
|
|
196
|
+
`;
|
|
197
|
+
|
|
41
198
|
exports[`component:<Menu> prop:options & visible 1`] = `
|
|
42
199
|
<DocumentFragment>
|
|
43
200
|
<ui-menu
|
|
@@ -229,6 +229,8 @@
|
|
|
229
229
|
--mirai-ui-menu-option-background-active: var(--mirai-ui-content-background);
|
|
230
230
|
--mirai-ui-menu-option-color-active: var(--mirai-ui-content);
|
|
231
231
|
--mirai-ui-menu-option-color-disabled: var(--mirai-ui-content-border);
|
|
232
|
+
--mirai-ui-menu-option-selected-background: var(--mirai-ui-accent);
|
|
233
|
+
--mirai-ui-menu-option-selected-color: var(--mirai-ui-base);
|
|
232
234
|
--mirai-ui-menu-shadow: var(--mirai-ui-shadow);
|
|
233
235
|
|
|
234
236
|
/* Modal */
|