DataType
/
omi
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

feat(omiu): add toggle icon

This commit is contained in:
dntzhang 2020-04-27 17:32:45 +08:00
parent 01fa0a7c0b
commit eb1339abdf
14 changed files with 949 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
components/toggle-icon/README.md Normal file
View File

@ -0,0 +1,52 @@
## ActionSheet
Mobile pop-up options list
* [→ CodePen](https://codepen.io/omijs/pen/wvKdoNJ)
## Import
```js
import '@omiu/action-sheet'
```
Or use script tag to ref it.
```html
<script src="https://unpkg.com/@omiu/action-sheet"></script>
```
## Usage
```html
<o-action-sheet></o-action-sheet>
```
## API
### Props
```tsx
{
type: string,
menus: any[],
actions: any[],
show: boolean
}
```
### 默认属性
```tsx
{
type: '',
menus: [],
actions: [],
show: false
)
```
### Events
* itemClick
* close

35
components/toggle-icon/demos/js-demo/index.html Normal file
View File

@ -0,0 +1,35 @@
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<meta charset="UTF-8" />
<title>Omiu ActionSheet</title>
</head>
<body>
<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>
<script src="https://tencent.github.io/omi/packages/omi/dist/omi.js"></script>
<script src="https://unpkg.com/@omiu/button@0.0.7/src/index.js"></script>
<script src="../../../icon/favorite.js"></script>
<script src="../../../icon/favorite-border.js"></script>
<script src="../../src/index.js"></script>
<div>
<o-toggle-icon icons="['favorite-border','favorite']"></o-toggle-icon>
<o-toggle-icon is-on color="red" icons="['favorite-border','favorite']"></o-toggle-icon>
<o-toggle-icon disabled icons="['favorite', 'favorite-border']"></o-toggle-icon>
</div>
<script>
document.querySelector('o-toggle-icon').addEventListener('change', function (evt) {
console.log(evt.detail)
})
</script>
</body>
</html>

101
components/toggle-icon/package.json Normal file
View File

@ -0,0 +1,101 @@
{
"name": "@omiu/toggle-icon",
"version": "0.0.1",
"description": "Icon with two state switches",
"docsExtend": {
"cnName": "可切换图标",
"cnDescription": "拥有两种状态切换的icon",
"codepen": "wvKdoNJ",
"codepenHeight": 351,
"codepenDefaultTab": "html,result"
},
"main": "src/index.js",
"module": "src/index.esm.js",
"types": "src/index.d.ts",
"scripts": {
"docs": "node ./scripts/docs-gen.js",
"start": "node ./scripts/webpack.build.js -- demo",
"build": "node ./scripts/webpack.build.js -- build && rollup -c scripts/rollup.config.js && node ./scripts/rollup.end.js"
},
"typings": "./dist/index.d.ts",
"repository": {
"type": "git",
"url": "https://github.com/Tencent/omi.git"
},
"files": [
"src",
"dist",
"typings.json"
],
"keywords": [
"omiu",
"omi",
"omio",
"preact",
"react",
"virtual dom",
"vdom",
"components",
"virtual",
"dom"
],
"author": "dntzhang <dntzhang@qq.com>",
"license": "MIT",
"bugs": {
"url": "https://github.com/Tencent/omi/issues"
},
"homepage": "http://omijs.org",
"devDependencies": {
"@rollup/plugin-commonjs": "^11.1.0",
"css": "^2.2.4",
"css-loader": "^1.0.1",
"file": "^0.2.2",
"file-loader": "^2.0.0",
"html-webpack-plugin": "^3.2.0",
"less": "^3.9.0",
"less-loader": "^4.1.0",
"mini-css-extract-plugin": "^0.4.5",
"node-sass": "^4.12.0",
"omi": "latest",
"omio": "latest",
"optimize-css-assets-webpack-plugin": "^5.0.1",
"progress-bar-webpack-plugin": "^2.1.0",
"resolve-url-loader": "^3.1.0",
"rollup": "^2.7.1",
"rollup-plugin-license": "^2.0.0",
"rollup-plugin-node-resolve": "^5.2.0",
"rollup-plugin-scss": "^2.4.0",
"rollup-plugin-typescript": "^1.0.1",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1",
"to-string-loader": "^1.1.5",
"ts-loader": "^5.4.4",
"typescript": "^3.2.1",
"url": "^0.11.0",
"url-loader": "^1.1.2",
"webpack": "^4.42.1",
"webpack-cli": "^3.3.1",
"webpack-dev-server": "^3.1.10",
"webpack-merge": "^4.1.4"
},
"greenkeeper": {
"ignore": [
"babel-cli",
"babel-core",
"babel-eslint",
"babel-loader",
"jscodeshift",
"rollup-plugin-babel"
]
},
"prettier": {
"singleQuote": true,
"semi": false,
"tabWidth": 2,
"useTabs": false
},
"dependencies": {
"@omiu/common": "latest",
"omi": "latest"
}
}

134
components/toggle-icon/scripts/docs-gen.js Normal file
View File

@ -0,0 +1,134 @@
//自动扫描 index.tsx 生成 readme
const fs = require('fs')
const content = fs.readFileSync('./src/index.tsx', 'utf-8')
const props = content.match(new RegExp('interface Props \\{[\\s\\S]*?}'))[0].replace('interface Props ', '')
const defaultPropsContext = content.match(new RegExp('static defaultProps = \\{[\\s\\S]*?}'))
let defaultProps
if (defaultPropsContext) {
defaultProps = defaultPropsContext[0].replace('static defaultProps = ', '').replace(/ /g, ' ').replace(/ }/g, ')')
}
const eventContexts = content.match(new RegExp('this.fire\\([\\s\\S]*?[,|)]', 'g'))
const package = require('../package.json')
const packageName = package.name
const name = packageName.split('/')[1]
const upperCaseName = name.split('-').map(item => {
return item.charAt(0).toUpperCase() + item.slice(1)
}).join('')
const tagName = 'o-' + name
//fire 附近打标标记 event.detail 类型？
let events, eventMap
if (eventContexts) {
events = eventContexts.map(event => {
return event.replace('this.fire(\'', '').replace('\',', '').replace('\')', '')
})
eventMap = {}
events.forEach(event => {
eventMap[event] = 1
})
}
const cnContent = `## ${upperCaseName} ${package.docsExtend.cnName}
${package.docsExtend.cnDescription}
<iframe height="${package.docsExtend.codepenHeight}" style="width: 100%;" scrolling="no" title="OMIU ${upperCaseName}" src="https://codepen.io/omijs/embed/${package.docsExtend.codepen}?height=${package.docsExtend.codepenHeight}&theme-id=default&default-tab=${package.docsExtend.codepenDefaultTab}" frameborder="no" allowtransparency="true" allowfullscreen="true" loading="lazy">
See the Pen <a href='https://codepen.io/omijs/pen/${package.docsExtend.codepen}'>OMIU Checkbox</a> by OMI
(<a href='https://codepen.io/omijs'>@omijs</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>
## 导入
\`\`\`js
import '${packageName}'
\`\`\`
或者直接 script 标签引入。
\`\`\`html
<script src="https://unpkg.com/${packageName}"></script>
\`\`\`
## 使用
\`\`\`html
<${tagName}> </${tagName}>
\`\`\`
## API
### 属性
\`\`\`tsx
${props}
\`\`\`
${defaultProps ? '### 默认属性\n' : ''}${defaultProps ? '\`\`\`tsx\n' : ''}${defaultProps ? defaultProps : ''}
${defaultProps ? '\`\`\`\n' : ''}${eventMap ? '### 事件\n' : ''}${eventMap ? Object.keys(eventMap).map(event => {
return `* ${event}\n`
}).join('') : ''}`
fs.writeFileSync(`../docs-src/src/docs/zh-cn/${name}.md`, cnContent)
const enContent = `## ${upperCaseName}
${package.description}
<iframe height="${package.docsExtend.codepenHeight}" style="width: 100%;" scrolling="no" title="OMIU ${upperCaseName}" src="https://codepen.io/omijs/embed/${package.docsExtend.codepen}?height=${package.docsExtend.codepenHeight}&theme-id=default&default-tab=${package.docsExtend.codepenDefaultTab}" frameborder="no" allowtransparency="true" allowfullscreen="true" loading="lazy">
See the Pen <a href='https://codepen.io/omijs/pen/${package.docsExtend.codepen}'>OMIU Checkbox</a> by OMI
(<a href='https://codepen.io/omijs'>@omijs</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>
## Import
\`\`\`js
import '${packageName}'
\`\`\`
Or use script tag to ref it.
\`\`\`html
<script src="https://unpkg.com/${packageName}"></script>
\`\`\`
## Usage
\`\`\`html
<${tagName}></${tagName}>
\`\`\`
## API
### Props
\`\`\`tsx
${props}
\`\`\`
${defaultProps ? '### 默认属性\n\n' : ''}${defaultProps ? '\`\`\`tsx\n' : ''}${defaultProps ? defaultProps : ''}
${defaultProps ? '\`\`\`\n' : ''}${eventMap ? '### Events\n\n' : ''}${eventMap ? Object.keys(eventMap).map(event => {
return `* ${event}\n`
}).join('') : ''}`
fs.writeFileSync(`../docs-src/src/docs/en/${name}.md`, enContent)
fs.writeFileSync(`../${name}/README.md`, enContent.replace(/<iframe[\s\S]*?<\/iframe>/, `* [→ CodePen](https://codepen.io/omijs/pen/${package.docsExtend.codepen})`))
// console.log(props)
// console.log(defaultProps)
// console.log(Object.keys(eventMap))

