From 6ffbf1450982bf3621b3129c1038b6db23fe1b6b Mon Sep 17 00:00:00 2001 From: hejiasheng Date: Wed, 11 Jul 2018 18:15:52 +0800 Subject: [PATCH] =?UTF-8?q?chore:=20=E7=BB=93=E6=9E=84=E8=B0=83=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .eslintrc | 11 +- package.json | 26 ++--- src/app.js | 18 ++-- src/pages/index/index.js | 214 ++++++++++++++++++++++++++++++++++--- src/pages/index/index.scss | 77 +++++++++++++ src/pages/toast/index.js | 45 ++++++++ src/pages/toast/index.scss | 0 7 files changed, 356 insertions(+), 35 deletions(-) create mode 100644 src/pages/toast/index.js create mode 100644 src/pages/toast/index.scss diff --git a/.eslintrc b/.eslintrc index 57e26df55..cb76805d2 100644 --- a/.eslintrc +++ b/.eslintrc @@ -1,7 +1,16 @@ { "extends": ["taro"], "rules": { - "no-unused-vars": ["error", { "varsIgnorePattern": "Taro" }] + "no-unused-vars": ["error", { "varsIgnorePattern": "Taro" }], + "quotes": [2, "single"], + "react/self-closing-comp": "off", + "react/jsx-closing-bracket-location": [ + "error", + { + "nonEmpty": "after-props", + "selfClosing": "after-props" + } + ] }, "parser": "babel-eslint" } diff --git a/package.json b/package.json index 81e5517a8..9d1968926 100644 --- a/package.json +++ b/package.json @@ -14,31 +14,31 @@ "author": "", "license": "MIT", "dependencies": { - "@tarojs/components": "^0.0.67", - "@tarojs/router": "^0.0.67", - "@tarojs/taro": "^0.0.67", - "@tarojs/taro-h5": "^0.0.67", - "@tarojs/taro-weapp": "^0.0.67", + "@tarojs/components": "latest", + "@tarojs/router": "latest", + "@tarojs/taro": "latest", + "@tarojs/taro-h5": "latest", + "@tarojs/taro-weapp": "latest", "lodash": "^4.17.10", "nervjs": "^1.3.0" }, "devDependencies": { - "@tarojs/cli": "^0.0.67", - "@tarojs/plugin-babel": "^0.0.67", - "@tarojs/plugin-csso": "^0.0.67", - "@tarojs/plugin-sass": "^0.0.67", - "@tarojs/plugin-uglifyjs": "^0.0.67", - "@tarojs/webpack-runner": "^0.0.67", + "@tarojs/cli": "latest", + "@tarojs/plugin-babel": "latest", + "@tarojs/plugin-csso": "latest", + "@tarojs/plugin-sass": "latest", + "@tarojs/plugin-uglifyjs": "latest", + "@tarojs/webpack-runner": "latest", "babel-eslint": "^8.2.3", "babel-plugin-transform-class-properties": "^6.24.1", "babel-plugin-transform-decorators-legacy": "^1.3.4", "babel-plugin-transform-object-rest-spread": "^6.26.0", "babel-preset-env": "^1.6.1", "eslint": "^4.19.1", - "eslint-config-taro": "^0.0.67", + "eslint-config-taro": "latest", "eslint-plugin-import": "^2.12.0", "eslint-plugin-react": "^7.8.2", - "eslint-plugin-taro": "^0.0.67", + "eslint-plugin-taro": "latest", "glob": "^7.1.2", "gulp": "^3.9.1", "gulp-clean": "^0.4.0", diff --git a/src/app.js b/src/app.js index ed3584040..bbfa355df 100644 --- a/src/app.js +++ b/src/app.js @@ -1,16 +1,16 @@ -import Taro, { Component } from "@tarojs/taro" -import Index from "./pages/index/index" +import Taro, { Component } from '@tarojs/taro' +import Index from './pages/index/index' -import "./app.scss" +import './app.scss' class App extends Component { config = { - pages: ["pages/index/index"], + pages: ['pages/index/index', 'pages/toast/index'], window: { - backgroundTextStyle: "light", - navigationBarBackgroundColor: "#fff", - navigationBarTitleText: "WeChat", - navigationBarTextStyle: "black" + backgroundTextStyle: 'light', + navigationBarBackgroundColor: '#fff', + navigationBarTitleText: 'WeChat', + navigationBarTextStyle: 'black' } } @@ -27,4 +27,4 @@ class App extends Component { } } -Taro.render(, document.getElementById("app")) +Taro.render(, document.getElementById('app')) diff --git a/src/pages/index/index.js b/src/pages/index/index.js index 59c03b52e..90d4896ed 100644 --- a/src/pages/index/index.js +++ b/src/pages/index/index.js @@ -1,25 +1,215 @@ -import Taro from "@tarojs/taro" -import { View, Text } from "@tarojs/components" +import Taro from '@tarojs/taro' +import { View } from '@tarojs/components' + +import './index.scss' export default class Index extends Taro.Component { config = { - navigationBarTitleText: "首页" + navigationBarTitleText: 'Taro UI' } - componentWillMount() {} - - componentDidMount() {} - - componentWillUnmount() {} + constructor() { + super(...arguments) - componentDidShow() {} + this.state = { + list: [ + { + id: 'View', + name: '视图', + open: false, + childrens: [ + { + title: '图标', + name: 'Icon' + }, + { + title: '颜色', + name: 'Color' + }, + { + title: '文本', + name: 'Text' + }, + { + title: '按钮', + name: 'Button' + } + ] + }, + { + id: 'Content', + name: '基础组件', + open: false, + childrens: [ + { + title: '通告栏', + name: 'Notice-Bar' + }, + { + title: '徽章', + name: 'Badge' + }, + { + title: '警告提示', + name: 'Alert' + }, + { + title: '标签', + name: 'Tag' + }, + { + title: '头像', + name: 'Avatar' + }, + { + title: '文章', + name: 'Article' + } + ] + }, + { + id: 'Action', + name: '操作反馈', + open: false, + childrens: [ + { + title: '动作面板', + name: 'Action-Sheet' + }, + { + title: '动作指示器', + name: 'Activity-Indicator' + }, + { + title: '对话框', + name: 'Modal' + }, + { + title: '进度条', + name: 'Progress' + }, + { + title: '轻提示', + name: 'Toast' + } + ] + }, + { + id: 'form', + name: '表单组件', + open: false, + childrens: [ + { + title: '输入框', + name: 'Input' + }, + { + title: '单选框', + name: 'Radio' + }, + { + title: '复选框', + name: 'Checkbox' + }, + { + title: '开关', + name: 'Switch' + }, + { + title: '评分', + name: 'Rate' + }, + { + title: '数字输入框', + name: 'Input-Number' + }, + { + title: '多行文本框', + name: 'Textarea' + } + ] + }, + { + id: 'Layout', + name: '布局', + open: false, + childrens: [ + { + title: '布局', + name: 'Layout' + }, + { + title: '栅格', + name: 'Grid' + }, + { + title: '列表', + name: 'List' + }, + { + title: '浮层', + name: 'Float-Layout' + } + ] + }, + { + id: 'Navigation', + name: '导航', + childrens: [ + { + title: '标签页', + name: 'Tabs' + }, + { + title: '抽屉', + name: 'Drawer' + } + ] + } + ] + } + } - componentDidHide() {} + goToComponent = ({ name }) => { + const url = `/pages/${name.toLowerCase()}/index` + Taro.navigateTo({ + url + }) + } render() { + const { list } = this.state return ( - - Hello world! + + 组件入口 + + + {list.map((item, index) => { + return ( + + + {item.name} + + + {item.childrens.map(child => { + return ( + + + {child.name} {child.title} + + + + ) + })} + + + ) + })} + + ) } diff --git a/src/pages/index/index.scss b/src/pages/index/index.scss index e69de29bb..92ac8fb49 100644 --- a/src/pages/index/index.scss +++ b/src/pages/index/index.scss @@ -0,0 +1,77 @@ +.index-page { + background-color: #f8f8f8; +} + +.page-header { + padding: 40px; + padding-top: 80px; + text-align: center; +} + +.page-body { + padding: 40px; +} + +.component-group { + font-size: 32px; +} + +.group-item { + padding: 0 30px; + margin: 20px 0; + background-color: #ffffff; + border-radius: 4px; + overflow: hidden; + &:first-child { + margin-top: 0; + } +} + +.group-info { + padding: 30px 0; + display: flex; + align-items: center; + transition: opacity 0.3s; + &-title { + opacity: 0.5; + } +} + +.group-list { + font-size: 28px; + .list-component { + padding: 20px 0; + position: relative; + align-items: center; + &:before { + content: " "; + position: absolute; + left: 0; + top: 0; + right: 0; + height: 1px; + border-top: 1px solid #d8d8d8; + color: #d8d8d8; + } + &:first-child::before { + display: none; + } + + &-info { + width: 100%; + } + + &-arrow { + display: inline-block; + height: 18px; + width: 18px; + border-width: 2px 2px 0 0; + border-color: #888888; + border-style: solid; + transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0) translate(-50%); + position: absolute; + top: 50%; + right: 0; + } + } +} diff --git a/src/pages/toast/index.js b/src/pages/toast/index.js new file mode 100644 index 000000000..e93d80ff5 --- /dev/null +++ b/src/pages/toast/index.js @@ -0,0 +1,45 @@ +import Taro from '@tarojs/taro' +import { View } from '@tarojs/components' + +import './index.scss' + +export default class Index extends Taro.Component { + config = { + navigationBarTitleText: 'Taro UI' + } + + constructor() { + super(...arguments) + this.state = {} + } + + render() { + return ( + + + Toast + + + Modal + + + Start Loading + + + Cancle Loading + + + Action Sheet + + + ) + } +} diff --git a/src/pages/toast/index.scss b/src/pages/toast/index.scss new file mode 100644 index 000000000..e69de29bb