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

omim - add icon

This commit is contained in:
dntzhang 2019-04-30 17:20:55 +08:00
parent e8d6887848
commit 9aa39a5cde
11 changed files with 2398 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

169
packages/omim/demos/icon/bundle.js Normal file
View File

File diff suppressed because one or more lines are too long

12
packages/omim/demos/icon/index.html Normal file
View File

@ -0,0 +1,12 @@
<!doctype html>
<html>
<head>
</head>
<body>
<script src="bundle.js"></script>
</body>
</html>

19
packages/omim/demos/icon/index.js Normal file
View File

@ -0,0 +1,19 @@
import '../../src/icon/index.tsx'
import { render, h } from 'omi'
render(
<div>
<m-icon
path='M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z'>
</m-icon>
<m-icon paths={[{
color: '#F98080',
path: 'M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z'
}, {
color: '#F95050',
path: 'M464 688a48 48 0 1 0 96 0 48 48 0 1 0-96 0zm24-112h48c4.4 0 8-3.6 8-8V296c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8z'
}]} />
</div>
, 'body')

2
packages/omim/demos/simple/bundle.js
View File

@ -94,7 +94,7 @@
/***/ (function(module, exports, __webpack_require__) {
"use strict";
eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\n__webpack_require__(/*! ../../src/text-field/index.tsx */ \"./src/text-field/index.tsx\");\nvar omi_1 = __webpack_require__(/*! omi */ \"./node_modules/omi/dist/omi.esm.js\");\nomi_1.render(omi_1.h(\"div\", null,\n omi_1.h(\"m-text-field\", null),\n omi_1.h(\"br\", null),\n omi_1.h(\"m-text-field\", { disabled: true }),\n omi_1.h(\"br\", null),\n omi_1.h(\"m-text-field\", { textarea: true, rows: 5, cols: 30 }),\n omi_1.h(\"br\", null),\n omi_1.h(\"m-text-field\", { value: 'TEST TEXT' }),\n omi_1.h(\"br\", null),\n omi_1.h(\"m-text-field\", { label: 'Label', value: 'TEST TEXT' }),\n omi_1.h(\"br\", null),\n omi_1.h(\"m-text-field\", { fullWidth: true, label: 'Label' }),\n omi_1.h(\"br\", null),\n omi_1.h(\"m-text-field\", { outlined: true, label: 'Label' }),\n omi_1.h(\"br\", null),\n omi_1.h(\"m-text-field\", { noLabel: true, label: 'Label' }),\n omi_1.h(\"br\", null),\n omi_1.h(\"m-text-field\", { helperText: \"Helper Text\", label: 'Label2' }),\n omi_1.h(\"br\", null),\n omi_1.h(\"m-text-field\", { showHelper: true, helperText: \"Helper Text\", label: 'Label2' }),\n omi_1.h(\"br\", null),\n omi_1.h(\"m-text-field\", { characterCounter: [50, 100], helperText: \"Helper Text\", label: 'Label2' }),\n omi_1.h(\"br\", null),\n omi_1.h(\"m-text-field\", { textarea: true, characterCounter: [50, 100], label: 'Label2' }),\n omi_1.h(\"br\", null),\n omi_1.h(\"m-text-field\", { required: true, label: 'Label2' }),\n omi_1.h(\"br\", null),\n omi_1.h(\"m-text-field\", { label: 'Label', css: \"\\n.mdc-floating-label{ \\n color:red!important; \\n}\\n\" })), 'body');\n\n\n//# sourceURL=webpack:///./demos/simple/index.js?");
eval("\nObject.defineProperty(exports, \"__esModule\", { value: true });\n__webpack_require__(/*! ../../src/text-field/index.tsx */ \"./src/text-field/index.tsx\");\nvar omi_1 = __webpack_require__(/*! omi */ \"./node_modules/omi/dist/omi.esm.js\");\nomi_1.render(omi_1.h(\"div\", null,\n omi_1.h(\"h3\", null, \"Filled\"),\n omi_1.h(\"m-text-field\", { label: 'Label' }),\n omi_1.h(\"br\", null),\n omi_1.h(\"m-text-field\", { disabled: true }),\n omi_1.h(\"br\", null),\n omi_1.h(\"m-text-field\", { textarea: true, rows: 5, cols: 30 }),\n omi_1.h(\"br\", null),\n omi_1.h(\"m-text-field\", { value: 'TEST TEXT' }),\n omi_1.h(\"br\", null),\n omi_1.h(\"m-text-field\", { label: 'Label', value: 'TEST TEXT' }),\n omi_1.h(\"br\", null),\n omi_1.h(\"m-text-field\", { fullWidth: true, label: 'Label' }),\n omi_1.h(\"br\", null),\n omi_1.h(\"m-text-field\", { outlined: true, label: 'Label' }),\n omi_1.h(\"br\", null),\n omi_1.h(\"m-text-field\", { noLabel: true, label: 'Label' }),\n omi_1.h(\"br\", null),\n omi_1.h(\"m-text-field\", { helperText: \"Helper Text\", label: 'Label2' }),\n omi_1.h(\"br\", null),\n omi_1.h(\"m-text-field\", { showHelper: true, helperText: \"Helper Text\", label: 'Label2' }),\n omi_1.h(\"br\", null),\n omi_1.h(\"m-text-field\", { characterCounter: [50, 100], helperText: \"Helper Text\", label: 'Label2' }),\n omi_1.h(\"br\", null),\n omi_1.h(\"m-text-field\", { textarea: true, characterCounter: [50, 100], label: 'Label2' }),\n omi_1.h(\"br\", null),\n omi_1.h(\"m-text-field\", { required: true, label: 'Label2' }),\n omi_1.h(\"br\", null),\n omi_1.h(\"m-text-field\", { label: 'Label', css: \"\\n.mdc-floating-label{ \\n color:red!important; \\n}\\n\" })), 'body');\n\n\n//# sourceURL=webpack:///./demos/simple/index.js?");
/***/ }),