38
components/toggle-icon/scripts/rollup.config.js Normal file
View File

@ -0,0 +1,38 @@
import nodeResolve from "rollup-plugin-node-resolve";
import typescript from 'rollup-plugin-typescript';
import scss from 'rollup-plugin-scss'
import commonjs from '@rollup/plugin-commonjs';
const fs = require('fs')
const license = require("rollup-plugin-license");
const pkg = require("../package.json");
const licensePlugin = license({
banner: `${pkg.name} v${pkg.version} http://omijs.org\r\nFront End Cross-Frameworks Framework.\r\nBy dntzhang https://github.com/dntzhang \r\n Github: https://github.com/Tencent/omi\r\n MIT Licensed.`
});
export default {
input: "src/index.tsx",
output: {
format: "es",
file: "./src/index.esm.js",
name: pkg.name,
sourcemap: true,
strict: true
},
plugins: [
nodeResolve({
main: true
}),
scss({
//output: false,
output: function (styles, styleNodes) {
fs.writeFileSync('./src/index.css', styles)
},
}),
typescript(),
commonjs(),
licensePlugin
],
external: ['omi']
};

16
components/toggle-icon/scripts/rollup.end.js Normal file
View File

@ -0,0 +1,16 @@
const fs = require('fs')
const css = fs.readFileSync('./src/index.css')
const js = fs.readFileSync('./src/index.esm.js', 'utf-8')
fs.writeFileSync('./src/index.esm.js',
js.replace(`var css = /*#__PURE__*/Object.freeze({
__proto__: null
});`, `
var css = \`${css}\`
`)
)

