omisu - eslint
This commit is contained in:
dntzhang
parent
48de9d7d70
commit
6bf3f319ad
|
|
@ -259,7 +259,7 @@ eval("\n var result = __webpack_require__(/*! !../../node_modules/_css-lo
|
|||
/***/ (function(module, exports, __webpack_require__) {
|
||||
|
||||
"use strict";
|
||||
eval("\nvar __assign = (this && this.__assign) || function () {\n __assign = Object.assign || function(t) {\n for (var s, i = 1, n = arguments.length; i < n; i++) {\n s = arguments[i];\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))\n t[p] = s[p];\n }\n return t;\n };\n return __assign.apply(this, arguments);\n};\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar omis_1 = __webpack_require__(/*! omis */ \"./node_modules/_omis@0.4.0@omis/dist/omis.esm.js\");\nvar css = __webpack_require__(/*! ./index.scss */ \"./src/button/index.scss\");\nvar class_1 = __webpack_require__(/*! ../utils/class */ \"./src/utils/class.js\");\nvar ripple_1 = __webpack_require__(/*! @material/ripple */ \"./node_modules/@material/ripple/index.js\");\n__webpack_require__(/*! ../theme.ts */ \"./src/theme.ts\");\nvar Button = function (props, store) { return omis_1.h(\"button\", __assign({ onClick: store.clickHandle }, class_1.extractClass(props, 'mdc-button', {\n 'mdc-button--dense': props.dense,\n 'mdc-button--raised': props.raised,\n 'mdc-button--unelevated': props.unelevated,\n 'mdc-button--outlined': props.outlined\n})),\n (props.icon) && omis_1.h(\"i\", { class: \"material-icons mdc-button__icon\" }, props.icon),\n omis_1.h(\"span\", { class: \"mdc-button__label\" }, props.children)); };\nButton.store = function (_) {\n return {\n installed: function () {\n if (_.props.ripple) {\n new ripple_1.MDCRipple(_.base);\n }\n },\n clickHandle: function (evt) {\n _.props.onClick(evt);\n }\n };\n};\nButton.css = css;\nexports.default = Button;\n\n\n//# sourceURL=webpack:///./src/button/index.tsx?");
|
||||
eval("\nvar __assign = (this && this.__assign) || function () {\n __assign = Object.assign || function(t) {\n for (var s, i = 1, n = arguments.length; i < n; i++) {\n s = arguments[i];\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))\n t[p] = s[p];\n }\n return t;\n };\n return __assign.apply(this, arguments);\n};\nObject.defineProperty(exports, \"__esModule\", { value: true });\nvar omis_1 = __webpack_require__(/*! omis */ \"./node_modules/_omis@0.4.0@omis/dist/omis.esm.js\");\nvar css = __webpack_require__(/*! ./index.scss */ \"./src/button/index.scss\");\nvar class_1 = __webpack_require__(/*! ../utils/class */ \"./src/utils/class.js\");\nvar ripple_1 = __webpack_require__(/*! @material/ripple */ \"./node_modules/@material/ripple/index.js\");\n__webpack_require__(/*! ../theme.ts */ \"./src/theme.ts\");\nvar Button = function (props, store) {\n return omis_1.h(\"button\", __assign({ onClick: store.clickHandle }, class_1.extractClass(props, 'mdc-button', {\n 'mdc-button--dense': props.dense,\n 'mdc-button--raised': props.raised,\n 'mdc-button--unelevated': props.unelevated,\n 'mdc-button--outlined': props.outlined\n })),\n (props.icon) && omis_1.h(\"i\", { class: \"material-icons mdc-button__icon\" }, props.icon),\n omis_1.h(\"span\", { class: \"mdc-button__label\" }, props.children));\n};\nButton.store = function (_) { return ({\n installed: function () {\n if (_.props.ripple) {\n new ripple_1.MDCRipple(_.base);\n }\n },\n clickHandle: function (evt) {\n _.props.onClick(evt);\n }\n}); };\nButton.css = css;\nexports.default = Button;\n\n\n//# sourceURL=webpack:///./src/button/index.tsx?");
|
||||
|
||||
/***/ }),
|
||||
|
||||
|
|
|
|||
|
|
@ -1,83 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
|
||||
<meta charset="UTF-8" />
|
||||
<title>Add Omi in One Minute</title>
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<script src="https://tencent.github.io/omi/packages/omi/dist/omi.js"></script>
|
||||
<script src="../../src/button/index.js"></script>
|
||||
|
||||
<div>
|
||||
<h3>Text Button</h3>
|
||||
<m-button ripple>Default</m-button>
|
||||
|
||||
<m-button ripple dense>Dense</m-button>
|
||||
|
||||
<m-button onClick={clickHandler} ripple icon="add">Dense</m-button>
|
||||
|
||||
<m-button ripple svg-icon="{
|
||||
path: 'M923 283.6a260.04 260.04 0 0 0-56.9-82.8 264.4 264.4 0 0 0-84-55.5A265.34 265.34 0 0 0 679.7 125c-49.3 0-97.4 13.5-139.2 39-10 6.1-19.5 12.8-28.5 20.1-9-7.3-18.5-14-28.5-20.1-41.8-25.5-89.9-39-139.2-39-35.5 0-69.9 6.8-102.4 20.3-31.4 13-59.7 31.7-84 55.5a258.44 258.44 0 0 0-56.9 82.8c-13.9 32.3-21 66.6-21 101.9 0 33.3 6.8 68 20.3 103.3 11.3 29.5 27.5 60.1 48.2 91 32.8 48.9 77.9 99.9 133.9 151.6 92.8 85.7 184.7 144.9 188.6 147.3l23.7 15.2c10.5 6.7 24 6.7 34.5 0l23.7-15.2c3.9-2.5 95.7-61.6 188.6-147.3 56-51.7 101.1-102.7 133.9-151.6 20.7-30.9 37-61.5 48.2-91 13.5-35.3 20.3-70 20.3-103.3.1-35.3-7-69.6-20.9-101.9zM512 814.8S156 586.7 156 385.5C156 283.6 240.3 201 344.3 201c73.1 0 136.5 40.8 167.7 100.4C543.2 241.8 606.6 201 679.7 201c104 0 188.3 82.6 188.3 184.5 0 201.2-356 429.3-356 429.3z',
|
||||
color: '#0072d9',
|
||||
scale: 1.3
|
||||
}">ICON</m-button>
|
||||
|
||||
|
||||
<h3>Raised Button</h3>
|
||||
<m-button ripple raised>Default</m-button>
|
||||
|
||||
<m-button ripple dense raised>Dense</m-button>
|
||||
|
||||
<m-button ripple raised svg-icon="{
|
||||
path: 'M923 283.6a260.04 260.04 0 0 0-56.9-82.8 264.4 264.4 0 0 0-84-55.5A265.34 265.34 0 0 0 679.7 125c-49.3 0-97.4 13.5-139.2 39-10 6.1-19.5 12.8-28.5 20.1-9-7.3-18.5-14-28.5-20.1-41.8-25.5-89.9-39-139.2-39-35.5 0-69.9 6.8-102.4 20.3-31.4 13-59.7 31.7-84 55.5a258.44 258.44 0 0 0-56.9 82.8c-13.9 32.3-21 66.6-21 101.9 0 33.3 6.8 68 20.3 103.3 11.3 29.5 27.5 60.1 48.2 91 32.8 48.9 77.9 99.9 133.9 151.6 92.8 85.7 184.7 144.9 188.6 147.3l23.7 15.2c10.5 6.7 24 6.7 34.5 0l23.7-15.2c3.9-2.5 95.7-61.6 188.6-147.3 56-51.7 101.1-102.7 133.9-151.6 20.7-30.9 37-61.5 48.2-91 13.5-35.3 20.3-70 20.3-103.3.1-35.3-7-69.6-20.9-101.9zM512 814.8S156 586.7 156 385.5C156 283.6 240.3 201 344.3 201c73.1 0 136.5 40.8 167.7 100.4C543.2 241.8 606.6 201 679.7 201c104 0 188.3 82.6 188.3 184.5 0 201.2-356 429.3-356 429.3z',
|
||||
color: 'white',
|
||||
scale: 1.3
|
||||
}">ICON</m-button>
|
||||
|
||||
|
||||
<h3>Unelevated Button</h3>
|
||||
<m-button ripple unelevated>Default</m-button>
|
||||
|
||||
<m-button ripple dense unelevated>Dense</m-button>
|
||||
|
||||
<m-button ripple unelevated svg-icon="{
|
||||
path: 'M923 283.6a260.04 260.04 0 0 0-56.9-82.8 264.4 264.4 0 0 0-84-55.5A265.34 265.34 0 0 0 679.7 125c-49.3 0-97.4 13.5-139.2 39-10 6.1-19.5 12.8-28.5 20.1-9-7.3-18.5-14-28.5-20.1-41.8-25.5-89.9-39-139.2-39-35.5 0-69.9 6.8-102.4 20.3-31.4 13-59.7 31.7-84 55.5a258.44 258.44 0 0 0-56.9 82.8c-13.9 32.3-21 66.6-21 101.9 0 33.3 6.8 68 20.3 103.3 11.3 29.5 27.5 60.1 48.2 91 32.8 48.9 77.9 99.9 133.9 151.6 92.8 85.7 184.7 144.9 188.6 147.3l23.7 15.2c10.5 6.7 24 6.7 34.5 0l23.7-15.2c3.9-2.5 95.7-61.6 188.6-147.3 56-51.7 101.1-102.7 133.9-151.6 20.7-30.9 37-61.5 48.2-91 13.5-35.3 20.3-70 20.3-103.3.1-35.3-7-69.6-20.9-101.9zM512 814.8S156 586.7 156 385.5C156 283.6 240.3 201 344.3 201c73.1 0 136.5 40.8 167.7 100.4C543.2 241.8 606.6 201 679.7 201c104 0 188.3 82.6 188.3 184.5 0 201.2-356 429.3-356 429.3z',
|
||||
color: 'white',
|
||||
scale: 1.3
|
||||
}">ICON</m-button>
|
||||
|
||||
<h3>Outlined Button</h3>
|
||||
<m-button ripple outlined>Default</m-button>
|
||||
|
||||
<m-button ripple dense outlined>Dense</m-button>
|
||||
|
||||
<m-button ripple outlined svg-icon="{
|
||||
path: 'M923 283.6a260.04 260.04 0 0 0-56.9-82.8 264.4 264.4 0 0 0-84-55.5A265.34 265.34 0 0 0 679.7 125c-49.3 0-97.4 13.5-139.2 39-10 6.1-19.5 12.8-28.5 20.1-9-7.3-18.5-14-28.5-20.1-41.8-25.5-89.9-39-139.2-39-35.5 0-69.9 6.8-102.4 20.3-31.4 13-59.7 31.7-84 55.5a258.44 258.44 0 0 0-56.9 82.8c-13.9 32.3-21 66.6-21 101.9 0 33.3 6.8 68 20.3 103.3 11.3 29.5 27.5 60.1 48.2 91 32.8 48.9 77.9 99.9 133.9 151.6 92.8 85.7 184.7 144.9 188.6 147.3l23.7 15.2c10.5 6.7 24 6.7 34.5 0l23.7-15.2c3.9-2.5 95.7-61.6 188.6-147.3 56-51.7 101.1-102.7 133.9-151.6 20.7-30.9 37-61.5 48.2-91 13.5-35.3 20.3-70 20.3-103.3.1-35.3-7-69.6-20.9-101.9zM512 814.8S156 586.7 156 385.5C156 283.6 240.3 201 344.3 201c73.1 0 136.5 40.8 167.7 100.4C543.2 241.8 606.6 201 679.7 201c104 0 188.3 82.6 188.3 184.5 0 201.2-356 429.3-356 429.3z',
|
||||
color: '#0072d9',
|
||||
scale: 1.3
|
||||
}">ICON</m-button>
|
||||
|
||||
|
||||
<h3>Shaped Button</h3>
|
||||
<m-button ripple unelevated css=".mdc-button{ border-radius: 18px;}">Default</m-button>
|
||||
|
||||
<m-button ripple dense unelevated css=".mdc-button{ border-radius: 18px!important;}">Dense</m-button>
|
||||
|
||||
<m-button ripple unelevated svg-icon="{
|
||||
path: 'M923 283.6a260.04 260.04 0 0 0-56.9-82.8 264.4 264.4 0 0 0-84-55.5A265.34 265.34 0 0 0 679.7 125c-49.3 0-97.4 13.5-139.2 39-10 6.1-19.5 12.8-28.5 20.1-9-7.3-18.5-14-28.5-20.1-41.8-25.5-89.9-39-139.2-39-35.5 0-69.9 6.8-102.4 20.3-31.4 13-59.7 31.7-84 55.5a258.44 258.44 0 0 0-56.9 82.8c-13.9 32.3-21 66.6-21 101.9 0 33.3 6.8 68 20.3 103.3 11.3 29.5 27.5 60.1 48.2 91 32.8 48.9 77.9 99.9 133.9 151.6 92.8 85.7 184.7 144.9 188.6 147.3l23.7 15.2c10.5 6.7 24 6.7 34.5 0l23.7-15.2c3.9-2.5 95.7-61.6 188.6-147.3 56-51.7 101.1-102.7 133.9-151.6 20.7-30.9 37-61.5 48.2-91 13.5-35.3 20.3-70 20.3-103.3.1-35.3-7-69.6-20.9-101.9zM512 814.8S156 586.7 156 385.5C156 283.6 240.3 201 344.3 201c73.1 0 136.5 40.8 167.7 100.4C543.2 241.8 606.6 201 679.7 201c104 0 188.3 82.6 188.3 184.5 0 201.2-356 429.3-356 429.3z',
|
||||
color: 'white',
|
||||
scale: 1.3
|
||||
}" css=".mdc-button{ border-radius: 18px;}">ICON</m-button>
|
||||
|
||||
|
||||
</div>
|
||||
<a href="https://github.com/Tencent/omi" target="_blank" style="position: fixed; right: 0; top: 0; z-index: 3;">
|
||||
<img src="//alloyteam.github.io/github.png" alt="">
|
||||
</a>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,82 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
|
||||
<meta charset="UTF-8" />
|
||||
<title>Add Omi in One Minute</title>
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
|
||||
</head>
|
||||
|
||||
<body style="background-color:#f9f7f7;">
|
||||
|
||||
<script src="https://tencent.github.io/omi/packages/omi/dist/omi.js"></script>
|
||||
<script src="../../src/color-picker/index.js"></script>
|
||||
<script src="../../src/switch/index.js"></script>
|
||||
<script src="../../src/button/index.js"></script>
|
||||
|
||||
<h3>Change Theme</h3>
|
||||
<div>
|
||||
<m-color-picker id='picker' save="0" default="ecb89a" preview="0" button='0' clear='0' width="300px">
|
||||
</m-color-picker>
|
||||
<br />
|
||||
<m-switch id="mySWitch" label='Switching Dark Mode' style="color:#4e4e4e"> </m-switch>
|
||||
|
||||
<div id='root'>
|
||||
|
||||
<h3>Text Button</h3>
|
||||
|
||||
<m-button ripple>Default</m-button>
|
||||
<m-button ripple dense>Dense</m-button>
|
||||
<m-button ripple icon="favorite">ICON</m-button>
|
||||
|
||||
<h3>Raised Button</h3>
|
||||
|
||||
<m-button ripple raised>Default</m-button>
|
||||
<m-button ripple dense raised>Dense</m-button>
|
||||
<m-button ripple raised icon="favorite">ICON</m-button>
|
||||
|
||||
<h3>Unelevated Button</h3>
|
||||
|
||||
<m-button ripple unelevated>Default</m-button>
|
||||
<m-button ripple dense unelevated>Dense</m-button>
|
||||
<m-button ripple unelevated icon="favorite">ICON</m-button>
|
||||
|
||||
<h3>Outlined Button</h3>
|
||||
|
||||
<m-button ripple outlined>Default</m-button>
|
||||
<m-button ripple dense outlined>Dense</m-button>
|
||||
<m-button ripple outlined icon="favorite">ICON</m-button>
|
||||
|
||||
<h3>Shaped Button</h3>
|
||||
|
||||
<m-button ripple unelevated css=".mdc-button{ border-radius: 18px;}">Default</m-button>
|
||||
<m-button ripple dense unelevated css=".mdc-button{ border-radius: 18px!important;}">Dense</m-button>
|
||||
<m-button ripple unelevated icon="favorite" css=".mdc-button{ border-radius: 18px;}">ICON</m-button>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var preColor = '#ecb89a'
|
||||
document.body.style.setProperty('--mdc-theme-primary', preColor)
|
||||
document.body.style.setProperty('--mdc-theme-secondary', preColor)
|
||||
|
||||
var picker = document.querySelector('#picker')
|
||||
picker.addEventListener('change', function (evt) {
|
||||
preColor = evt.detail.colorObject.toRGBA().toString()
|
||||
document.body.style.setProperty('--mdc-theme-primary', preColor)
|
||||
document.body.style.setProperty('--mdc-theme-secondary', preColor)
|
||||
})
|
||||
|
||||
var mySWitch = document.querySelector('#mySWitch')
|
||||
mySWitch.addEventListener('change', function (evt) {
|
||||
document.body.style.backgroundColor = evt.detail.checked ? 'black' : 'white';
|
||||
document.body.style.color = evt.detail.checked ? 'white' : 'black';
|
||||
document.body.style.setProperty('--mdc-theme-primary', evt.detail.checked ? '#4e4e4e' : preColor)
|
||||
document.body.style.setProperty('--mdc-theme-secondary', evt.detail.checked ? '#4e4e4e' : preColor)
|
||||
})
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,55 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
|
||||
<meta charset="UTF-8" />
|
||||
<title>Add Omi in One Minute</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div>
|
||||
<h3>Text Button</h3>
|
||||
|
||||
|
||||
<m-button ripple unelevated svg-icon="{
|
||||
path: 'M923 283.6a260.04 260.04 0 0 0-56.9-82.8 264.4 264.4 0 0 0-84-55.5A265.34 265.34 0 0 0 679.7 125c-49.3 0-97.4 13.5-139.2 39-10 6.1-19.5 12.8-28.5 20.1-9-7.3-18.5-14-28.5-20.1-41.8-25.5-89.9-39-139.2-39-35.5 0-69.9 6.8-102.4 20.3-31.4 13-59.7 31.7-84 55.5a258.44 258.44 0 0 0-56.9 82.8c-13.9 32.3-21 66.6-21 101.9 0 33.3 6.8 68 20.3 103.3 11.3 29.5 27.5 60.1 48.2 91 32.8 48.9 77.9 99.9 133.9 151.6 92.8 85.7 184.7 144.9 188.6 147.3l23.7 15.2c10.5 6.7 24 6.7 34.5 0l23.7-15.2c3.9-2.5 95.7-61.6 188.6-147.3 56-51.7 101.1-102.7 133.9-151.6 20.7-30.9 37-61.5 48.2-91 13.5-35.3 20.3-70 20.3-103.3.1-35.3-7-69.6-20.9-101.9zM512 814.8S156 586.7 156 385.5C156 283.6 240.3 201 344.3 201c73.1 0 136.5 40.8 167.7 100.4C543.2 241.8 606.6 201 679.7 201c104 0 188.3 82.6 188.3 184.5 0 201.2-356 429.3-356 429.3z',
|
||||
color: 'white',
|
||||
scale: 1.3
|
||||
}" css=".mdc-button{ border-radius: 18px;}" id="testBtn">ICON</m-button>
|
||||
</div>
|
||||
<script src="../../../omi/dist/omi.dev.js"></script>
|
||||
<script src="../../src/button/index.js"></script>
|
||||
<script>
|
||||
|
||||
//document.addEventListener('DOMContentLoaded', () => {
|
||||
|
||||
//console.log(2222)
|
||||
var btn = document.querySelector('#testBtn')
|
||||
|
||||
btn.removeAttribute('unelevated')
|
||||
|
||||
btn.setAttribute('svg-icon', {
|
||||
path: 'M923 283.6a260.04 260.04 0 0 0-56.9-82.8 264.4 264.4 0 0 0-84-55.5A265.34 265.34 0 0 0 679.7 125c-49.3 0-97.4 13.5-139.2 39-10 6.1-19.5 12.8-28.5 20.1-9-7.3-18.5-14-28.5-20.1-41.8-25.5-89.9-39-139.2-39-35.5 0-69.9 6.8-102.4 20.3-31.4 13-59.7 31.7-84 55.5a258.44 258.44 0 0 0-56.9 82.8c-13.9 32.3-21 66.6-21 101.9 0 33.3 6.8 68 20.3 103.3 11.3 29.5 27.5 60.1 48.2 91 32.8 48.9 77.9 99.9 133.9 151.6 92.8 85.7 184.7 144.9 188.6 147.3l23.7 15.2c10.5 6.7 24 6.7 34.5 0l23.7-15.2c3.9-2.5 95.7-61.6 188.6-147.3 56-51.7 101.1-102.7 133.9-151.6 20.7-30.9 37-61.5 48.2-91 13.5-35.3 20.3-70 20.3-103.3.1-35.3-7-69.6-20.9-101.9zM512 814.8S156 586.7 156 385.5C156 283.6 240.3 201 344.3 201c73.1 0 136.5 40.8 167.7 100.4C543.2 241.8 606.6 201 679.7 201c104 0 188.3 82.6 188.3 184.5 0 201.2-356 429.3-356 429.3z',
|
||||
color: 'red',
|
||||
scale: 1.3
|
||||
})
|
||||
//btn.update()
|
||||
|
||||
console.log(btn.getAttribute('unelevated'))
|
||||
// console.log(btn)
|
||||
console.log(btn.props.unelevated)
|
||||
|
||||
// })
|
||||
|
||||
</script>
|
||||
|
||||
<a href="https://github.com/Tencent/omi" target="_blank" style="position: fixed; right: 0; top: 0; z-index: 3;">
|
||||
<img src="//alloyteam.github.io/github.png" alt="">
|
||||
</a>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1583,26 +1583,26 @@ var css = __webpack_require__(/*! ./index.scss */ "./src/button/index.scss");
|
|||
var class_1 = __webpack_require__(/*! ../utils/class */ "./src/utils/class.js");
|
||||
var ripple_1 = __webpack_require__(/*! @material/ripple */ "./node_modules/@material/ripple/index.js");
|
||||
__webpack_require__(/*! ../theme.ts */ "./src/theme.ts");
|
||||
var Button = function (props, store) { return omis_1.h("button", __assign({ onClick: store.clickHandle }, class_1.extractClass(props, 'mdc-button', {
|
||||
'mdc-button--dense': props.dense,
|
||||
'mdc-button--raised': props.raised,
|
||||
'mdc-button--unelevated': props.unelevated,
|
||||
'mdc-button--outlined': props.outlined
|
||||
})),
|
||||
(props.icon) && omis_1.h("i", { class: "material-icons mdc-button__icon" }, props.icon),
|
||||
omis_1.h("span", { class: "mdc-button__label" }, props.children)); };
|
||||
Button.store = function (_) {
|
||||
return {
|
||||
installed: function () {
|
||||
if (_.props.ripple) {
|
||||
new ripple_1.MDCRipple(_.base);
|
||||
}
|
||||
},
|
||||
clickHandle: function (evt) {
|
||||
_.props.onClick(evt);
|
||||
}
|
||||
};
|
||||
var Button = function (props, store) {
|
||||
return omis_1.h("button", __assign({ onClick: store.clickHandle }, class_1.extractClass(props, 'mdc-button', {
|
||||
'mdc-button--dense': props.dense,
|
||||
'mdc-button--raised': props.raised,
|
||||
'mdc-button--unelevated': props.unelevated,
|
||||
'mdc-button--outlined': props.outlined
|
||||
})),
|
||||
(props.icon) && omis_1.h("i", { class: "material-icons mdc-button__icon" }, props.icon),
|
||||
omis_1.h("span", { class: "mdc-button__label" }, props.children));
|
||||
};
|
||||
Button.store = function (_) { return ({
|
||||
installed: function () {
|
||||
if (_.props.ripple) {
|
||||
new ripple_1.MDCRipple(_.base);
|
||||
}
|
||||
},
|
||||
clickHandle: function (evt) {
|
||||
_.props.onClick(evt);
|
||||
}
|
||||
}); };
|
||||
Button.css = css;
|
||||
exports.default = Button;
|
||||
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -5,28 +5,27 @@ import { MDCRipple } from '@material/ripple'
|
|||
import '../theme.ts'
|
||||
|
||||
|
||||
const Button = (props, store) => <button onClick={store.clickHandle} {...extractClass(props, 'mdc-button', {
|
||||
'mdc-button--dense': props.dense,
|
||||
'mdc-button--raised': props.raised,
|
||||
'mdc-button--unelevated': props.unelevated,
|
||||
'mdc-button--outlined': props.outlined
|
||||
})}>
|
||||
{(props.icon) && <i class="material-icons mdc-button__icon">{props.icon}</i>}
|
||||
<span class="mdc-button__label">{props.children}</span>
|
||||
</button>
|
||||
const Button = (props, store) =>
|
||||
<button onClick={store.clickHandle} {...extractClass(props, 'mdc-button', {
|
||||
'mdc-button--dense': props.dense,
|
||||
'mdc-button--raised': props.raised,
|
||||
'mdc-button--unelevated': props.unelevated,
|
||||
'mdc-button--outlined': props.outlined
|
||||
})}>
|
||||
{(props.icon) && <i class="material-icons mdc-button__icon">{props.icon}</i>}
|
||||
<span class="mdc-button__label">{props.children}</span>
|
||||
</button>
|
||||
|
||||
Button.store = _ => {
|
||||
return {
|
||||
installed() {
|
||||
if (_.props.ripple) {
|
||||
new MDCRipple(_.base)
|
||||
}
|
||||
},
|
||||
clickHandle(evt) {
|
||||
_.props.onClick(evt)
|
||||
Button.store = _ => ({
|
||||
installed() {
|
||||
if (_.props.ripple) {
|
||||
new MDCRipple(_.base)
|
||||
}
|
||||
},
|
||||
clickHandle(evt) {
|
||||
_.props.onClick(evt)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
Button.css = css
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue