omim - fix toggle buttons
This commit is contained in:
dntzhang
parent
72c9555455
commit
c15d3782e4
|
|
@ -94,7 +94,7 @@
|
|||
/***/ (function(module, exports, __webpack_require__) {
|
||||
|
||||
"use strict";
|
||||
eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\n__webpack_require__(/*! ../../src/toggle-buttons/index.tsx */ \"./src/toggle-buttons/index.tsx\");\nvar omi_1 = __webpack_require__(/*! omi */ \"./node_modules/_omi@6.6.5@omi/dist/omi.esm.js\");\nvar items = [\n { icon: 'favorite', label: 'Favorites', selected: true },\n { icon: 'location_on', label: 'Nearby' },\n { icon: 'restore', label: 'Recents' }\n];\nfunction onChange(item) {\n console.log(item);\n}\nomi_1.render(omi_1.h(\"div\", null,\n omi_1.h(\"m-toggle-buttons\", { \"multiple-selection\": true, items: [\n { selected: true, icon: 'account_balance' },\n { icon: 'stars' },\n { icon: 'av_timer' },\n { disabled: true, icon: 'equalizer' }\n ] }),\n omi_1.h(\"br\", null),\n omi_1.h(\"br\", null),\n omi_1.h(\"m-toggle-buttons\", { \"multiple-selection\": true, items: [\n { selected: true, path: 'M15 15H3v2h12v-2zm0-8H3v2h12V7zM3 13h18v-2H3v2zm0 8h18v-2H3v2zM3 3v2h18V3H3z' },\n { path: 'M7 15v2h10v-2H7zm-4 6h18v-2H3v2zm0-8h18v-2H3v2zm4-6v2h10V7H7zM3 3v2h18V3H3z' },\n { path: 'M3 21h18v-2H3v2zm6-4h12v-2H9v2zm-6-4h18v-2H3v2zm6-4h12V7H9v2zM3 3v2h18V3H3z' },\n { disabled: true, path: 'M3 21h18v-2H3v2zm0-4h18v-2H3v2zm0-4h18v-2H3v2zm0-4h18V7H3v2zm0-6v2h18V3H3z' }\n ] }),\n omi_1.h(\"br\", null),\n omi_1.h(\"br\", null),\n omi_1.h(\"m-toggle-buttons\", { items: [\n { selected: true, path: 'M15 15H3v2h12v-2zm0-8H3v2h12V7zM3 13h18v-2H3v2zm0 8h18v-2H3v2zM3 3v2h18V3H3z' },\n { path: 'M7 15v2h10v-2H7zm-4 6h18v-2H3v2zm0-8h18v-2H3v2zm4-6v2h10V7H7zM3 3v2h18V3H3z' },\n { path: 'M3 21h18v-2H3v2zm6-4h12v-2H9v2zm-6-4h18v-2H3v2zm6-4h12V7H9v2zM3 3v2h18V3H3z' },\n { disabled: true, path: 'M3 21h18v-2H3v2zm0-4h18v-2H3v2zm0-4h18v-2H3v2zm0-4h18V7H3v2zm0-6v2h18V3H3z' }\n ] })), 'body');\n\n\n//# sourceURL=webpack:///./demos/toggle-buttons/index.js?");
|
||||
eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\n__webpack_require__(/*! ../../src/toggle-buttons/index.tsx */ \"./src/toggle-buttons/index.tsx\");\nvar omi_1 = __webpack_require__(/*! omi */ \"./node_modules/_omi@6.6.5@omi/dist/omi.esm.js\");\nvar items = [\n { icon: 'favorite', label: 'Favorites', selected: true },\n { icon: 'location_on', label: 'Nearby' },\n { icon: 'restore', label: 'Recents' }\n];\nfunction onChange(item) {\n console.log(item);\n}\nomi_1.render(omi_1.h(\"div\", null,\n omi_1.h(\"m-toggle-buttons\", { items: [\n { selected: true, path: 'M15 15H3v2h12v-2zm0-8H3v2h12V7zM3 13h18v-2H3v2zm0 8h18v-2H3v2zM3 3v2h18V3H3z' },\n { path: 'M7 15v2h10v-2H7zm-4 6h18v-2H3v2zm0-8h18v-2H3v2zm4-6v2h10V7H7zM3 3v2h18V3H3z' },\n { path: 'M3 21h18v-2H3v2zm6-4h12v-2H9v2zm-6-4h18v-2H3v2zm6-4h12V7H9v2zM3 3v2h18V3H3z' },\n { disabled: true, path: 'M3 21h18v-2H3v2zm0-4h18v-2H3v2zm0-4h18v-2H3v2zm0-4h18V7H3v2zm0-6v2h18V3H3z' }\n ] }),\n omi_1.h(\"br\", null),\n omi_1.h(\"br\", null),\n omi_1.h(\"m-toggle-buttons\", { \"multiple-selection\": true, items: [\n { selected: true, icon: 'account_balance', value: 0 },\n { icon: 'stars', value: 1 },\n { icon: 'av_timer', value: 2 },\n { disabled: true, icon: 'equalizer', value: 3 }\n ] })), 'body');\n\n\n//# sourceURL=webpack:///./demos/toggle-buttons/index.js?");
|
||||
|
||||
/***/ }),
|
||||
|
||||
|
|
@ -281,7 +281,7 @@ eval("\n var result = __webpack_require__(/*! !../../node_modules/_css-lo
|
|||
/***/ (function(module, exports, __webpack_require__) {
|
||||
|
||||
"use strict";
|
||||
eval("\nvar __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar omi_1 = __webpack_require__(/*! omi */ \"./node_modules/_omi@6.6.5@omi/dist/omi.esm.js\");\nvar css = __webpack_require__(/*! ./index.scss */ \"./src/toggle-buttons/index.scss\");\n//@ts-ignore\n__webpack_require__(/*! ../theme.ts */ \"./src/theme.ts\");\nvar ripple_1 = __webpack_require__(/*! @material/ripple */ \"./node_modules/_@material_ripple@2.3.0@@material/ripple/index.js\");\nvar ToggleButtons = /** @class */ (function (_super) {\n __extends(ToggleButtons, _super);\n function ToggleButtons() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n ToggleButtons.prototype.installed = function () {\n this.shadowRoot.querySelectorAll('.ripple').forEach(function (dom) {\n console.log(123);\n new ripple_1.MDCRipple(dom);\n });\n };\n ToggleButtons.prototype.render = function (props) {\n return omi_1.h(\"div\", { class: \"m-root\" }, props.items.map(function (item) { return omi_1.h(\"button\", { class: omi_1.classNames(\"mb-root mtb-root\", {\n 'selected': item.selected,\n 'disabled': item.disabled\n }), tabindex: \"0\", disabled: item.disabled, type: \"button\", value: \"left\" },\n typeof item.icon === 'string' ? omi_1.h(\"i\", { class: 'material-icons' }, item.icon) : omi_1.h(\"span\", { class: \"mtb-label\" },\n omi_1.h(\"svg\", { class: \"msi-root\", focusable: \"false\", viewBox: \"0 0 24 24\", \"aria-hidden\": \"true\", role: \"presentation\" },\n omi_1.h(\"path\", { d: item.path }),\n omi_1.h(\"path\", { fill: \"none\", d: \"M0 0h24v24H0z\" }))),\n !item.disabled && omi_1.h(\"span\", { class: \"ripple ripple-surface\" })); }));\n };\n ToggleButtons.defaultProps = {};\n ToggleButtons.propTypes = {};\n ToggleButtons.css = css;\n ToggleButtons = __decorate([\n omi_1.tag('m-toggle-buttons')\n ], ToggleButtons);\n return ToggleButtons;\n}(omi_1.WeElement));\n\n\n//# sourceURL=webpack:///./src/toggle-buttons/index.tsx?");
|
||||
eval("\nvar __extends = (this && this.__extends) || (function () {\n var extendStatics = function (d, b) {\n extendStatics = Object.setPrototypeOf ||\n ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||\n function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };\n return extendStatics(d, b);\n };\n return function (d, b) {\n extendStatics(d, b);\n function __() { this.constructor = d; }\n d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());\n };\n})();\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\n var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\n if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\n else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\n return c > 3 && r && Object.defineProperty(target, key, r), r;\n};\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar omi_1 = __webpack_require__(/*! omi */ \"./node_modules/_omi@6.6.5@omi/dist/omi.esm.js\");\nvar css = __webpack_require__(/*! ./index.scss */ \"./src/toggle-buttons/index.scss\");\n//@ts-ignore\n__webpack_require__(/*! ../theme.ts */ \"./src/theme.ts\");\nvar ripple_1 = __webpack_require__(/*! @material/ripple */ \"./node_modules/_@material_ripple@2.3.0@@material/ripple/index.js\");\nvar ToggleButtons = /** @class */ (function (_super) {\n __extends(ToggleButtons, _super);\n function ToggleButtons() {\n var _this = _super !== null && _super.apply(this, arguments) || this;\n _this.clickHandler = function (item) {\n if (item.disabled)\n return;\n if (_this.props.multipleSelection) {\n item.selected = !item.selected;\n _this.fire('change', _this.props.items);\n }\n else if (!item.selected) {\n _this.props.items.forEach(function (item) { return item.selected = false; });\n item.selected = true;\n _this.fire('change', item);\n }\n _this.update(true);\n };\n return _this;\n }\n ToggleButtons.prototype.installed = function () {\n this.shadowRoot.querySelectorAll('.ripple').forEach(function (dom) {\n console.log(123);\n new ripple_1.MDCRipple(dom);\n });\n };\n ToggleButtons.prototype.render = function (props) {\n var _this = this;\n return omi_1.h(\"div\", { class: \"m-root\" }, props.items.map(function (item) { return omi_1.h(\"button\", { class: omi_1.classNames(\"mb-root mtb-root\", {\n 'selected': item.selected,\n 'disabled': item.disabled\n }), tabindex: \"0\", disabled: item.disabled, onClick: function (_) { return _this.clickHandler(item); }, type: \"button\" },\n typeof item.icon === 'string' ? omi_1.h(\"i\", { class: 'material-icons' }, item.icon) : omi_1.h(\"span\", { class: \"mtb-label\" },\n omi_1.h(\"svg\", { class: \"msi-root\", focusable: \"false\", viewBox: \"0 0 24 24\", \"aria-hidden\": \"true\", role: \"presentation\" },\n omi_1.h(\"path\", { d: item.path }),\n omi_1.h(\"path\", { fill: \"none\", d: \"M0 0h24v24H0z\" }))),\n !item.disabled && omi_1.h(\"span\", { class: \"ripple ripple-surface\" })); }));\n };\n ToggleButtons.defaultProps = {};\n ToggleButtons.propTypes = {\n multipleSelection: Boolean,\n items: Array\n };\n ToggleButtons.css = css;\n ToggleButtons = __decorate([\n omi_1.tag('m-toggle-buttons')\n ], ToggleButtons);\n return ToggleButtons;\n}(omi_1.WeElement));\n\n\n//# sourceURL=webpack:///./src/toggle-buttons/index.tsx?");
|
||||
|
||||
/***/ })
|
||||
|
||||
|
|
|
|||
|
|
@ -15,30 +15,19 @@ function onChange(item) {
|
|||
|
||||
render(
|
||||
<div>
|
||||
<m-toggle-buttons multiple-selection items={[
|
||||
|
||||
{ selected: true, icon: 'account_balance' },
|
||||
{ icon: 'stars' },
|
||||
{ icon: 'av_timer' },
|
||||
{ disabled: true, icon: 'equalizer' }
|
||||
]}></m-toggle-buttons>
|
||||
<br /><br />
|
||||
|
||||
<m-toggle-buttons multiple-selection items={[
|
||||
|
||||
{ selected: true, path: 'M15 15H3v2h12v-2zm0-8H3v2h12V7zM3 13h18v-2H3v2zm0 8h18v-2H3v2zM3 3v2h18V3H3z' },
|
||||
{ path: 'M7 15v2h10v-2H7zm-4 6h18v-2H3v2zm0-8h18v-2H3v2zm4-6v2h10V7H7zM3 3v2h18V3H3z' },
|
||||
{ path: 'M3 21h18v-2H3v2zm6-4h12v-2H9v2zm-6-4h18v-2H3v2zm6-4h12V7H9v2zM3 3v2h18V3H3z' },
|
||||
{ disabled: true, path: 'M3 21h18v-2H3v2zm0-4h18v-2H3v2zm0-4h18v-2H3v2zm0-4h18V7H3v2zm0-6v2h18V3H3z' }
|
||||
]}></m-toggle-buttons>
|
||||
<br /><br />
|
||||
<m-toggle-buttons items={[
|
||||
|
||||
{ selected: true, path: 'M15 15H3v2h12v-2zm0-8H3v2h12V7zM3 13h18v-2H3v2zm0 8h18v-2H3v2zM3 3v2h18V3H3z' },
|
||||
{ path: 'M7 15v2h10v-2H7zm-4 6h18v-2H3v2zm0-8h18v-2H3v2zm4-6v2h10V7H7zM3 3v2h18V3H3z' },
|
||||
{ path: 'M3 21h18v-2H3v2zm6-4h12v-2H9v2zm-6-4h18v-2H3v2zm6-4h12V7H9v2zM3 3v2h18V3H3z' },
|
||||
{ disabled: true, path: 'M3 21h18v-2H3v2zm0-4h18v-2H3v2zm0-4h18v-2H3v2zm0-4h18V7H3v2zm0-6v2h18V3H3z' }
|
||||
]}></m-toggle-buttons>
|
||||
<br /><br />
|
||||
<m-toggle-buttons multiple-selection items={[
|
||||
{ selected: true, icon: 'account_balance', value: 0 },
|
||||
{ icon: 'stars', value: 1 },
|
||||
{ icon: 'av_timer', value: 2 },
|
||||
{ disabled: true, icon: 'equalizer', value: 3 }
|
||||
]}></m-toggle-buttons>
|
||||
</div>
|
||||
, 'body')
|
||||
|
||||
|
|
|
|||
|
|
@ -10,23 +10,35 @@
|
|||
|
||||
<body>
|
||||
<script src="https://tencent.github.io/omi/packages/omi/dist/omi.dev.js"></script>
|
||||
<script src="../../src/bottom-nav/index.js"></script>
|
||||
<script src="../../src/toggle-buttons/index.js"></script>
|
||||
|
||||
<div>
|
||||
<m-toggle-buttons id="myBtnsA" items="[
|
||||
{ selected: true, path: 'M15 15H3v2h12v-2zm0-8H3v2h12V7zM3 13h18v-2H3v2zm0 8h18v-2H3v2zM3 3v2h18V3H3z' },
|
||||
{ path: 'M7 15v2h10v-2H7zm-4 6h18v-2H3v2zm0-8h18v-2H3v2zm4-6v2h10V7H7zM3 3v2h18V3H3z' },
|
||||
{ path: 'M3 21h18v-2H3v2zm6-4h12v-2H9v2zm-6-4h18v-2H3v2zm6-4h12V7H9v2zM3 3v2h18V3H3z' },
|
||||
{ disabled: true, path: 'M3 21h18v-2H3v2zm0-4h18v-2H3v2zm0-4h18v-2H3v2zm0-4h18V7H3v2zm0-6v2h18V3H3z' }
|
||||
]"></m-toggle-buttons>
|
||||
<br /><br />
|
||||
<m-toggle-buttons id="myBtnsB"multiple-selection items="[
|
||||
{ selected: true, icon: 'account_balance', value: 0 },
|
||||
{ icon: 'stars', value: 1 },
|
||||
{ icon: 'av_timer', value: 2 },
|
||||
{ icon: 'equalizer', value: 3 }
|
||||
]"></m-toggle-buttons>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<m-bottom-nav selected-color='red' id='myNav' items="[
|
||||
{ icon: 'favorite', label: 'Favorites', selected: true },
|
||||
{ icon: 'location_on', label: 'Nearby' },
|
||||
{ icon: 'restore', label: 'Recents' }
|
||||
]">
|
||||
</m-bottom-nav>
|
||||
<script>
|
||||
var nav = document.querySelector('#myNav')
|
||||
nav.addEventListener('change', function (evt) {
|
||||
var btnsA = document.querySelector('#myBtnsA')
|
||||
btnsA.addEventListener('change', function (evt) {
|
||||
console.log(evt.detail)
|
||||
})
|
||||
|
||||
nav.setAttribute('selected-color', 'green')
|
||||
var btnsB = document.querySelector('#myBtnsB')
|
||||
btnsB.addEventListener('change', function (evt) {
|
||||
console.log(evt.detail)
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -6,6 +6,8 @@ import '../theme.ts'
|
|||
import { MDCRipple } from '@material/ripple'
|
||||
|
||||
interface Props {
|
||||
multipleSelection?: boolean
|
||||
items: any[]
|
||||
}
|
||||
|
||||
@tag('m-toggle-buttons')
|
||||
|
|
@ -15,26 +17,43 @@ class ToggleButtons extends WeElement<Props, {}> {
|
|||
}
|
||||
|
||||
static propTypes = {
|
||||
multipleSelection: Boolean,
|
||||
items: Array
|
||||
}
|
||||
|
||||
static css = css
|
||||
|
||||
installed() {
|
||||
this.shadowRoot.querySelectorAll('.ripple').forEach(dom => {
|
||||
console.log(123)
|
||||
new MDCRipple(dom)
|
||||
})
|
||||
}
|
||||
installed() {
|
||||
this.shadowRoot.querySelectorAll('.ripple').forEach(dom => {
|
||||
new MDCRipple(dom)
|
||||
})
|
||||
}
|
||||
|
||||
clickHandler = (item)=> {
|
||||
if(item.disabled) return
|
||||
if(this.props.multipleSelection){
|
||||
item.selected = !item.selected
|
||||
this.fire('change', this.props.items)
|
||||
} else if(!item.selected){
|
||||
this.props.items.forEach(item=> item.selected = false)
|
||||
item.selected = true
|
||||
this.fire('change', item)
|
||||
}
|
||||
this.update(true)
|
||||
}
|
||||
|
||||
render(props) {
|
||||
return <div class="m-root">
|
||||
{props.items.map(item => <button class={classNames("mb-root mtb-root", {
|
||||
'selected': item.selected,
|
||||
'disabled': item.disabled
|
||||
})} tabindex="0"
|
||||
{props.items.map(item => <button
|
||||
class={classNames("mb-root mtb-root", {
|
||||
'selected': item.selected,
|
||||
'disabled': item.disabled
|
||||
})}
|
||||
tabindex="0"
|
||||
disabled={item.disabled}
|
||||
type="button" value="left">
|
||||
{typeof item.icon === 'string'?<i class='material-icons'>{item.icon}</i>: <span class="mtb-label">
|
||||
onClick={_=>this.clickHandler(item)}
|
||||
type="button">
|
||||
{typeof item.icon === 'string' ? <i class='material-icons'>{item.icon}</i> : <span class="mtb-label">
|
||||
<svg class="msi-root" focusable="false"
|
||||
viewBox="0 0 24 24" aria-hidden="true" role="presentation">
|
||||
<path d={item.path}></path>
|
||||
|
|
|
|||
Loading…
Reference in New Issue