102
components/toggle-icon/scripts/webpack.build.js Normal file
View File

@ -0,0 +1,102 @@
const path = require('path')
const glob = require('glob')
const webpack = require('webpack')
const ProgressBarPlugin = require('progress-bar-webpack-plugin')
const pkgName = require('../package.json')
const componentName = pkgName.name.split('/')[1]
const name = 'o-' + componentName
const library = 'O' + componentName.split('-').map(name => name.charAt(0).toUpperCase() + name.slice(1)).join('')
const config = {
devtool: 'source-map',
plugins: [
new ProgressBarPlugin()
],
entry: {
[name]: './src/index.tsx'
},
output: {
path: path.resolve(__dirname, '../src/'),
filename: 'index.js',
libraryTarget: 'umd',
library: library,
libraryExport: "default",
globalObject: 'this'
},
mode: 'development',
module: {
rules: [{
test: /\.scss$/,
use: [
'to-string-loader',
'css-loader',
{
loader: 'resolve-url-loader'
},
{
loader: 'sass-loader',
options: {
sourceMap: true,
// mdc-web doesn't use sass-loader's normal syntax for imports
// across modules, so we add all module directories containing
// mdc-web components to the Sass include path
// https://github.com/material-components/material-components-web/issues/351
includePaths: glob.sync(path.join(__dirname, '../node_modules/@material')).map((dir) => path.dirname(dir))
}
}
]
},
{
test: /\.css$/,
use: [
'to-string-loader',
'css-loader',
{
loader: 'resolve-url-loader'
}
]
},
{
test: /\.less$/,
use: [
'style-loader',
'css-loader',
{
loader: 'resolve-url-loader'
},
'less-loader'
]
},
{
test: /\.(jpe?g|png|gif|svg)$/i,
loader: "url-loader"
},
{
test: /\.[t|j]sx?$/,
use: 'ts-loader',
exclude: /node_modules/
}
]
},
watch: process.argv[3] === 'demo',
externals: {
'omi': {
commonjs: "omi",
commonjs2: "omi",
amd: "omi",
root: "Omi"
}
}
}
webpack(config, (err, stats) => { // Stats Object
if (err || stats.hasErrors()) {
// Handle errors here
}
// Done processing
})