4
packages/omim/demos/simple/index.js
View File

@ -3,8 +3,8 @@ import { render, h } from 'omi'
render(
<div>
<m-text-field />
<h3>Filled</h3>
<m-text-field label='Label'/>
<br />
<m-text-field disabled />

20
packages/omim/scripts/webpack.build.js
View File

@ -50,7 +50,21 @@ webpack({
// Handle errors here
}
// Done processing
fs.renameSync(path.resolve(__dirname, '../dist/index.d.ts'), path.resolve(__dirname, '../src/' + name+'/index.d.ts'))
fs.rmdirSync('dist')
fs.renameSync(path.resolve(__dirname, '../dist/'+ name +'/index.d.ts'), path.resolve(__dirname, '../src/' + name+'/index.d.ts'))
deleteFolderRecursive('dist')
console.log(`Build ${name} successfully!`)
});
});
var deleteFolderRecursive = function(path) {
if (fs.existsSync(path)) {
fs.readdirSync(path).forEach(function(file, index){
var curPath = path + "/" + file;
if (fs.lstatSync(curPath).isDirectory()) { // recurse
deleteFolderRecursive(curPath);
} else { // delete file
fs.unlinkSync(curPath);
}
});
fs.rmdirSync(path);
}
};

15
packages/omim/src/icon/index.d.ts vendored Normal file
View File

@ -0,0 +1,15 @@
import { WeElement } from 'omi';
interface Props {
onClick: (...arg: any) => {};
}
interface Data {
}
export default class Icon extends WeElement<Props, Data> {
static css: any;
static defaultProps: {
scale: number;
};
onClick: (e: any) => void;
render(props: any): JSX.Element;
}
export {};

2080
packages/omim/src/icon/index.js Normal file
View File

File diff suppressed because it is too large Load Diff

1
packages/omim/src/icon/index.js.map Normal file
View File

File diff suppressed because one or more lines are too long

28
packages/omim/src/icon/index.scss Normal file
View File

@ -0,0 +1,28 @@
.m-icon {
text-align: center;
display: inline-block;
}
.rotate {
display: inline-block;
-webkit-animation: rotate 1s infinite linear;
animation: rotate 1s infinite linear;
}
i div {
font-style: normal;
}
@-webkit-keyframes rotate {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg)
}
}
@keyframes rotate {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg)
}
}

54
packages/omim/src/icon/index.tsx Normal file
View File

@ -0,0 +1,54 @@
import { tag, WeElement, h, extractClass, classNames } from 'omi'
import * as css from './index.scss'
interface Props {
onClick: (...arg: any) => {}
}
interface Data {
}
@tag('m-icon')
export default class Icon extends WeElement<Props, Data>{
static css = css
static defaultProps = {
scale: 2
}
onClick = e => {
this.props.onClick && this.props.onClick(e)
//e.stopPropagation()
}
render(props) {
return (
<i {...extractClass(props, 'm-icon')} onClick={this.onClick} >
<svg
viewBox="0 0 1024 1024"
class={classNames({ rotate: props.rotate })}
width={props.scale + 'em'}
height={props.scale + 'em'}
fill={props.color}
aria-hidden="true"
>
{props.paths ? (
props.paths.map(item => {
const attrs = { d: item.path, fill: props.color || 'black' }
if (item.color) attrs.fill = item.color
return <path {...attrs}></path>
})
) : <path d={props.path} />}
</svg>
{props.children && (
<div style={`color:${props.color || 'black'};`}>
{props.children[0]}
</div>
)}
</i>
)
}
}