27
components/toggle-icon/src/index.d.ts vendored Normal file
View File

@ -0,0 +1,27 @@
import { WeElement } from 'omi';
interface Props {
isOn?: boolean;
icons: object;
imgs: object;
color: string;
disabled: boolean;
}
export default class ToggleIcon extends WeElement<Props> {
static css: any;
static defaultProps: {
isOn: boolean;
icons: any[];
};
static propTypes: {
isOn: BooleanConstructor;
icons: ObjectConstructor;
imgs: ObjectConstructor;
color: StringConstructor;
disabled: BooleanConstructor;
};
tagA: any;
tagB: any;
clickHandler: () => void;
render(props: any): JSX.Element;
}
export {};

323
components/toggle-icon/src/index.js Normal file
View File

@ -0,0 +1,323 @@
(function webpackUniversalModuleDefinition(root, factory) {
if(typeof exports === 'object' && typeof module === 'object')
module.exports = factory(require("omi"));
else if(typeof define === 'function' && define.amd)
define(["omi"], factory);
else if(typeof exports === 'object')
exports["OToggleIcon"] = factory(require("omi"));
else
root["OToggleIcon"] = factory(root["Omi"]);
})(this, function(__WEBPACK_EXTERNAL_MODULE_omi__) {
return /******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId]) {
/******/ return installedModules[moduleId].exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ i: moduleId,
/******/ l: false,
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.l = true;
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/
/******/ // define getter function for harmony exports
/******/ __webpack_require__.d = function(exports, name, getter) {
/******/ if(!__webpack_require__.o(exports, name)) {
/******/ Object.defineProperty(exports, name, { enumerable: true, get: getter });
/******/ }
/******/ };
/******/
/******/ // define __esModule on exports
/******/ __webpack_require__.r = function(exports) {
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ }
/******/ Object.defineProperty(exports, '__esModule', { value: true });
/******/ };
/******/
/******/ // create a fake namespace object
/******/ // mode & 1: value is a module id, require it
/******/ // mode & 2: merge all properties of value into the ns
/******/ // mode & 4: return value when already ns object
/******/ // mode & 8|1: behave like require
/******/ __webpack_require__.t = function(value, mode) {
/******/ if(mode & 1) value = __webpack_require__(value);
/******/ if(mode & 8) return value;
/******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
/******/ var ns = Object.create(null);
/******/ __webpack_require__.r(ns);
/******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value });
/******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
/******/ return ns;
/******/ };
/******/
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = function(module) {
/******/ var getter = module && module.__esModule ?
/******/ function getDefault() { return module['default']; } :
/******/ function getModuleExports() { return module; };
/******/ __webpack_require__.d(getter, 'a', getter);
/******/ return getter;
/******/ };
/******/
/******/ // Object.prototype.hasOwnProperty.call
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = "./src/index.tsx");
/******/ })
/************************************************************************/
/******/ ({
/***/ "./node_modules/_css-loader@1.0.1@css-loader/index.js!./node_modules/_resolve-url-loader@3.1.1@resolve-url-loader/index.js!./node_modules/_sass-loader@7.3.1@sass-loader/dist/cjs.js?!./src/index.scss":
/*!****************************************************************************************************************************************************************************************************!*\
!*** ./node_modules/_css-loader@1.0.1@css-loader!./node_modules/_resolve-url-loader@3.1.1@resolve-url-loader!./node_modules/_sass-loader@7.3.1@sass-loader/dist/cjs.js??ref--4-3!./src/index.scss ***!
\****************************************************************************************************************************************************************************************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
exports = module.exports = __webpack_require__(/*! ../node_modules/_css-loader@1.0.1@css-loader/lib/css-base.js */ "./node_modules/_css-loader@1.0.1@css-loader/lib/css-base.js")(false);
// imports
// module
exports.push([module.i, ":host {\n display: inline-block; }\n\nbutton {\n appearance: none;\n -webkit-appearance: none;\n border: none;\n cursor: pointer;\n outline: none;\n margin: 0;\n padding: 0; }\n\n.is-disabled {\n cursor: not-allowed; }\n\n.o-toggle-icon {\n font-family: 'Material Icons';\n font-weight: normal;\n font-style: normal;\n font-size: 24px;\n line-height: 1;\n letter-spacing: normal;\n text-transform: none;\n display: inline-block;\n white-space: nowrap;\n word-wrap: normal;\n direction: ltr;\n -webkit-font-feature-settings: 'liga';\n -webkit-font-smoothing: antialiased; }\n", ""]);
// exports
/***/ }),
/***/ "./node_modules/_css-loader@1.0.1@css-loader/lib/css-base.js":
/*!*******************************************************************!*\
!*** ./node_modules/_css-loader@1.0.1@css-loader/lib/css-base.js ***!
\*******************************************************************/
/*! no static exports found */
/***/ (function(module, exports) {
/*
MIT License http://www.opensource.org/licenses/mit-license.php
Author Tobias Koppers @sokra
*/
// css base code, injected by the css-loader
module.exports = function(useSourceMap) {
var list = [];
// return the list of modules as css string
list.toString = function toString() {
return this.map(function (item) {
var content = cssWithMappingToString(item, useSourceMap);
if(item[2]) {
return "@media " + item[2] + "{" + content + "}";
} else {
return content;
}
}).join("");
};
// import a list of modules into the list
list.i = function(modules, mediaQuery) {
if(typeof modules === "string")
modules = [[null, modules, ""]];
var alreadyImportedModules = {};
for(var i = 0; i < this.length; i++) {
var id = this[i][0];
if(typeof id === "number")
alreadyImportedModules[id] = true;
}
for(i = 0; i < modules.length; i++) {
var item = modules[i];
// skip already imported module
// this implementation is not 100% perfect for weird media query combinations
// when a module is imported multiple times with different media queries.
// I hope this will never occur (Hey this way we have smaller bundles)
if(typeof item[0] !== "number" || !alreadyImportedModules[item[0]]) {
if(mediaQuery && !item[2]) {
item[2] = mediaQuery;
} else if(mediaQuery) {
item[2] = "(" + item[2] + ") and (" + mediaQuery + ")";
}
list.push(item);
}
}
};
return list;
};
function cssWithMappingToString(item, useSourceMap) {
var content = item[1] || '';
var cssMapping = item[3];
if (!cssMapping) {
return content;
}
if (useSourceMap && typeof btoa === 'function') {
var sourceMapping = toComment(cssMapping);
var sourceURLs = cssMapping.sources.map(function (source) {
return '/*# sourceURL=' + cssMapping.sourceRoot + source + ' */'
});
return [content].concat(sourceURLs).concat([sourceMapping]).join('\n');
}
return [content].join('\n');
}
// Adapted from convert-source-map (MIT)
function toComment(sourceMap) {
// eslint-disable-next-line no-undef
var base64 = btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap))));
var data = 'sourceMappingURL=data:application/json;charset=utf-8;base64,' + base64;
return '/*# ' + data + ' */';
}
/***/ }),
/***/ "./src/index.scss":
/*!************************!*\
!*** ./src/index.scss ***!
\************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
var result = __webpack_require__(/*! !../node_modules/_css-loader@1.0.1@css-loader!../node_modules/_resolve-url-loader@3.1.1@resolve-url-loader!../node_modules/_sass-loader@7.3.1@sass-loader/dist/cjs.js??ref--4-3!./index.scss */ "./node_modules/_css-loader@1.0.1@css-loader/index.js!./node_modules/_resolve-url-loader@3.1.1@resolve-url-loader/index.js!./node_modules/_sass-loader@7.3.1@sass-loader/dist/cjs.js?!./src/index.scss");
if (typeof result === "string") {
module.exports = result;
} else {
module.exports = result.toString();
}
/***/ }),
/***/ "./src/index.tsx":
/*!***********************!*\
!*** ./src/index.tsx ***!
\***********************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
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;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
Object.defineProperty(exports, "__esModule", { value: true });
var omi_1 = __webpack_require__(/*! omi */ "omi");
var css = __webpack_require__(/*! ./index.scss */ "./src/index.scss");
var ToggleIcon = /** @class */ (function (_super) {
__extends(ToggleIcon, _super);
function ToggleIcon() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.clickHandler = function () {
_this.updateProps({
isOn: !_this.props.isOn
});
_this.fire('change', { isOn: _this.props.isOn });
};
return _this;
}
ToggleIcon.prototype.render = function (props) {
var tags = props.icons.map(function (icon) { return "o-icon-" + icon; });
this.tagA = tags[0];
this.tagB = tags[1];
return (omi_1.h("button", __assign({ style: "color:" + props.color + ";", onClick: this.clickHandler }, omi_1.extractClass(props, 'o-toggle-icon', {
'is-disabled': props.disabled
}), { disabled: props.disabled }),
tags.length > 0 && (props.isOn ? omi_1.h(this.tagB, null) : omi_1.h(this.tagA, null)),
props.imgs && (props.isOn ? omi_1.h("img", { src: props.imgs[1] }) : omi_1.h("img", { src: props.imgs[0] }))));
};
ToggleIcon.css = css;
ToggleIcon.defaultProps = {
isOn: false,
icons: []
};
ToggleIcon.propTypes = {
isOn: Boolean,
icons: Object,
imgs: Object,
color: String,
disabled: Boolean
};
ToggleIcon = __decorate([
omi_1.tag('o-toggle-icon')
], ToggleIcon);
return ToggleIcon;
}(omi_1.WeElement));
exports.default = ToggleIcon;
/***/ }),
/***/ "omi":
/*!******************************************************************************!*\
!*** external {"commonjs":"omi","commonjs2":"omi","amd":"omi","root":"Omi"} ***!
\******************************************************************************/
/*! no static exports found */
/***/ (function(module, exports) {
module.exports = __WEBPACK_EXTERNAL_MODULE_omi__;
/***/ })
/******/ })["default"];
});
//# sourceMappingURL=index.js.map

1
components/toggle-icon/src/index.js.map Normal file
View File

File diff suppressed because one or more lines are too long

35
components/toggle-icon/src/index.scss Normal file
View File

@ -0,0 +1,35 @@
@import "@omiu/common/theme";
:host {
display: inline-block;
}
button {
appearance: none;
-webkit-appearance: none;
border: none;
cursor: pointer;
outline: none;
margin: 0;
padding: 0;
}
.is-disabled {
cursor: not-allowed;
}
.o-toggle-icon {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
}

57
components/toggle-icon/src/index.tsx Normal file
View File

@ -0,0 +1,57 @@
import { tag, WeElement, h, extractClass } from 'omi'
import * as css from './index.scss'
interface Props {
isOn?: boolean
icons: object
imgs: object
color: string
disabled: boolean
}
@tag('o-toggle-icon')
export default class ToggleIcon extends WeElement<Props>{
static css = css
static defaultProps = {
isOn: false,
icons: []
}
static propTypes = {
isOn: Boolean,
icons: Object,
imgs: Object,
color: String,
disabled: Boolean
}
tagA
tagB
clickHandler = () => {
this.updateProps({
isOn: !this.props.isOn
})
this.fire('change', { isOn: this.props.isOn })
}
render(props) {
const tags = props.icons.map(icon => `o-icon-${icon}`)
this.tagA = tags[0]
this.tagB = tags[1]
return (
<button style={`color:${props.color};`} onClick={this.clickHandler} {...extractClass(props, 'o-toggle-icon', {
'is-disabled': props.disabled
})} disabled={props.disabled}>
{tags.length > 0 && (props.isOn ? <this.tagB /> : <this.tagA />)}
{props.imgs && (props.isOn ? <img src={props.imgs[1]} /> : <img src={props.imgs[0]} />)}
</button>
)
}
}

14
components/toggle-icon/tsconfig.demo.json Normal file
View File

@ -0,0 +1,14 @@
{
"compilerOptions": {
"baseUrl": ".",
"experimentalDecorators": true,
"jsx": "react",
"jsxFactory": "h",
"target": "es5",
"outDir": "dist",
"allowJs": true
},
"include": [
"src/**/*"
]
}

14
components/toggle-icon/tsconfig.json Normal file
View File

@ -0,0 +1,14 @@
{
"compilerOptions": {
"baseUrl": ".",
"experimentalDecorators": true,
"jsx": "react",
"jsxFactory": "h",
"target": "es5",
"allowJs": true,
"declaration": true
},
"include": [
"src/**/*"
]
}