├── .buckconfig ├── .dockerignore ├── .eslintignore ├── .eslintrc.js ├── .flowconfig ├── .gitattributes ├── .gitignore ├── .npmignore ├── .prettierrc.js ├── .watchmanconfig ├── Dockerfile ├── LICENSE ├── README.md ├── SECURITY.md ├── __tests__ └── App-test.js ├── android ├── app │ ├── BUCK │ ├── build.gradle │ ├── build_defs.bzl │ ├── debug.keystore │ ├── proguard-rules.pro │ └── src │ │ ├── debug │ │ └── AndroidManifest.xml │ │ └── main │ │ ├── AndroidManifest.xml │ │ ├── java │ │ └── com │ │ │ └── mcloudmobile │ │ │ ├── MainActivity.java │ │ │ └── MainApplication.java │ │ └── res │ │ ├── mipmap-hdpi │ │ ├── ic_launcher.png │ │ └── ic_launcher_round.png │ │ ├── mipmap-mdpi │ │ ├── ic_launcher.png │ │ └── ic_launcher_round.png │ │ ├── mipmap-xhdpi │ │ ├── ic_launcher.png │ │ └── ic_launcher_round.png │ │ ├── mipmap-xxhdpi │ │ ├── ic_launcher.png │ │ └── ic_launcher_round.png │ │ ├── mipmap-xxxhdpi │ │ ├── ic_launcher.png │ │ └── ic_launcher_round.png │ │ └── values │ │ ├── strings.xml │ │ └── styles.xml ├── build.gradle ├── gradle.properties ├── gradle │ └── wrapper │ │ ├── gradle-wrapper.jar │ │ └── gradle-wrapper.properties ├── gradlew ├── gradlew.bat └── settings.gradle ├── app.json ├── babel.config.js ├── components ├── EmptyView │ ├── assets │ │ ├── empty_network_failed@2x.png │ │ ├── empty_network_failed@3x.png │ │ ├── empty_network_failed_dark@2x.png │ │ ├── empty_network_failed_dark@3x.png │ │ ├── empty_no_data@2x.png │ │ ├── empty_no_data@3x.png │ │ ├── empty_no_data_dark@2x.png │ │ └── empty_no_data_dark@3x.png │ ├── demo │ │ └── basic.js │ ├── index.js │ └── style │ │ └── index.js ├── Label │ ├── demo │ │ └── basic.js │ ├── index.js │ └── style │ │ └── index.js ├── Tabs │ ├── demo │ │ └── basic.js │ ├── index.js │ └── style │ │ └── index.js ├── actionSheet │ ├── assets │ │ ├── check@2x.png │ │ └── check@3x.png │ ├── demo │ │ └── basic.js │ ├── index.js │ └── style │ │ └── index.js ├── activityIndicator │ ├── demo │ │ └── basic.js │ ├── index.js │ └── style │ │ └── index.js ├── avatar │ ├── Avatar.js │ ├── Avatar.web.js │ ├── assets │ │ ├── default@2x.png │ │ └── default@3x.png │ ├── demo │ │ └── basic.js │ ├── index.js │ └── style │ │ └── index.js ├── badge │ ├── assets │ │ ├── badge_next@2x.png │ │ └── badge_next@3x.png │ ├── demo │ │ └── basic.js │ ├── index.js │ └── style │ │ └── index.js ├── button │ ├── demo │ │ └── basic.js │ ├── index.js │ └── style │ │ └── index.js ├── card │ ├── demo │ │ └── basic.js │ ├── index.js │ └── style │ │ └── index.js ├── checkbox │ ├── Checkbox.js │ ├── CheckboxItem.js │ ├── assets │ │ ├── check@2x.png │ │ ├── check@3x.png │ │ ├── check_dark@2x.png │ │ ├── check_dark@3x.png │ │ ├── check_disabled@2x.png │ │ ├── check_disabled@3x.png │ │ ├── check_disabled_dark@2x.png │ │ ├── check_disabled_dark@3x.png │ │ ├── no_check@2x.png │ │ ├── no_check@3x.png │ │ ├── no_check_dark@2x.png │ │ ├── no_check_dark@3x.png │ │ ├── no_check_disabled@2x.png │ │ ├── no_check_disabled@3x.png │ │ ├── no_check_disabled_dark@2x.png │ │ └── no_check_disabled_dark@3x.png │ ├── demo │ │ └── basic.js │ ├── index.js │ └── style │ │ └── index.js ├── countDownView │ ├── demo │ │ └── basic.js │ ├── index.js │ └── style │ │ └── index.js ├── date-picker │ ├── datepicker │ │ ├── DatePicker.js │ │ └── Popup.js │ ├── demo │ │ └── basic.js │ ├── index.js │ └── utils.js ├── index.js ├── inputItem │ ├── demo │ │ └── basic.js │ ├── index.js │ └── style │ │ └── index.js ├── list-undone │ ├── demo │ │ └── basic.js │ ├── index.js │ ├── item.js │ └── style │ │ └── index.js ├── list │ ├── Brief.js │ ├── Item.js │ ├── List.js │ ├── assets │ │ ├── arrow_down@2x.png │ │ ├── arrow_down@3x.png │ │ ├── arrow_horizontal@2x.png │ │ ├── arrow_horizontal@3x.png │ │ ├── arrow_up@2x.png │ │ └── arrow_up@3x.png │ ├── demo │ │ └── basic.js │ ├── index.js │ └── style │ │ └── index.js ├── marquee │ ├── demo │ │ └── basic.js │ ├── index.js │ └── style │ │ └── index.js ├── modal │ ├── AlertView.js │ ├── LoadingView.js │ ├── MaskView.js │ ├── NoticeView.js │ ├── PromptView.js │ ├── ToastView.js │ ├── alert.js │ ├── assets │ │ ├── icon_input_delete@2x.png │ │ ├── icon_input_delete@3x.png │ │ ├── icon_modal_close@2x.png │ │ ├── icon_modal_close@3x.png │ │ ├── icon_modal_error@2x.png │ │ ├── icon_modal_error@3x.png │ │ ├── icon_modal_selected@2x.png │ │ ├── icon_modal_selected@3x.png │ │ ├── icon_modal_success@2x.png │ │ ├── icon_modal_success@3x.png │ │ ├── icon_modal_unselected@2x.png │ │ ├── icon_modal_unselected@3x.png │ │ ├── icon_modal_warning@2x.png │ │ ├── icon_modal_warning@3x.png │ │ ├── icon_toast_error@2x.png │ │ ├── icon_toast_error@3x.png │ │ ├── icon_toast_success@2x.png │ │ ├── icon_toast_success@3x.png │ │ ├── icon_toast_warning@2x.png │ │ └── icon_toast_warning@3x.png │ ├── demo │ │ └── basic.js │ ├── index.js │ ├── loading.js │ ├── notice.js │ ├── prompt.js │ ├── provider │ │ ├── ModalHost.js │ │ └── index.js │ ├── style │ │ └── index.js │ └── toast.js ├── noticeBar │ ├── assets │ │ ├── notice_hint@2x.png │ │ └── notice_hint@3x.png │ ├── demo │ │ └── basic.js │ ├── index.js │ └── style │ │ └── index.js ├── picker │ ├── MultiPicker.js │ ├── MultiPickerMixin.js │ ├── NativePicker.android.js │ ├── NativePicker.ios.js │ ├── NativePicker.web.js │ ├── Picker.js │ ├── PickerMixin.js │ ├── Popup.js │ ├── PopupMixin.js │ ├── cascader │ │ ├── Popup.js │ │ └── index.js │ ├── demo │ │ ├── basic.js │ │ └── data.json │ ├── index.js │ └── style │ │ └── index.js ├── provider │ └── index.js ├── radio │ ├── Radio.js │ ├── RadioItem.js │ ├── demo │ │ └── basic.js │ ├── index.js │ └── style │ │ └── index.js ├── searchBar │ ├── assets │ │ ├── clear@2x.png │ │ ├── clear@3x.png │ │ ├── search-big@2x.png │ │ ├── search-big@3x.png │ │ ├── search-small@2x.png │ │ └── search-small@3x.png │ ├── demo │ │ └── basic.js │ ├── index.js │ └── style │ │ └── index.js ├── segmentedControl │ ├── demo │ │ └── basic.js │ ├── index.js │ └── style │ │ └── index.js ├── shareSheet │ ├── assets │ │ ├── icon-friend.png │ │ ├── icon-friend@2x.png │ │ ├── icon-friend@3x.png │ │ ├── icon-qq.png │ │ ├── icon-qq@2x.png │ │ ├── icon-qq@3x.png │ │ ├── icon-qzone.png │ │ ├── icon-qzone@2x.png │ │ ├── icon-qzone@3x.png │ │ ├── icon-wechat.png │ │ ├── icon-wechat@2x.png │ │ ├── icon-wechat@3x.png │ │ ├── icon-weibo.png │ │ ├── icon-weibo@2x.png │ │ └── icon-weibo@3x.png │ ├── demo │ │ └── basic.js │ ├── index.js │ ├── item.js │ └── style │ │ └── index.js ├── stepper │ ├── assets │ │ ├── stepper_add@2x.png │ │ ├── stepper_add@3x.png │ │ ├── stepper_add_default@2x.png │ │ ├── stepper_add_default@3x.png │ │ ├── stepper_add_disable@2x.png │ │ ├── stepper_add_disable@3x.png │ │ ├── stepper_subtract@2x.png │ │ ├── stepper_subtract@3x.png │ │ ├── stepper_subtract_default@2x.png │ │ ├── stepper_subtract_default@3x.png │ │ ├── stepper_subtract_disable@2x.png │ │ └── stepper_subtract_disable@3x.png │ ├── demo │ │ └── basic.js │ ├── index.js │ └── style │ │ └── index.js ├── steps │ ├── Steps.js │ ├── StepsItem.js │ ├── assets │ │ ├── steps_error@2x.png │ │ ├── steps_error@3x.png │ │ ├── steps_finish@2x.png │ │ ├── steps_finish@3x.png │ │ ├── steps_wait@2x.png │ │ └── steps_wait@3x.png │ ├── demo │ │ └── basic.js │ ├── index.js │ └── style │ │ └── index.js ├── style │ ├── index.js │ └── themes │ │ ├── dark.js │ │ └── light.js ├── switch │ ├── Switch.js │ ├── Switch.web.js │ ├── SwitchItem.js │ ├── demo │ │ └── basic.js │ ├── index.js │ └── style │ │ └── index.js ├── textarea │ ├── demo │ │ └── basic.js │ ├── index.js │ └── style │ │ └── index.js └── utils │ ├── AsyncStorage.js │ ├── AsyncStorage.web.js │ └── KeyboardType.js ├── docker-compose.yml ├── docs ├── ActionSheet.md ├── ActivityIndicator.md ├── Avatar.md ├── Badge.md ├── Button.md ├── Card.md ├── Checkbox.md ├── Contributing.md ├── CountDownView.md ├── DatePicker.md ├── EmptyView.md ├── InputItem.md ├── Label.md ├── List.md ├── Marquee.md ├── Modal.md ├── NoticeBar.md ├── Picker.md ├── Radio.md ├── SearchBar.md ├── SegmentedControl.md ├── ShareSheet.md ├── Stepper.md ├── Steps.md ├── Switch.md ├── Tabs.md ├── Textarea.md ├── exampledoc4.md ├── exampledoc5.md └── index.md ├── example ├── App.js ├── componentList.js ├── home.js └── logo.png ├── index.js ├── ios ├── Podfile ├── Podfile.lock ├── mCloudMobile-tvOS │ └── Info.plist ├── mCloudMobile-tvOSTests │ └── Info.plist ├── mCloudMobile.xcodeproj │ ├── project.pbxproj │ └── xcshareddata │ │ └── xcschemes │ │ ├── mCloudMobile-tvOS.xcscheme │ │ └── mCloudMobile.xcscheme ├── mCloudMobile.xcworkspace │ ├── contents.xcworkspacedata │ └── xcshareddata │ │ ├── IDEWorkspaceChecks.plist │ │ └── WorkspaceSettings.xcsettings ├── mCloudMobile │ ├── AppDelegate.h │ ├── AppDelegate.m │ ├── Base.lproj │ │ └── LaunchScreen.xib │ ├── Images.xcassets │ │ ├── AppIcon.appiconset │ │ │ └── Contents.json │ │ └── Contents.json │ ├── Info.plist │ └── main.m └── mCloudMobileTests │ ├── Info.plist │ └── mCloudMobileTests.m ├── metro.config.js ├── package.json ├── patches ├── @react-native-community+eslint-config+0.0.5.patch └── @react-navigation+core+3.5.1.patch ├── website ├── README.md ├── blog │ ├── 2016-03-11-blog-post.md │ ├── 2017-04-10-blog-post-two.md │ ├── 2017-09-25-testing-rss.md │ ├── 2017-09-26-adding-rss.md │ └── 2017-10-24-new-version-1.0.0.md ├── core │ ├── Footer.js │ └── RemarkablePlugins.js ├── i18n │ └── en.json ├── package.json ├── pages │ └── en │ │ ├── help.js │ │ ├── index.js │ │ └── users.js ├── sidebars.json ├── siteConfig.js ├── static │ ├── css │ │ └── custom.css │ ├── img │ │ ├── daka_logo.png │ │ ├── favicon.png │ │ ├── oss_logo.png │ │ ├── undraw_code_review.svg │ │ ├── undraw_monitor.svg │ │ ├── undraw_note_list.svg │ │ ├── undraw_online.svg │ │ ├── undraw_open_source.svg │ │ ├── undraw_operating_system.svg │ │ ├── undraw_react.svg │ │ ├── undraw_tweetstorm.svg │ │ └── undraw_youtube_tutorial.svg │ └── js │ │ └── codeblocks.js └── yarn.lock └── yarn.lock /.buckconfig: -------------------------------------------------------------------------------- 1 | 2 | [android] 3 | target = Google Inc.:Google APIs:23 4 | 5 | [maven_repositories] 6 | central = https://repo1.maven.org/maven2 7 | -------------------------------------------------------------------------------- /.dockerignore: -------------------------------------------------------------------------------- 1 | */node_modules 2 | *.log 3 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | /__tests__ 3 | .eslintrc.js 4 | /website 5 | /example -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { 4 | es6: true, 5 | }, 6 | extends: [ 7 | 'airbnb', 8 | '@react-native-community' 9 | ], 10 | globals: { 11 | Atomics: 'readonly', 12 | SharedArrayBuffer: 'readonly', 13 | }, 14 | parser: "babel-eslint", 15 | parserOptions: { 16 | ecmaFeatures: { 17 | jsx: true, 18 | }, 19 | ecmaVersion: 2018, 20 | sourceType: 'module', 21 | }, 22 | plugins: [ 23 | // 'react', 24 | // 'react-native', 25 | 'babel' 26 | ], 27 | rules: { 28 | "indent": ["error", 4], 29 | "react/jsx-indent-props": [2, 4], 30 | "react/jsx-indent": [2,4], 31 | "react/jsx-filename-extension": [2, { "extensions": [".js", ".jsx"] }], 32 | "react/static-property-placement": [2,'static public field'], 33 | "lines-between-class-members": [2,'never'], 34 | "semi": [2,'never'], 35 | "react/prefer-stateless-function":0, 36 | "import/prefer-default-export":0, 37 | "no-var":2, 38 | "eqeqeq":1, 39 | "default-case":1, 40 | "no-mixed-spaces-and-tabs":1, 41 | "no-multiple-empty-lines":1, 42 | "no-empty-function":1, 43 | "no-useless-return":2, 44 | "no-unreachable":2, 45 | "max-classes-per-file": ["error", 2], 46 | "comma-dangle": 1, 47 | "react/prop-types": 2, 48 | "react/destructuring-assignment": 1, 49 | "no-underscore-dangle": 0, 50 | // "react/sort-comp": [2, { 51 | // order: [ 52 | // 'static-methods', 53 | // ], 54 | // }], 55 | "import/order": 0, 56 | "class-methods-use-this": 0, 57 | "max-len": [2, 120], 58 | "react/forbid-prop-types":0, 59 | "import/no-unresolved": [2, { "ignore": ['\.png$'] }], 60 | "react/require-default-props": 0, 61 | "react/state-in-constructor": [1,"never"], 62 | "global-require":0, 63 | "linebreak-style":"off", 64 | "prettier/prettier":0, 65 | "import/no-extraneous-dependencies":0 66 | } 67 | }; 68 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | *.pbxproj -text 2 | .DS_Store 3 | 4 | node_modules 5 | 6 | lib/core/metadata.js 7 | lib/core/MetadataBlog.js 8 | 9 | website/translated_docs 10 | website/build/ 11 | website/yarn.lock 12 | website/node_modules 13 | website/i18n/* 14 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # OSX 2 | # 3 | .DS_Store 4 | 5 | # Xcode 6 | # 7 | build/ 8 | *.pbxuser 9 | !default.pbxuser 10 | *.mode1v3 11 | !default.mode1v3 12 | *.mode2v3 13 | !default.mode2v3 14 | *.perspectivev3 15 | !default.perspectivev3 16 | xcuserdata 17 | *.xccheckout 18 | *.moved-aside 19 | DerivedData 20 | *.hmap 21 | *.ipa 22 | *.xcuserstate 23 | project.xcworkspace 24 | 25 | # Android/IntelliJ 26 | # 27 | build/ 28 | .idea 29 | .gradle 30 | local.properties 31 | *.iml 32 | 33 | # node.js 34 | # 35 | node_modules/ 36 | npm-debug.log 37 | yarn-error.log 38 | 39 | # BUCK 40 | buck-out/ 41 | \.buckd/ 42 | 43 | # fastlane 44 | # 45 | # It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the 46 | # screenshots whenever they are needed. 47 | # For more information about the recommended setup visit: 48 | # https://docs.fastlane.tools/best-practices/source-control/ 49 | 50 | */fastlane/report.xml 51 | */fastlane/Preview.html 52 | */fastlane/screenshots 53 | 54 | # Bundle artifact 55 | *.jsbundle 56 | 57 | # CocoaPods 58 | /ios/Pods/ 59 | .vscode/ -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | node_moudles/ 2 | example/ 3 | .vscode/ 4 | docs/ 5 | ios/ 6 | android/ 7 | __tests__/ 8 | patches/ 9 | website/ 10 | .buckconfig 11 | .dockerignore 12 | .eslintignore 13 | .eslintrc.js 14 | .flowconfig 15 | .prettierrc.js 16 | .watchmanconfig 17 | app.json 18 | babel.config.js 19 | docker-compose.yml 20 | Dockerfile 21 | metro.config.js 22 | yarn.lock -------------------------------------------------------------------------------- /.prettierrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | bracketSpacing: false, 3 | jsxBracketSameLine: true, 4 | singleQuote: true, 5 | trailingComma: 'all', 6 | }; 7 | -------------------------------------------------------------------------------- /.watchmanconfig: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /Dockerfile: -------------------------------------------------------------------------------- 1 | FROM node:8.11.4 2 | 3 | WORKDIR /app/website 4 | 5 | EXPOSE 3000 35729 6 | COPY ./docs /app/docs 7 | COPY ./website /app/website 8 | RUN yarn install 9 | 10 | CMD ["yarn", "start"] 11 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # mCloud-Design-Mobile 2 | daka-v8-ui view library 3 | 4 | **集成方式** 5 | ``` 6 | npm install mcloud-mobile 7 | react-native link 8 | ``` 9 | **API:**[https://troila-mobile.github.io/mCloud-Design-Mobile/docs/Button](https://troila-mobile.github.io/mCloud-Design-Mobile/docs/Button) 10 | 11 | 12 | # 背景 13 | 14 | 卓朗科技的[打卡助手](https://idaka.vip)由 react-native实现主业务开发，我们的产品即将面临 version 8.0 的产品迭代，我们面临的主要问题是_view_层的大改版和 old code 的历史包袱，我们在曾经使用很多第三方的 view library，**But** 这些都无法满足我们的全部定制化需求，**So** 经过团队内部的讨论后，我们决定由我们 **(troila-daka-mobile团队) **来自己实现一套view library 15 | 16 | # 需求 17 | 18 | - 独立的定制化风格（由我们的**UED同事**重新绘制的打卡助手8.0**Design**） 19 | - 便于使用的拓展性（一些第三方组件对于属性和样式的拓展性不友好） 20 | - 支持**iOS13**的**Dark Mode**（为了更加友好的用户体验，打卡助手8.0支持了**Dark Mode**） 21 | 22 | # 实现 23 | 24 | **在这样的背景和需求之下，我们的[mCloud-Design-Mobile](https://troila-mobile.github.io/mCloud-Design-Mobile/)诞生了。** 25 | **我们的mCloud-Design-Mobile是开源的，分享给更多的开发者使用，也希望有更多的开发者和我们一起共同维护这个仓库** 26 | * Github: [https://github.com/troila-mobile/mCloud-Design-Mobile](https://github.com/troila-mobile/mCloud-Design-Mobile) 27 | * Npm: [https://www.npmjs.com/package/mcloud-mobile](https://www.npmjs.com/package/mcloud-mobile) 28 | * Website: [https://troila-mobile.github.io/mCloud-Design-Mobile/](https://troila-mobile.github.io/mCloud-Design-Mobile/) 29 | 30 | **目前实现的组件** 31 | 32 | | 组件 | 描述 | 33 | | ---- |---- | 34 | | Button | 按钮| 35 | | Modal | 弹窗 | 36 | | Marquee |滚动文字| 37 | | SearchBar | 搜索栏 | 38 | | Checkbox | 复选框| 39 | | Switch | 滑动开关 | 40 | | SegmentedControl | 分段器| 41 | | NoticeBar | 提示信息 | 42 | | Radio | 单选框| 43 | | InputItem | 单行文本输入 | 44 | | Textarea | 多行文本输入 | 45 | | List | 列表 | 46 | | Badge | 徽标数 | 47 | | Card | 卡片 | 48 | | Label | 标签 | 49 | | Picker | 选择器 | 50 | | DatePicker | 日期选择器 | 51 | | EmptyView | 空显示 | 52 | | Tabs | 标签页 | 53 | | ActionSheet | 动作面板 | 54 | | Avatar | 头像 | 55 | | Stepper | 步进器 | 56 | | ShareSheet | 分享 | 57 | | ActivityIndicator | 活动指标 | 58 | | CountDownView | 倒计时 | 59 | | Steps | 分步显示 | 60 | 61 | # 致谢 62 | 63 | 我们在开发的初期深入思考了对于整体样式的统一性和外部样式的可拓展性，同时我们也借鉴了一些第三方组件如@ant-design/react-native的一些开发思想，并且结合了我们的**dark mode**的需求，来实现整体的效果。 64 | 65 | 在组件搭建完成后，为了方便开发者阅读和使用，我们使用了**docusaurus**来搭建website，使用**expo snack**来在web端模拟展示组件样式。 66 | 67 | # Last 68 | 69 | 我们在最初寻找了社区内支持**dark mode**的组件，可惜并没有找到，所以我们自己开始造，我们曾经在社区内获得了非常多的资源和支持，现在我们也开始贡献给社区，尽管它可能还比较初期，一些功能还不完善，但我们会不断的维护这个仓库，帮助更多的开发者，thank。 -------------------------------------------------------------------------------- /SECURITY.md: -------------------------------------------------------------------------------- 1 | # Security Policy 2 | 3 | ## Supported Versions 4 | 5 | Use this section to tell people about which versions of your project are 6 | currently being supported with security updates. 7 | 8 | | Version | Supported | 9 | | ------- | ------------------ | 10 | | 5.1.x | :white_check_mark: | 11 | | 5.0.x | :x: | 12 | | 4.0.x | :white_check_mark: | 13 | | < 4.0 | :x: | 14 | 15 | ## Reporting a Vulnerability 16 | 17 | Use this section to tell people how to report a vulnerability. 18 | 19 | Tell them where to go, how often they can expect to get an update on a 20 | reported vulnerability, what to expect if the vulnerability is accepted or 21 | declined, etc. 22 | -------------------------------------------------------------------------------- /__tests__/App-test.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @format 3 | */ 4 | 5 | import 'react-native'; 6 | import React from 'react'; 7 | import App from '../App'; 8 | 9 | // Note: test renderer must be required after react-native. 10 | import renderer from 'react-test-renderer'; 11 | 12 | it('renders correctly', () => { 13 | renderer.create(); 14 | }); 15 | -------------------------------------------------------------------------------- /android/app/BUCK: -------------------------------------------------------------------------------- 1 | # To learn about Buck see [Docs](https://buckbuild.com/). 2 | # To run your application with Buck: 3 | # - install Buck 4 | # - `npm start` - to start the packager 5 | # - `cd android` 6 | # - `keytool -genkey -v -keystore keystores/debug.keystore -storepass android -alias androiddebugkey -keypass android -dname "CN=Android Debug,O=Android,C=US"` 7 | # - `./gradlew :app:copyDownloadableDepsToLibs` - make all Gradle compile dependencies available to Buck 8 | # - `buck install -r android/app` - compile, install and run application 9 | # 10 | 11 | load(":build_defs.bzl", "create_aar_targets", "create_jar_targets") 12 | 13 | lib_deps = [] 14 | 15 | create_aar_targets(glob(["libs/*.aar"])) 16 | 17 | create_jar_targets(glob(["libs/*.jar"])) 18 | 19 | android_library( 20 | name = "all-libs", 21 | exported_deps = lib_deps, 22 | ) 23 | 24 | android_library( 25 | name = "app-code", 26 | srcs = glob([ 27 | "src/main/java/**/*.java", 28 | ]), 29 | deps = [ 30 | ":all-libs", 31 | ":build_config", 32 | ":res", 33 | ], 34 | ) 35 | 36 | android_build_config( 37 | name = "build_config", 38 | package = "com.mcloudmobile", 39 | ) 40 | 41 | android_resource( 42 | name = "res", 43 | package = "com.mcloudmobile", 44 | res = "src/main/res", 45 | ) 46 | 47 | android_binary( 48 | name = "app", 49 | keystore = "//android/keystores:debug", 50 | manifest = "src/main/AndroidManifest.xml", 51 | package_type = "debug", 52 | deps = [ 53 | ":app-code", 54 | ], 55 | ) 56 | -------------------------------------------------------------------------------- /android/app/build_defs.bzl: -------------------------------------------------------------------------------- 1 | """Helper definitions to glob .aar and .jar targets""" 2 | 3 | def create_aar_targets(aarfiles): 4 | for aarfile in aarfiles: 5 | name = "aars__" + aarfile[aarfile.rindex("/") + 1:aarfile.rindex(".aar")] 6 | lib_deps.append(":" + name) 7 | android_prebuilt_aar( 8 | name = name, 9 | aar = aarfile, 10 | ) 11 | 12 | def create_jar_targets(jarfiles): 13 | for jarfile in jarfiles: 14 | name = "jars__" + jarfile[jarfile.rindex("/") + 1:jarfile.rindex(".jar")] 15 | lib_deps.append(":" + name) 16 | prebuilt_jar( 17 | name = name, 18 | binary_jar = jarfile, 19 | ) 20 | -------------------------------------------------------------------------------- /android/app/debug.keystore: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/troila-mobile/mCloud-Design-Mobile/24feb308da78aa8c3bb8c7e87466b0341b6f45da/android/app/debug.keystore -------------------------------------------------------------------------------- /android/app/proguard-rules.pro: -------------------------------------------------------------------------------- 1 | # Add project specific ProGuard rules here. 2 | # By default, the flags in this file are appended to flags specified 3 | # in /usr/local/Cellar/android-sdk/24.3.3/tools/proguard/proguard-android.txt 4 | # You can edit the include path and order by changing the proguardFiles 5 | # directive in build.gradle. 6 | # 7 | # For more details, see 8 | # http://developer.android.com/guide/developing/tools/proguard.html 9 | 10 | # Add any project specific keep options here: 11 | -------------------------------------------------------------------------------- /android/app/src/debug/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /android/app/src/main/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | 13 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /android/app/src/main/java/com/mcloudmobile/MainActivity.java: -------------------------------------------------------------------------------- 1 | package com.mcloudmobile; 2 | 3 | import com.facebook.react.ReactActivity; 4 | 5 | public class MainActivity extends ReactActivity { 6 | 7 | /** 8 | * Returns the name of the main component registered from JavaScript. 9 | * This is used to schedule rendering of the component. 10 | */ 11 | @Override 12 | protected String getMainComponentName() { 13 | return "mCloudMobile"; 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /android/app/src/main/java/com/mcloudmobile/MainApplication.java: -------------------------------------------------------------------------------- 1 | package com.mcloudmobile; 2 | 3 | import android.app.Application; 4 | import android.util.Log; 5 | 6 | import com.facebook.react.PackageList; 7 | import com.facebook.hermes.reactexecutor.HermesExecutorFactory; 8 | import com.facebook.react.bridge.JavaScriptExecutorFactory; 9 | import com.facebook.react.ReactApplication; 10 | import com.reactnativecommunity.asyncstorage.AsyncStoragePackage; 11 | import com.facebook.react.ReactNativeHost; 12 | import com.facebook.react.ReactPackage; 13 | import com.facebook.soloader.SoLoader; 14 | 15 | import java.util.List; 16 | 17 | public class MainApplication extends Application implements ReactApplication { 18 | 19 | private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) { 20 | @Override 21 | public boolean getUseDeveloperSupport() { 22 | return BuildConfig.DEBUG; 23 | } 24 | 25 | @Override 26 | protected List getPackages() { 27 | @SuppressWarnings("UnnecessaryLocalVariable") 28 | List packages = new PackageList(this).getPackages(); 29 | // Packages that cannot be autolinked yet can be added manually here, for example: 30 | // packages.add(new MyReactNativePackage()); 31 | return packages; 32 | } 33 | 34 | @Override 35 | protected String getJSMainModuleName() { 36 | return "index"; 37 | } 38 | }; 39 | 40 | @Override 41 | public ReactNativeHost getReactNativeHost() { 42 | return mReactNativeHost; 43 | } 44 | 45 | @Override 46 | public void onCreate() { 47 | super.onCreate(); 48 | SoLoader.init(this, /* native exopackage */ false); 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-hdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/troila-mobile/mCloud-Design-Mobile/24feb308da78aa8c3bb8c7e87466b0341b6f45da/android/app/src/main/res/mipmap-hdpi/ic_launcher.png -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-hdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/troila-mobile/mCloud-Design-Mobile/24feb308da78aa8c3bb8c7e87466b0341b6f45da/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-mdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/troila-mobile/mCloud-Design-Mobile/24feb308da78aa8c3bb8c7e87466b0341b6f45da/android/app/src/main/res/mipmap-mdpi/ic_launcher.png -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-mdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/troila-mobile/mCloud-Design-Mobile/24feb308da78aa8c3bb8c7e87466b0341b6f45da/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-xhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/troila-mobile/mCloud-Design-Mobile/24feb308da78aa8c3bb8c7e87466b0341b6f45da/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/troila-mobile/mCloud-Design-Mobile/24feb308da78aa8c3bb8c7e87466b0341b6f45da/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/troila-mobile/mCloud-Design-Mobile/24feb308da78aa8c3bb8c7e87466b0341b6f45da/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/troila-mobile/mCloud-Design-Mobile/24feb308da78aa8c3bb8c7e87466b0341b6f45da/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/troila-mobile/mCloud-Design-Mobile/24feb308da78aa8c3bb8c7e87466b0341b6f45da/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/troila-mobile/mCloud-Design-Mobile/24feb308da78aa8c3bb8c7e87466b0341b6f45da/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /android/app/src/main/res/values/strings.xml: -------------------------------------------------------------------------------- 1 | 2 | mCloudMobile 3 | 4 | -------------------------------------------------------------------------------- /android/app/src/main/res/values/styles.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /android/build.gradle: -------------------------------------------------------------------------------- 1 | // Top-level build file where you can add configuration options common to all sub-projects/modules. 2 | 3 | buildscript { 4 | ext { 5 | buildToolsVersion = "28.0.3" 6 | minSdkVersion = 16 7 | compileSdkVersion = 28 8 | targetSdkVersion = 28 9 | supportLibVersion = "28.0.0" 10 | } 11 | repositories { 12 | google() 13 | jcenter() 14 | } 15 | dependencies { 16 | classpath 'com.android.tools.build:gradle:3.3.1' 17 | 18 | // NOTE: Do not place your application dependencies here; they belong 19 | // in the individual module build.gradle files 20 | } 21 | } 22 | 23 | allprojects { 24 | repositories { 25 | mavenLocal() 26 | maven { 27 | // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm 28 | url("$rootDir/../node_modules/react-native/android") 29 | } 30 | maven { 31 | // Android JSC is installed from npm 32 | url("$rootDir/../node_modules/jsc-android/dist") 33 | } 34 | 35 | google() 36 | jcenter() 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /android/gradle.properties: -------------------------------------------------------------------------------- 1 | # Project-wide Gradle settings. 2 | 3 | # IDE (e.g. Android Studio) users: 4 | # Gradle settings configured through the IDE *will override* 5 | # any settings specified in this file. 6 | 7 | # For more details on how to configure your build environment visit 8 | # http://www.gradle.org/docs/current/userguide/build_environment.html 9 | 10 | # Specifies the JVM arguments used for the daemon process. 11 | # The setting is particularly useful for tweaking memory settings. 12 | # Default value: -Xmx10248m -XX:MaxPermSize=256m 13 | # org.gradle.jvmargs=-Xmx2048m -XX:MaxPermSize=512m -XX:+HeapDumpOnOutOfMemoryError -Dfile.encoding=UTF-8 14 | 15 | # When configured, Gradle will run in incubating parallel mode. 16 | # This option should only be used with decoupled projects. More details, visit 17 | # http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects 18 | # org.gradle.parallel=true 19 | 20 | android.useAndroidX=true 21 | android.enableJetifier=true 22 | -------------------------------------------------------------------------------- /android/gradle/wrapper/gradle-wrapper.jar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/troila-mobile/mCloud-Design-Mobile/24feb308da78aa8c3bb8c7e87466b0341b6f45da/android/gradle/wrapper/gradle-wrapper.jar -------------------------------------------------------------------------------- /android/gradle/wrapper/gradle-wrapper.properties: -------------------------------------------------------------------------------- 1 | distributionBase=GRADLE_USER_HOME 2 | distributionPath=wrapper/dists 3 | distributionUrl=https\://services.gradle.org/distributions/gradle-4.10.2-all.zip 4 | zipStoreBase=GRADLE_USER_HOME 5 | zipStorePath=wrapper/dists 6 | -------------------------------------------------------------------------------- /android/settings.gradle: -------------------------------------------------------------------------------- 1 | rootProject.name = 'mCloudMobile' 2 | include ':@react-native-community_async-storage' 3 | project(':@react-native-community_async-storage').projectDir = new File(rootProject.projectDir, '../node_modules/@react-native-community/async-storage/android') 4 | apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings) 5 | include ':app' 6 | -------------------------------------------------------------------------------- /app.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "mCloudMobile", 3 | "displayName": "mCloudMobile" 4 | } -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: ['module:metro-react-native-babel-preset'], 3 | }; 4 | -------------------------------------------------------------------------------- /components/EmptyView/assets/empty_network_failed@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/troila-mobile/mCloud-Design-Mobile/24feb308da78aa8c3bb8c7e87466b0341b6f45da/components/EmptyView/assets/empty_network_failed@2x.png -------------------------------------------------------------------------------- /components/EmptyView/assets/empty_network_failed@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/troila-mobile/mCloud-Design-Mobile/24feb308da78aa8c3bb8c7e87466b0341b6f45da/components/EmptyView/assets/empty_network_failed@3x.png -------------------------------------------------------------------------------- /components/EmptyView/assets/empty_network_failed_dark@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/troila-mobile/mCloud-Design-Mobile/24feb308da78aa8c3bb8c7e87466b0341b6f45da/components/EmptyView/assets/empty_network_failed_dark@2x.png -------------------------------------------------------------------------------- /components/EmptyView/assets/empty_network_failed_dark@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/troila-mobile/mCloud-Design-Mobile/24feb308da78aa8c3bb8c7e87466b0341b6f45da/components/EmptyView/assets/empty_network_failed_dark@3x.png -------------------------------------------------------------------------------- /components/EmptyView/assets/empty_no_data@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/troila-mobile/mCloud-Design-Mobile/24feb308da78aa8c3bb8c7e87466b0341b6f45da/components/EmptyView/assets/empty_no_data@2x.png -------------------------------------------------------------------------------- /components/EmptyView/assets/empty_no_data@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/troila-mobile/mCloud-Design-Mobile/24feb308da78aa8c3bb8c7e87466b0341b6f45da/components/EmptyView/assets/empty_no_data@3x.png -------------------------------------------------------------------------------- /components/EmptyView/assets/empty_no_data_dark@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/troila-mobile/mCloud-Design-Mobile/24feb308da78aa8c3bb8c7e87466b0341b6f45da/components/EmptyView/assets/empty_no_data_dark@2x.png -------------------------------------------------------------------------------- /components/EmptyView/assets/empty_no_data_dark@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/troila-mobile/mCloud-Design-Mobile/24feb308da78aa8c3bb8c7e87466b0341b6f45da/components/EmptyView/assets/empty_no_data_dark@3x.png -------------------------------------------------------------------------------- /components/EmptyView/demo/basic.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { EmptyView } from '../..' 3 | 4 | export default () => ( 5 | {}}> 6 | 很抱歉，加载失败了 7 | 8 | 9 | // 10 | // 暂无数据 11 | // 12 | ) 13 | 14 | -------------------------------------------------------------------------------- /components/EmptyView/style/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by wy on 2019/9/20. 3 | */ 4 | import { StyleSheet } from 'react-native' 5 | 6 | export default (theme) => StyleSheet.create({ 7 | wrapper: { 8 | alignItems: 'center', 9 | justifyContent:'center', 10 | flex: 1, 11 | backgroundColor: theme.fill_grey, 12 | }, 13 | text:{ 14 | fontSize: theme.font_size_caption, 15 | color: theme.emptyView_text_color, 16 | }, 17 | touchable: { 18 | height: theme.button_height_de, 19 | width: theme.large_label_width, 20 | borderRadius: theme.button_height_de / 2, 21 | alignItems: 'center', 22 | justifyContent: 'center', 23 | marginTop: theme.emptyView_touchable_marginTop, 24 | }, 25 | touchableText: { 26 | color:theme.color_text_base_inverse, 27 | fontSize: theme.font_size_caption, 28 | fontWeight: 'bold', 29 | }, 30 | }) 31 | -------------------------------------------------------------------------------- /components/Label/demo/basic.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { View, Text, StyleSheet } from 'react-native' 3 | import { Label } from '../..' 4 | 5 | export default () => ( 6 | 7 | 8 | SmallLabel 9 | 10 | 11 | 14 | 17 | 18 | 19 | LargeLabel 20 | 21 | 22 | 32 | 42 | 43 | 44 | ) 45 | const styles = StyleSheet.create({ 46 | wrap: { 47 | flex: 1, 48 | backgroundColor: '#E6E6E6', 49 | }, 50 | multiStyle:{ 51 | width:120, 52 | marginLeft:20, 53 | }, 54 | defaultStyle:{ 55 | marginLeft: 20, 56 | backgroundColor:'#969FB5', 57 | }, 58 | cellStyle:{ 59 | marginTop:10, 60 | flexDirection:'row', 61 | }, 62 | boldTitle: { 63 | marginTop:10, 64 | fontSize: 16, 65 | color: '#1F2530', 66 | paddingVertical: 10, 67 | paddingLeft: 10, 68 | fontWeight: '500', 69 | }, 70 | }) 71 | -------------------------------------------------------------------------------- /components/Label/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by wy on 2019/9/30. 3 | */ 4 | import React from 'react' 5 | import { Text, ViewPropTypes, TouchableOpacity } from 'react-native' 6 | import { WithTheme } from '../style' 7 | import LabelStyles from './style' 8 | import PropTypes from 'prop-types' 9 | 10 | export default class Label extends React.Component { 11 | static propTypes = { 12 | styles: PropTypes.object, 13 | style: ViewPropTypes.style, 14 | children: PropTypes.any, 15 | size: PropTypes.string, 16 | type: PropTypes.string, 17 | textType: PropTypes.string, 18 | onPress: PropTypes.func, 19 | disabled: PropTypes.bool, 20 | }; 21 | static defaultProps = { 22 | styles: {}, 23 | style: {}, 24 | onPress: () => {}, 25 | children: null, 26 | size: PropTypes.string, 27 | type: PropTypes.string, 28 | textType: PropTypes.string, 29 | disabled: true, 30 | }; 31 | render() { 32 | const { 33 | styles, style, children, size, type, textType, onPress,disabled, 34 | } = this.props 35 | return ( 36 | 37 | {(_styles, theme) => { 38 | const textStyle = [ 39 | _styles.text, 40 | _styles[`${type}RawText`], 41 | _styles[`${textType}`], 42 | ] 43 | const LabelStyle = [_styles.wrapper, _styles[`${size}Label`], style] 44 | return ( 45 | 46 | 47 | {children} 48 | 49 | 50 | ) 51 | }} 52 | 53 | ) 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /components/Label/style/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by wy on 2019/9/20. 3 | */ 4 | import { StyleSheet } from 'react-native' 5 | 6 | export default (theme) => StyleSheet.create({ 7 | wrapper: { 8 | alignItems: 'center', 9 | justifyContent:'center', 10 | backgroundColor: theme.label_bg_color, 11 | paddingHorizontal:7, 12 | }, 13 | text:{ 14 | fontSize: theme.font_size_base, 15 | }, 16 | whiteRawText: { 17 | color: theme.color_text_base_inverse, 18 | }, 19 | blackRawText:{ 20 | color: theme.color_text_base, 21 | }, 22 | smallText:{ 23 | fontSize:theme.small_font_size, 24 | }, 25 | middleText:{ 26 | fontSize:theme.middle_font_size, 27 | }, 28 | largeText:{ 29 | fontSize:theme.large_font_size, 30 | }, 31 | smallLabel: { 32 | height:theme.small_label_height, 33 | borderRadius:theme.small_label_height / 2, 34 | }, 35 | middleLabel: { 36 | height:theme.middle_label_height, 37 | borderRadius:theme.middle_label_height / 2, 38 | }, 39 | largeLabel: { 40 | height:theme.large_label_height, 41 | borderRadius:theme.large_label_height / 2, 42 | }, 43 | }) 44 | -------------------------------------------------------------------------------- /components/Tabs/demo/basic.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { 3 | View, StyleSheet , 4 | } from 'react-native' 5 | import { Tabs } from '../..' 6 | 7 | export default class TabViewExample extends React.Component { 8 | state = { 9 | // eslint-disable-next-line react/no-unused-state 10 | index: 3, 11 | routes: [ 12 | { key: '1', title: '新闻' }, 13 | { key: '2', title: '视gghjgjhhghjfweewfwefewfewfjhg频' }, 14 | { key: '3', title: '篮球wef' }, 15 | { key: '4', title: '综vewvwev艺' }, 16 | { key: '5', title: '电影' }, 17 | { key: '6', title: '综ewvewvwevwe6艺' }, 18 | 19 | ], 20 | }; 21 | _renderScene = ({ route }) => { 22 | switch (route.key) { 23 | case '1': 24 | return ( 25 | 26 | ) 27 | case '2': 28 | return ( 29 | 33 | ) 34 | case '3': 35 | return ( 36 | 40 | ) 41 | case '4': 42 | return ( 43 | 47 | ) 48 | case '5': 49 | return ( 50 | 54 | ) 55 | case '6': 56 | return ( 57 | 61 | ) 62 | default: 63 | return null 64 | } 65 | } 66 | render() { 67 | return ( 68 | { 77 | // eslint-disable-next-line react/no-unused-state 78 | this.setState({ index }) 79 | }} 80 | /> 81 | ) 82 | } 83 | } 84 | 85 | const styles = StyleSheet.create({ 86 | container: { 87 | flex: 1, 88 | }, 89 | }) 90 | -------------------------------------------------------------------------------- /components/Tabs/style/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by wy on 2019/9/20. 3 | */ 4 | import { StyleSheet } from 'react-native' 5 | 6 | export default (theme) => StyleSheet.create({ 7 | wrapper: { 8 | flex:1, 9 | }, 10 | tabStyle:{ 11 | height:theme.tabs_height, 12 | alignItems: 'center', 13 | }, 14 | TabBarWrapper:{ 15 | height:theme.tabs_height, 16 | width:theme.screen_W, 17 | backgroundColor:theme.labelBackgroundColor, 18 | }, 19 | TabBarWrapperScrollView:{ 20 | flexDirection: 'row', 21 | }, 22 | labelStyle: { 23 | paddingTop:theme.tabs_label_paddingTop, 24 | }, 25 | indicatorStyle:{ 26 | height: theme.tabs_indicator_height, 27 | borderRadius: theme.tabs_indicator_borderRadius, 28 | }, 29 | initialLayout:{ 30 | height:0, 31 | width: theme.screen_W , 32 | }, 33 | initialLayoutTwo:{ 34 | height: theme.tabs_initialLayout_height, 35 | width:theme.screen_W, 36 | }, 37 | }) 38 | -------------------------------------------------------------------------------- /components/actionSheet/assets/check@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/troila-mobile/mCloud-Design-Mobile/24feb308da78aa8c3bb8c7e87466b0341b6f45da/components/actionSheet/assets/check@2x.png -------------------------------------------------------------------------------- /components/actionSheet/assets/check@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/troila-mobile/mCloud-Design-Mobile/24feb308da78aa8c3bb8c7e87466b0341b6f45da/components/actionSheet/assets/check@3x.png -------------------------------------------------------------------------------- /components/actionSheet/demo/basic.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { View } from 'react-native' 3 | import { 4 | ActionSheet, 5 | Button, 6 | } from '../..' 7 | 8 | export default class extends React.Component { 9 | state={ 10 | options: ['text','value', 'value'], 11 | checkedIndex: 1, 12 | } 13 | render() { 14 | const { 15 | options, 16 | checkedIndex, 17 | } = this.state 18 | return ( 19 | <> 20 | 25 | this.actionSheet = e} 27 | options={options} 28 | disabledIndexArrary={[5]} 29 | checkedIndex={checkedIndex} 30 | title="zhe是标题dfshdfshuhgceighbcdsbacvbvbqebdvashbjbheurvudvbehlvwdvfwet" 31 | onPress={(index) => { 32 | this.setState({ 33 | checkedIndex: index, 34 | }) 35 | }} 36 | lines={4} 37 | cellHeight={160} 38 | // customColors={[{ color:'red',cellIndex:2 }]} 39 | /> 40 | 41 | ) 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /components/actionSheet/style/index.js: -------------------------------------------------------------------------------- 1 | import { StyleSheet } from 'react-native' 2 | 3 | export default (theme) => StyleSheet.create({ 4 | overlay: { 5 | flex:1, 6 | opacity: 0.6, 7 | backgroundColor: '#000', 8 | }, 9 | normalText: { 10 | color: theme.sheet_title_color, 11 | fontSize: theme.font_size_caption, 12 | textAlign: 'center', 13 | maxWidth: '80%', 14 | }, 15 | disableTextStyle: { 16 | color: theme.color_text_disabled, 17 | }, 18 | cancelButton: { 19 | height: 50, 20 | marginTop: 4, 21 | alignItems: 'center', 22 | justifyContent: 'center', 23 | backgroundColor: theme.sheet_backgroundColor, 24 | }, 25 | buttonStyle: { 26 | // height: 50, 27 | marginTop: StyleSheet.hairlineWidth, 28 | backgroundColor: theme.sheet_backgroundColor, 29 | }, 30 | titleBox: { 31 | paddingVertical: 10, 32 | alignItems: 'center', 33 | justifyContent: 'center', 34 | backgroundColor: theme.sheet_title_backgroundcolor, 35 | paddingHorizontal: 10, 36 | borderTopLeftRadius: 10, 37 | borderTopRightRadius: 10, 38 | }, 39 | titleStyle: { 40 | textAlign: 'center', 41 | color: theme.sheet_title_color, 42 | fontSize: theme.font_size_base, 43 | 44 | }, 45 | body: { 46 | backgroundColor: theme.sheet_title_backgroundcolor, 47 | borderTopLeftRadius: 10, 48 | borderTopRightRadius: 10, 49 | position: 'absolute', 50 | left: 0, 51 | right: 0, 52 | }, 53 | wrapper: { 54 | flex: 1, 55 | }, 56 | buttonViewStyle: { 57 | flex: 1, 58 | flexDirection: 'row', 59 | alignItems: 'center', 60 | justifyContent: 'center', 61 | alignSelf: 'center', 62 | }, 63 | CheckImage: { 64 | position: 'absolute', 65 | left: -theme.h_spacing_lg, 66 | alignSelf: 'center', 67 | }, 68 | SafeAreaView: { 69 | backgroundColor: theme.sheet_backgroundColor, 70 | }, 71 | }) 72 | -------------------------------------------------------------------------------- /components/activityIndicator/demo/basic.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { View, ScrollView } from 'react-native' 3 | import ActivityIndicator from '../index' 4 | 5 | const ViewTop = () => ( 6 | 7 | ) 8 | 9 | export default () => ( 10 | 11 | 12 | 13 | 14 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 42 | 43 | 44 | ) 45 | -------------------------------------------------------------------------------- /components/activityIndicator/style/index.js: -------------------------------------------------------------------------------- 1 | import { StyleSheet } from 'react-native' 2 | 3 | export default (theme) => StyleSheet.create({ 4 | container: { 5 | position: 'absolute', 6 | top: 0, 7 | left: 0, 8 | bottom: 0, 9 | right: 0, 10 | backgroundColor: 'transparent', 11 | zIndex: theme.toast_zindex, 12 | }, 13 | innerContainer: { 14 | flex: 1, 15 | alignItems: 'center', 16 | justifyContent: 'center', 17 | backgroundColor: 'transparent', 18 | }, 19 | wrapper: { 20 | flex: 1, 21 | alignItems: 'center', 22 | justifyContent: 'center', 23 | width: theme.activity_indicator_size, 24 | height: theme.activity_indicator_size, 25 | borderRadius: theme.radius_md, 26 | backgroundColor: theme.toast_fill, 27 | }, 28 | tip: { 29 | color: theme.color_text_base, 30 | fontSize: theme.font_size_base, 31 | marginLeft: theme.h_spacing_md, 32 | }, 33 | toast: { 34 | color: theme.color_text_base_inverse, 35 | fontSize: theme.font_size_base, 36 | marginTop: theme.v_spacing_sm, 37 | }, 38 | spinner: { 39 | flexDirection: 'row', 40 | justifyContent: 'center', 41 | alignItems: 'center', 42 | }, 43 | }) 44 | -------------------------------------------------------------------------------- /components/avatar/Avatar.js: -------------------------------------------------------------------------------- 1 | export { default } from 'react-native-fast-image' 2 | -------------------------------------------------------------------------------- /components/avatar/Avatar.web.js: -------------------------------------------------------------------------------- 1 | export { Image as default } from 'react-native' 2 | -------------------------------------------------------------------------------- /components/avatar/assets/default@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/troila-mobile/mCloud-Design-Mobile/24feb308da78aa8c3bb8c7e87466b0341b6f45da/components/avatar/assets/default@2x.png -------------------------------------------------------------------------------- /components/avatar/assets/default@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/troila-mobile/mCloud-Design-Mobile/24feb308da78aa8c3bb8c7e87466b0341b6f45da/components/avatar/assets/default@3x.png -------------------------------------------------------------------------------- /components/avatar/demo/basic.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { 3 | View, 4 | } from 'react-native' 5 | import { Avatar, Button } from '../..' 6 | 7 | export default class AvatarDemo extends React.Component { 8 | state={ 9 | image:{ uri:null }, 10 | } 11 | render() { 12 | const { image } = this.state 13 | return ( 14 | 22 | 26 | 29 | 34 | 44 | 45 | ) 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /components/avatar/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { WithTheme } from '../style' 3 | import AvatarStyles from './style' 4 | import PropTypes from 'prop-types' 5 | import Image from './Avatar' 6 | import { View } from 'react-native' 7 | 8 | const defaultImage = require('./assets/default.png') 9 | 10 | export default class Avatar extends React.Component { 11 | static propTypes = { 12 | source: PropTypes.oneOfType([PropTypes.object,PropTypes.number]).isRequired, 13 | size: PropTypes.number, 14 | styles: PropTypes.object, 15 | type: PropTypes.string,// normal 16 | defaultAvatar:PropTypes.any, 17 | style: PropTypes.object, 18 | } 19 | static defaultProps = { 20 | size:70, 21 | type:'normal', 22 | defaultAvatar:defaultImage, 23 | style:{}, 24 | } 25 | render() { 26 | const { 27 | styles, 28 | size, 29 | type, 30 | defaultAvatar, 31 | style, 32 | source, 33 | } = this.props 34 | return ( 35 | 36 | { 37 | (_styles) => { 38 | const borderStyle = [ 39 | _styles[`${type}Border`],style, 40 | ] 41 | const imageStyle = [ 42 | { 43 | width: size, 44 | height: size, 45 | borderRadius: size / 2, 46 | }, 47 | ...borderStyle, 48 | ] 49 | const defaultStyle = [...imageStyle, { position: 'absolute' }] 50 | return ( 51 | 52 | 53 | 54 | 55 | ) 56 | } 57 | } 58 | 59 | ) 60 | } 61 | } 62 | -------------------------------------------------------------------------------- /components/avatar/style/index.js: -------------------------------------------------------------------------------- 1 | import { StyleSheet } from 'react-native' 2 | 3 | export default (theme) => StyleSheet.create({ 4 | normalBorder:{ 5 | // todo 6 | }, 7 | whiteBorder:{ 8 | borderWidth: theme.border_width_lg, 9 | borderColor: theme.border_color_white, 10 | }, 11 | }) 12 | -------------------------------------------------------------------------------- /components/badge/assets/badge_next@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/troila-mobile/mCloud-Design-Mobile/24feb308da78aa8c3bb8c7e87466b0341b6f45da/components/badge/assets/badge_next@2x.png -------------------------------------------------------------------------------- /components/badge/assets/badge_next@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/troila-mobile/mCloud-Design-Mobile/24feb308da78aa8c3bb8c7e87466b0341b6f45da/components/badge/assets/badge_next@3x.png -------------------------------------------------------------------------------- /components/badge/demo/basic.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { View } from 'react-native' 3 | import { Badge } from '../..' 4 | 5 | export default () => ( 6 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | ) -------------------------------------------------------------------------------- /components/badge/style/index.js: -------------------------------------------------------------------------------- 1 | import { StyleSheet,Dimensions } from 'react-native' 2 | 3 | export default (theme) => StyleSheet.create({ 4 | badgeContainer: { 5 | backgroundColor: theme.badge_background_color, 6 | paddingHorizontal: theme.badge_paddingHorizontal, 7 | alignItems: 'center', 8 | justifyContent: 'space-between', 9 | width:Dimensions.get('window').width, 10 | flexDirection:'row', 11 | height:theme.badge_item_height 12 | }, 13 | redPointStyle: { 14 | width: 10, 15 | height: 10, 16 | borderRadius: 5, 17 | backgroundColor: theme.badge_color, 18 | }, 19 | numberStyle: { 20 | borderRadius: 8, 21 | paddingHorizontal: 4, 22 | backgroundColor: theme.badge_color, 23 | }, 24 | numberFont:{ 25 | fontSize: theme.font_size_caption_sm, 26 | color: '#fff' 27 | }, 28 | badge_marginRight:{ 29 | marginRight:7, 30 | }, 31 | newStyle:{ 32 | fontSize: theme.font_size_base, 33 | color: theme.badge_color 34 | }, 35 | textStyle:{ 36 | fontSize: theme.font_size_base, 37 | color: theme.badge_text_color 38 | }, 39 | rightView:{ 40 | flexDirection:'row', 41 | alignItems:'center' 42 | } 43 | }) -------------------------------------------------------------------------------- /components/card/demo/basic.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { View,Dimensions } from 'react-native' 3 | import { Card } from '../..' 4 | 5 | 6 | 7 | export default () => ( 8 | 14 | 20 | 27 | 39 | 40 | ) -------------------------------------------------------------------------------- /components/card/style/index.js: -------------------------------------------------------------------------------- 1 | import { StyleSheet,Dimensions } from 'react-native' 2 | 3 | export default (theme) => StyleSheet.create({ 4 | horizontalContainer: { 5 | backgroundColor: theme.card_background_color, 6 | paddingTop: 15, 7 | paddingLeft:15, 8 | width:Dimensions.get('window').width, 9 | }, 10 | verticalContainer:{ 11 | backgroundColor: theme.card_background_color, 12 | paddingVertical: 15, 13 | paddingLeft:15, 14 | flexDirection:'row', 15 | width:Dimensions.get('window').width, 16 | }, 17 | containerPaddingRight:{ 18 | paddingRight: 16 19 | }, 20 | titleStyle:{ 21 | fontSize: theme.font_size_heading, 22 | color: theme.card_title_color, 23 | lineHeight: theme.card_lineHeight, 24 | }, 25 | contentStyle:{ 26 | fontSize: theme.font_size_base, 27 | color: theme.card_content_color, 28 | lineHeight: theme.card_lineHeight, 29 | marginVertical:8, 30 | // marginBottom: 12 31 | }, 32 | imageStyle:{ 33 | height: theme.card_imageHeight, 34 | width: theme.card_imageWidth, 35 | borderRadius: theme.radius_md, 36 | marginRight: 11 37 | }, 38 | }) -------------------------------------------------------------------------------- /components/checkbox/assets/check@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/troila-mobile/mCloud-Design-Mobile/24feb308da78aa8c3bb8c7e87466b0341b6f45da/components/checkbox/assets/check@2x.png -------------------------------------------------------------------------------- /components/checkbox/assets/check@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/troila-mobile/mCloud-Design-Mobile/24feb308da78aa8c3bb8c7e87466b0341b6f45da/components/checkbox/assets/check@3x.png -------------------------------------------------------------------------------- /components/checkbox/assets/check_dark@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/troila-mobile/mCloud-Design-Mobile/24feb308da78aa8c3bb8c7e87466b0341b6f45da/components/checkbox/assets/check_dark@2x.png -------------------------------------------------------------------------------- /components/checkbox/assets/check_dark@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/troila-mobile/mCloud-Design-Mobile/24feb308da78aa8c3bb8c7e87466b0341b6f45da/components/checkbox/assets/check_dark@3x.png -------------------------------------------------------------------------------- /components/checkbox/assets/check_disabled@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/troila-mobile/mCloud-Design-Mobile/24feb308da78aa8c3bb8c7e87466b0341b6f45da/components/checkbox/assets/check_disabled@2x.png -------------------------------------------------------------------------------- /components/checkbox/assets/check_disabled@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/troila-mobile/mCloud-Design-Mobile/24feb308da78aa8c3bb8c7e87466b0341b6f45da/components/checkbox/assets/check_disabled@3x.png -------------------------------------------------------------------------------- /components/checkbox/assets/check_disabled_dark@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/troila-mobile/mCloud-Design-Mobile/24feb308da78aa8c3bb8c7e87466b0341b6f45da/components/checkbox/assets/check_disabled_dark@2x.png -------------------------------------------------------------------------------- /components/checkbox/assets/check_disabled_dark@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/troila-mobile/mCloud-Design-Mobile/24feb308da78aa8c3bb8c7e87466b0341b6f45da/components/checkbox/assets/check_disabled_dark@3x.png -------------------------------------------------------------------------------- /components/checkbox/assets/no_check@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/troila-mobile/mCloud-Design-Mobile/24feb308da78aa8c3bb8c7e87466b0341b6f45da/components/checkbox/assets/no_check@2x.png -------------------------------------------------------------------------------- /components/checkbox/assets/no_check@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/troila-mobile/mCloud-Design-Mobile/24feb308da78aa8c3bb8c7e87466b0341b6f45da/components/checkbox/assets/no_check@3x.png -------------------------------------------------------------------------------- /components/checkbox/assets/no_check_dark@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/troila-mobile/mCloud-Design-Mobile/24feb308da78aa8c3bb8c7e87466b0341b6f45da/components/checkbox/assets/no_check_dark@2x.png -------------------------------------------------------------------------------- /components/checkbox/assets/no_check_dark@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/troila-mobile/mCloud-Design-Mobile/24feb308da78aa8c3bb8c7e87466b0341b6f45da/components/checkbox/assets/no_check_dark@3x.png -------------------------------------------------------------------------------- /components/checkbox/assets/no_check_disabled@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/troila-mobile/mCloud-Design-Mobile/24feb308da78aa8c3bb8c7e87466b0341b6f45da/components/checkbox/assets/no_check_disabled@2x.png -------------------------------------------------------------------------------- /components/checkbox/assets/no_check_disabled@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/troila-mobile/mCloud-Design-Mobile/24feb308da78aa8c3bb8c7e87466b0341b6f45da/components/checkbox/assets/no_check_disabled@3x.png -------------------------------------------------------------------------------- /components/checkbox/assets/no_check_disabled_dark@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/troila-mobile/mCloud-Design-Mobile/24feb308da78aa8c3bb8c7e87466b0341b6f45da/components/checkbox/assets/no_check_disabled_dark@2x.png -------------------------------------------------------------------------------- /components/checkbox/assets/no_check_disabled_dark@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/troila-mobile/mCloud-Design-Mobile/24feb308da78aa8c3bb8c7e87466b0341b6f45da/components/checkbox/assets/no_check_disabled_dark@3x.png -------------------------------------------------------------------------------- /components/checkbox/demo/basic.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react' 2 | import { View, Text, StyleSheet } from 'react-native' 3 | import { Checkbox } from '../..' 4 | 5 | const { CheckboxItem } = Checkbox 6 | 7 | export default () => { 8 | const [checked, onChange] = useState(true) 9 | const [itemChecked, onItemChange] = useState(true) 10 | return ( 11 | 12 | 13 | Checkbox 14 | 15 | 16 | 默认未点击 17 | 18 | 19 | 20 | 勾选状态 21 | 22 | { 26 | onChange(e.checked) 27 | }} 28 | /> 29 | 30 | 选中不可点击状态 31 | 32 | 33 | 34 | 不可点击状态 35 | 36 | 37 | 38 | CheckboxItem 39 | 40 | 41 | 选项1（默认未点击） 42 | 43 | { 46 | onItemChange(e.checked) 47 | }} 48 | > 49 | 选项2（勾选状态） 50 | 51 | 55 | 选项3（选中不可点状态） 56 | 57 | 61 | 选项3（不可点状态） 62 | 63 | 64 | ) 65 | } 66 | 67 | const styles = StyleSheet.create({ 68 | wrap: { 69 | flex: 1, 70 | }, 71 | title: { 72 | fontSize: 14, 73 | color: '#1F2530', 74 | paddingVertical: 10, 75 | paddingLeft: 15, 76 | }, 77 | checkbox: { 78 | marginHorizontal: 15, 79 | marginVertical: 5, 80 | }, 81 | boldTitle: { 82 | fontSize: 16, 83 | color: '#1F2530', 84 | paddingVertical: 10, 85 | paddingLeft: 10, 86 | fontWeight: '500', 87 | }, 88 | }) 89 | -------------------------------------------------------------------------------- /components/checkbox/index.js: -------------------------------------------------------------------------------- 1 | import Checkbox from './Checkbox' 2 | import CheckboxItem from './CheckboxItem' 3 | 4 | Checkbox.CheckboxItem = CheckboxItem 5 | 6 | export default Checkbox 7 | -------------------------------------------------------------------------------- /components/checkbox/style/index.js: -------------------------------------------------------------------------------- 1 | import { StyleSheet } from 'react-native' 2 | 3 | export default (theme) => StyleSheet.create({ 4 | wrapper: { 5 | flexDirection: 'row', 6 | alignItems: 'center', 7 | }, 8 | itemWrapper: { 9 | flexDirection: 'row', 10 | alignItems: 'center', 11 | height: theme.checkbox_item_height, 12 | backgroundColor: theme.fill_base, 13 | paddingLeft: theme.h_spacing_lg, 14 | }, 15 | icon: { 16 | width: 25, 17 | height: 25, 18 | }, 19 | iconRight: { 20 | marginLeft: theme.h_spacing_md, 21 | }, 22 | itemText: { 23 | marginLeft: theme.h_spacing_lg, 24 | fontSize: theme.font_size_caption, 25 | color: theme.color_text_base, 26 | }, 27 | disabledItemText: { 28 | color: theme.color_text_info, 29 | }, 30 | line: { 31 | backgroundColor: theme.border_color_base, 32 | height: theme.border_width_sm, 33 | position: 'absolute', 34 | left: theme.h_spacing_lg, 35 | right: 0, 36 | bottom: 0, 37 | }, 38 | }) 39 | -------------------------------------------------------------------------------- /components/countDownView/demo/basic.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { View, ScrollView } from 'react-native' 3 | import CountDownView from '../index' 4 | 5 | const ViewTop = () => ( 6 | 7 | ) 8 | 9 | export default () => ( 10 | 11 | 12 | 13 | 14 | 15 | ) 16 | -------------------------------------------------------------------------------- /components/countDownView/style/index.js: -------------------------------------------------------------------------------- 1 | import { StyleSheet } from 'react-native' 2 | 3 | export default (theme) => StyleSheet.create({ 4 | wrapper: { 5 | alignItems: 'center', 6 | justifyContent: 'center', 7 | borderRadius: theme.radius_md, 8 | borderWidth: 1, 9 | }, 10 | defaultHeight: { 11 | height: theme.button_height, 12 | paddingLeft: theme.h_spacing_lg, 13 | paddingRight: theme.h_spacing_lg, 14 | }, 15 | defaultColor: { 16 | backgroundColor: theme.fill_base, 17 | borderColor: theme.border_color_base, 18 | }, 19 | disabledColor: { 20 | backgroundColor: theme.fill_disabled, 21 | borderColor: theme.fill_disabled, 22 | }, 23 | defaultText: { 24 | color: theme.color_text_base, 25 | fontSize: theme.button_font_size, 26 | }, 27 | disabledText: { 28 | color: `${theme.color_text_base}4D`, // alpha 30% https://codepen.io/chriscoyier/pen/XjbzAW, 29 | fontSize: theme.button_font_size, 30 | }, 31 | 32 | 33 | }) 34 | -------------------------------------------------------------------------------- /components/date-picker/datepicker/Popup.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import PopupPicker from '../../picker/Popup' 3 | import PropTypes from 'prop-types' 4 | 5 | 6 | class PopupDatePicker extends React.Component { 7 | static defaultProps = { 8 | pickerValueProp: 'date', 9 | pickerValueChangeProp: 'onDateChange', 10 | }; 11 | static propTypes = { 12 | onChange: PropTypes.func, 13 | onOk: PropTypes.func, 14 | pickerValueProp: PropTypes.string, 15 | pickerValueChangeProp: PropTypes.string, 16 | datePicker: PropTypes.any, 17 | date: PropTypes.any, 18 | 19 | } 20 | onOk = (v) => { 21 | const { onChange, onOk } = this.props 22 | if (onChange) { 23 | onChange(v) 24 | } 25 | if (onOk) { 26 | onOk(v) 27 | } 28 | } 29 | render() { 30 | const { 31 | datePicker, 32 | date, 33 | } = this.props 34 | return ( 35 | 42 | ) 43 | } 44 | } 45 | 46 | export default PopupDatePicker 47 | -------------------------------------------------------------------------------- /components/date-picker/demo/basic.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { View } from 'react-native' 3 | import { DatePicker, List } from '../..' 4 | 5 | 6 | export default class extends React.Component { 7 | state = { 8 | value: undefined, 9 | } 10 | onChange = (value) => { 11 | this.setState({ value }) 12 | } 13 | render() { 14 | const { 15 | value, 16 | } = this.state 17 | return ( 18 | 19 | 20 | 30 | Select Date 31 | 32 | 33 | 34 | ) 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /components/date-picker/utils.js: -------------------------------------------------------------------------------- 1 | function formatIt(date, form) { 2 | const pad = (n) => (n < 10 ? `0${n}` : n) 3 | const dateStr = `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad( 4 | date.getDate(), 5 | )}` 6 | const timeStr = `${pad(date.getHours())}:${pad(date.getMinutes())}` 7 | if (form === 'YYYY-MM-DD') { 8 | return dateStr 9 | } 10 | if (form === 'HH:mm') { 11 | return timeStr 12 | } 13 | return `${dateStr} ${timeStr}` 14 | } 15 | 16 | export function formatFn(instance, value) { 17 | const formatsEnum = { 18 | date: 'YYYY-MM-DD', 19 | time: 'HH:mm', 20 | datetime: 'YYYY-MM-DD HH:mm', 21 | } 22 | const { format } = instance.props 23 | const type = typeof format 24 | if (type === 'string') { 25 | return formatIt(value, format) 26 | } 27 | if (type === 'function') { 28 | return format(value) 29 | } 30 | return formatIt(value, (formatsEnum)[instance.props.mode]) 31 | } 32 | 33 | export function formatProps(props, value) { 34 | const formatsEnum = { 35 | date: 'YYYY-MM-DD', 36 | time: 'HH:mm', 37 | datetime: 'YYYY-MM-DD HH:mm', 38 | } 39 | const { format } = props 40 | const type = typeof format 41 | if (type === 'string') { 42 | return formatIt(value, format) 43 | } 44 | if (type === 'function') { 45 | return format(value) 46 | } 47 | return formatIt(value, (formatsEnum)[props.mode]) 48 | } 49 | -------------------------------------------------------------------------------- /components/index.js: -------------------------------------------------------------------------------- 1 | export { default as Button } from './button' 2 | export { default as SegmentedControl } from './segmentedControl' 3 | export { default as SearchBar } from './searchBar' 4 | export { default as Checkbox } from './checkbox' 5 | export { default as Radio } from './radio' 6 | export { default as Textarea } from './textarea' 7 | export { default as List } from './list' 8 | export { default as Badge } from './badge' 9 | export { default as Marquee } from './marquee' 10 | export { default as Switch } from './switch' 11 | export { default as InputItem } from './inputItem' 12 | export { default as Label } from './Label' 13 | export { default as NoticeBar } from './noticeBar' 14 | export { default as Card } from './card' 15 | export { default as Picker } from './picker' 16 | export { default as Avatar } from './avatar' 17 | export { default as ActionSheet } from './actionSheet' 18 | export { default as DatePicker } from './date-picker' 19 | export { default as EmptyView } from './EmptyView' 20 | export { default as Modal } from './modal' 21 | export { default as Provider } from './provider' 22 | export { default as Tabs } from './Tabs' 23 | export { default as Stepper } from './stepper' 24 | export { default as ShareSheet } from './shareSheet' 25 | export { default as ActivityIndicator } from './activityIndicator' 26 | export { default as CountDownView } from './countDownView' 27 | export { default as Steps } from './steps' 28 | -------------------------------------------------------------------------------- /components/inputItem/style/index.js: -------------------------------------------------------------------------------- 1 | import { StyleSheet } from 'react-native' 2 | 3 | export default (theme) => StyleSheet.create({ 4 | wrapper: { 5 | backgroundColor: theme.fill_base, 6 | }, 7 | container: { 8 | height: theme.input_item_height, 9 | paddingRight: theme.h_spacing_lg, 10 | marginTop: 0, 11 | marginBottom: 0, 12 | flexDirection: 'row', 13 | }, 14 | text: { 15 | marginRight: theme.h_spacing_sm, 16 | textAlignVertical: 'center', 17 | fontSize: theme.font_size_heading, 18 | color: theme.color_text_base, 19 | alignSelf: 'center', 20 | }, 21 | input: { 22 | flex: 1, 23 | alignSelf: 'center', 24 | backgroundColor: 'transparent', 25 | fontSize: theme.input_font_size, 26 | color: theme.color_text_base, 27 | }, 28 | inputDisabled: { 29 | backgroundColor: theme.fill_disabled, 30 | color: theme.color_text_disabled, 31 | }, 32 | clear: { 33 | padding: 2, 34 | alignSelf: 'center', 35 | }, 36 | ContentView: { 37 | flexDirection: 'row', 38 | alignItems: 'center', 39 | }, 40 | RequiredText: { 41 | fontSize: theme.font_size_base, 42 | color: 'red', 43 | marginLeft: 3.5, 44 | marginRight: 6, 45 | }, 46 | Line: { 47 | backgroundColor: theme.border_color_base, 48 | height: theme.border_width_sm, 49 | position: 'absolute', 50 | left: theme.h_spacing_lg, 51 | right: 0, 52 | bottom: 0, 53 | }, 54 | }) 55 | -------------------------------------------------------------------------------- /components/list-undone/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { 3 | View, 4 | ViewPropTypes, 5 | } from 'react-native' 6 | import { WithTheme } from '../style' 7 | import ButtonStyles from './style' 8 | import PropTypes from 'prop-types' 9 | 10 | export default class extends React.Component { 11 | static propTypes = { 12 | style: ViewPropTypes.style, 13 | styles: PropTypes.object, 14 | children: PropTypes.any, 15 | } 16 | static defaultProps = { 17 | style: {}, 18 | styles: {}, 19 | children: null, 20 | }; 21 | render() { 22 | const { 23 | style, 24 | styles, 25 | children, 26 | } = this.props 27 | return ( 28 | 29 | { 30 | (_styles) => { 31 | const listStyle = [ 32 | _styles.bottomLiner, 33 | style, 34 | ] 35 | return ( 36 | 39 | {children} 40 | 41 | 42 | ) 43 | } 44 | } 45 | 46 | ) 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /components/list-undone/style/index.js: -------------------------------------------------------------------------------- 1 | import { StyleSheet } from 'react-native' 2 | 3 | export default (theme) => StyleSheet.create({ 4 | bottomLiner: { 5 | backgroundColor: theme.border_color_base, 6 | position: 'absolute', 7 | height: StyleSheet.hairlineWidth, 8 | left: 0, 9 | right: 0, 10 | bottom: 0, 11 | }, 12 | itemContainer: { 13 | borderColor: theme.border_color_base, 14 | borderBottomWidth: StyleSheet.hairlineWidth, 15 | paddingRight: theme.h_spacing_lg, 16 | marginLeft: theme.h_spacing_lg, 17 | flexDirection: 'row', 18 | alignItems: 'center', 19 | justifyContent: 'space-between', 20 | paddingVertical: theme.v_spacing, 21 | }, 22 | column: { 23 | flex: 1, 24 | }, 25 | content: { 26 | color: theme.color_text_base, 27 | fontSize: theme.font_size_base, 28 | }, 29 | extra: { 30 | 31 | }, 32 | }) 33 | -------------------------------------------------------------------------------- /components/list/Brief.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { View, ViewPropTypes, Text } from 'react-native' 3 | import { WithTheme } from '../style' 4 | import BriefStyles from './style' 5 | import PropTypes from 'prop-types' 6 | 7 | export default class Brief extends React.Component { 8 | static propTypes = { 9 | style: ViewPropTypes.style, 10 | styles: PropTypes.object, 11 | children: PropTypes.any, 12 | numberOfLines: PropTypes.number, 13 | } 14 | static defaultProps = { 15 | style: {}, 16 | styles: {}, 17 | numberOfLines: 1, 18 | } 19 | render() { 20 | const { 21 | style, 22 | styles, 23 | children, 24 | numberOfLines, 25 | } = this.props 26 | if (!children) { 27 | return null 28 | } 29 | return ( 30 | 31 | { 32 | (_styles) => ( 33 | 34 | 35 | { 36 | children 37 | } 38 | 39 | 40 | ) 41 | } 42 | 43 | ) 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /components/list/assets/arrow_down@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/troila-mobile/mCloud-Design-Mobile/24feb308da78aa8c3bb8c7e87466b0341b6f45da/components/list/assets/arrow_down@2x.png -------------------------------------------------------------------------------- /components/list/assets/arrow_down@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/troila-mobile/mCloud-Design-Mobile/24feb308da78aa8c3bb8c7e87466b0341b6f45da/components/list/assets/arrow_down@3x.png -------------------------------------------------------------------------------- /components/list/assets/arrow_horizontal@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/troila-mobile/mCloud-Design-Mobile/24feb308da78aa8c3bb8c7e87466b0341b6f45da/components/list/assets/arrow_horizontal@2x.png -------------------------------------------------------------------------------- /components/list/assets/arrow_horizontal@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/troila-mobile/mCloud-Design-Mobile/24feb308da78aa8c3bb8c7e87466b0341b6f45da/components/list/assets/arrow_horizontal@3x.png -------------------------------------------------------------------------------- /components/list/assets/arrow_up@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/troila-mobile/mCloud-Design-Mobile/24feb308da78aa8c3bb8c7e87466b0341b6f45da/components/list/assets/arrow_up@2x.png -------------------------------------------------------------------------------- /components/list/assets/arrow_up@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/troila-mobile/mCloud-Design-Mobile/24feb308da78aa8c3bb8c7e87466b0341b6f45da/components/list/assets/arrow_up@3x.png -------------------------------------------------------------------------------- /components/list/index.js: -------------------------------------------------------------------------------- 1 | import List from './List' 2 | import Item from './Item' 3 | import Brief from './Brief' 4 | 5 | Item.Brief = Brief 6 | List.Item = Item 7 | 8 | export default List 9 | -------------------------------------------------------------------------------- /components/marquee/demo/basic.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { View } from 'react-native' 3 | import { Marquee, Button } from '../..' 4 | 5 | const apiLongText = 'Some very long text needed scroll to view all of them and loop over.' 6 | const apiShortText = 'Short text' 7 | 8 | export default class MarqueeDemo extends React.Component { 9 | constructor(props) { 10 | super(props) 11 | this.state = { 12 | text: '', 13 | } 14 | } 15 | render() { 16 | const { text } = this.state 17 | return ( 18 | 19 | 20 | 30 | 40 | 41 | ) 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /components/marquee/style/index.js: -------------------------------------------------------------------------------- 1 | import { StyleSheet } from 'react-native' 2 | 3 | export default (theme) => StyleSheet.create({ 4 | container: { 5 | flexDirection: 'row', 6 | alignItems: 'center', 7 | }, 8 | textStyle: { 9 | fontSize: theme.font_size_base, 10 | color: theme.color_text_base, 11 | }, 12 | }) 13 | -------------------------------------------------------------------------------- /components/modal/LoadingView.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { 3 | View, Text, ActivityIndicator, Platform, StatusBar, 4 | } from 'react-native' 5 | import { WithTheme } from '../style' 6 | import ModalStyles from './style' 7 | import PropTypes from 'prop-types' 8 | 9 | export default class LoadingView extends React.Component { 10 | static propTypes = { 11 | text: PropTypes.string, 12 | } 13 | static defaultProps = { 14 | text: '数据加载中', 15 | } 16 | componentDidMount() { 17 | if (Platform.OS === 'ios') StatusBar.setNetworkActivityIndicatorVisible(true) 18 | } 19 | componentWillUnmount() { 20 | if (Platform.OS === 'ios') StatusBar.setNetworkActivityIndicatorVisible(false) 21 | } 22 | render() { 23 | return ( 24 | 25 | { 26 | (_styles) => { 27 | const { 28 | text, 29 | } = this.props 30 | return ( 31 | 35 | 36 | 40 | 44 | {text} 45 | 46 | 47 | 48 | ) 49 | } 50 | } 51 | 52 | ) 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /components/modal/alert.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { portal } from './provider' 3 | import AlertView from './AlertView' 4 | 5 | type Actions = Array<{ 6 | text?:string, 7 | onPress?:?Function, 8 | color?:?string, 9 | }> 10 | 11 | type Options = { 12 | closeable?: ?boolean, 13 | onDialogDismiss?: ?Function, 14 | buttonDirection?: ?string, 15 | alertType?: ?string, 16 | customIcon?: ?any, 17 | iconStyle?: ?Object, 18 | neverText?: ?string, 19 | defaultNeverState?: ?boolean, 20 | neverKey?: ?string, 21 | } 22 | 23 | export default function alert( 24 | title, 25 | content, 26 | icon, 27 | actions?:Actions, 28 | options?:Options, 29 | ) { 30 | const alertOptions = options || {} 31 | const key = portal.add( 32 | { 39 | portal.remove(key) 40 | alertOptions.onDialogDismiss && alertOptions.onDialogDismiss() 41 | }} 42 | buttonDirection={alertOptions.buttonDirection} 43 | alertType={alertOptions.alertType} 44 | customIcon={alertOptions.customIcon} 45 | iconStyle={alertOptions.iconStyle} 46 | neverText={alertOptions.neverText} 47 | defaultNeverState={alertOptions.defaultNeverState} 48 | neverKey={alertOptions.neverKey} 49 | contentStyle={alertOptions.contentStyle} 50 | /> 51 | ) 52 | } 53 | -------------------------------------------------------------------------------- /components/modal/assets/icon_input_delete@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/troila-mobile/mCloud-Design-Mobile/24feb308da78aa8c3bb8c7e87466b0341b6f45da/components/modal/assets/icon_input_delete@2x.png -------------------------------------------------------------------------------- /components/modal/assets/icon_input_delete@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/troila-mobile/mCloud-Design-Mobile/24feb308da78aa8c3bb8c7e87466b0341b6f45da/components/modal/assets/icon_input_delete@3x.png -------------------------------------------------------------------------------- /components/modal/assets/icon_modal_close@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/troila-mobile/mCloud-Design-Mobile/24feb308da78aa8c3bb8c7e87466b0341b6f45da/components/modal/assets/icon_modal_close@2x.png -------------------------------------------------------------------------------- /components/modal/assets/icon_modal_close@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/troila-mobile/mCloud-Design-Mobile/24feb308da78aa8c3bb8c7e87466b0341b6f45da/components/modal/assets/icon_modal_close@3x.png -------------------------------------------------------------------------------- /components/modal/assets/icon_modal_error@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/troila-mobile/mCloud-Design-Mobile/24feb308da78aa8c3bb8c7e87466b0341b6f45da/components/modal/assets/icon_modal_error@2x.png -------------------------------------------------------------------------------- /components/modal/assets/icon_modal_error@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/troila-mobile/mCloud-Design-Mobile/24feb308da78aa8c3bb8c7e87466b0341b6f45da/components/modal/assets/icon_modal_error@3x.png -------------------------------------------------------------------------------- /components/modal/assets/icon_modal_selected@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/troila-mobile/mCloud-Design-Mobile/24feb308da78aa8c3bb8c7e87466b0341b6f45da/components/modal/assets/icon_modal_selected@2x.png -------------------------------------------------------------------------------- /components/modal/assets/icon_modal_selected@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/troila-mobile/mCloud-Design-Mobile/24feb308da78aa8c3bb8c7e87466b0341b6f45da/components/modal/assets/icon_modal_selected@3x.png -------------------------------------------------------------------------------- /components/modal/assets/icon_modal_success@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/troila-mobile/mCloud-Design-Mobile/24feb308da78aa8c3bb8c7e87466b0341b6f45da/components/modal/assets/icon_modal_success@2x.png -------------------------------------------------------------------------------- /components/modal/assets/icon_modal_success@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/troila-mobile/mCloud-Design-Mobile/24feb308da78aa8c3bb8c7e87466b0341b6f45da/components/modal/assets/icon_modal_success@3x.png -------------------------------------------------------------------------------- /components/modal/assets/icon_modal_unselected@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/troila-mobile/mCloud-Design-Mobile/24feb308da78aa8c3bb8c7e87466b0341b6f45da/components/modal/assets/icon_modal_unselected@2x.png -------------------------------------------------------------------------------- /components/modal/assets/icon_modal_unselected@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/troila-mobile/mCloud-Design-Mobile/24feb308da78aa8c3bb8c7e87466b0341b6f45da/components/modal/assets/icon_modal_unselected@3x.png -------------------------------------------------------------------------------- /components/modal/assets/icon_modal_warning@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/troila-mobile/mCloud-Design-Mobile/24feb308da78aa8c3bb8c7e87466b0341b6f45da/components/modal/assets/icon_modal_warning@2x.png -------------------------------------------------------------------------------- /components/modal/assets/icon_modal_warning@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/troila-mobile/mCloud-Design-Mobile/24feb308da78aa8c3bb8c7e87466b0341b6f45da/components/modal/assets/icon_modal_warning@3x.png -------------------------------------------------------------------------------- /components/modal/assets/icon_toast_error@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/troila-mobile/mCloud-Design-Mobile/24feb308da78aa8c3bb8c7e87466b0341b6f45da/components/modal/assets/icon_toast_error@2x.png -------------------------------------------------------------------------------- /components/modal/assets/icon_toast_error@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/troila-mobile/mCloud-Design-Mobile/24feb308da78aa8c3bb8c7e87466b0341b6f45da/components/modal/assets/icon_toast_error@3x.png -------------------------------------------------------------------------------- /components/modal/assets/icon_toast_success@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/troila-mobile/mCloud-Design-Mobile/24feb308da78aa8c3bb8c7e87466b0341b6f45da/components/modal/assets/icon_toast_success@2x.png -------------------------------------------------------------------------------- /components/modal/assets/icon_toast_success@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/troila-mobile/mCloud-Design-Mobile/24feb308da78aa8c3bb8c7e87466b0341b6f45da/components/modal/assets/icon_toast_success@3x.png -------------------------------------------------------------------------------- /components/modal/assets/icon_toast_warning@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/troila-mobile/mCloud-Design-Mobile/24feb308da78aa8c3bb8c7e87466b0341b6f45da/components/modal/assets/icon_toast_warning@2x.png -------------------------------------------------------------------------------- /components/modal/assets/icon_toast_warning@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/troila-mobile/mCloud-Design-Mobile/24feb308da78aa8c3bb8c7e87466b0341b6f45da/components/modal/assets/icon_toast_warning@3x.png -------------------------------------------------------------------------------- /components/modal/demo/basic.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { View } from 'react-native' 3 | import { Button, Modal } from '../..' 4 | 5 | const testIcon = require('../assets/icon_modal_success.png') 6 | 7 | export default class ModalDemo extends React.Component { 8 | count = 0 9 | render() { 10 | return ( 11 | 12 | 24 | 33 | 48 | 58 | 69 | 70 | ) 71 | } 72 | } 73 | -------------------------------------------------------------------------------- /components/modal/index.js: -------------------------------------------------------------------------------- 1 | import alert from './alert' 2 | import toast from './toast' 3 | import prompt from './prompt' 4 | import { showLoading, hideLoading } from './loading' 5 | import notice, { clearMessageQueue } from './notice' 6 | 7 | const Modal = { 8 | alert, 9 | toast, 10 | prompt, 11 | showLoading, 12 | hideLoading, 13 | notice, 14 | clearMessageQueue, 15 | } 16 | export default Modal 17 | -------------------------------------------------------------------------------- /components/modal/loading.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { portal } from './provider' 3 | import LoadingView from './LoadingView' 4 | 5 | const loadingKey = 'mCloudLoadingViewKey' 6 | export function showLoading( 7 | text, 8 | ) { 9 | portal.update( 10 | loadingKey, 11 | 14 | ) 15 | } 16 | 17 | export function hideLoading() { 18 | portal.remove(loadingKey) 19 | } 20 | -------------------------------------------------------------------------------- /components/modal/notice.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { portal } from './provider' 3 | import NoticeView from './NoticeView' 4 | 5 | const key = 'mCloudNoticeViewKey' 6 | let messageQueue = [] 7 | export default function notice( 8 | title, 9 | content, 10 | icon, 11 | onPress, 12 | onDismiss, 13 | action, 14 | id, 15 | ) { 16 | const noticeData = { 17 | title, 18 | content, 19 | icon, 20 | onPress, 21 | onDismiss, 22 | action, 23 | id, 24 | } 25 | const onDialogDismiss = (data) => { 26 | messageQueue = data 27 | if (data.length === 0) { 28 | portal.remove(key) 29 | } 30 | } 31 | const index = messageQueue.findIndex((item) => item.id === id) 32 | if (index > -1) return 33 | messageQueue.push(noticeData) 34 | portal.update(key, ) 38 | } 39 | 40 | export function clearMessageQueue() { 41 | messageQueue = [] 42 | portal.remove(key) 43 | } 44 | -------------------------------------------------------------------------------- /components/modal/prompt.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { portal } from './provider' 3 | import PromptView from './PromptView' 4 | 5 | type Options = { 6 | negativeText?: ?string, 7 | positiveText?: ?string, 8 | invalidCondition?: ?Function, 9 | maxLength?: ?number, 10 | placeholder?: ?string, 11 | errorHint?: ?Function, 12 | } 13 | 14 | export default function prompt( 15 | title, 16 | content, 17 | defaultValue, 18 | onConfirm, 19 | options?:Options, 20 | ) { 21 | const promptOptions = options || {} 22 | const key = portal.add( 23 | { 28 | portal.remove(key) 29 | }} 30 | onConfirm={onConfirm} 31 | negativeText={promptOptions.negativeText} 32 | positiveText={promptOptions.positiveText} 33 | invalidCondition={promptOptions.invalidCondition} 34 | maxLength={promptOptions.maxLength} 35 | placeholder={promptOptions.placeholder} 36 | errorHint={promptOptions.errorHint} 37 | /> 38 | ) 39 | } 40 | -------------------------------------------------------------------------------- /components/modal/provider/ModalHost.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { View, StyleSheet } from 'react-native' 3 | 4 | export default class ModalHost extends React.Component { 5 | state = { 6 | modals: [], 7 | } 8 | mount = (key, children) => { 9 | this.setState((state) => ({ 10 | modals: [...state.modals, { key, children }], 11 | })) 12 | } 13 | update = (key, children) => { 14 | const { modals } = this.state 15 | const index = modals.findIndex((item) => item.key === key) 16 | if (index > -1) { 17 | this.setState((state) => ({ 18 | modals: state.modals.map((item) => { 19 | if (item.key === key) { 20 | return { ...item,children } 21 | } 22 | return item 23 | }), 24 | })) 25 | } else { 26 | this.setState((state) => ({ 27 | modals: [...state.modals, { key, children }], 28 | })) 29 | } 30 | } 31 | unmount = (key) => { 32 | this.setState((state) => ({ 33 | modals:state.modals.filter((item) => item.key !== key), 34 | })) 35 | } 36 | render() { 37 | const { modals } = this.state 38 | return modals.map((item, index) => ( 39 | 45 | {item.children} 46 | 47 | )) 48 | } 49 | } 50 | 51 | -------------------------------------------------------------------------------- /components/modal/toast.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { portal } from './provider' 3 | import ToastView from './ToastView' 4 | 5 | export default function toast( 6 | text, 7 | icon, 8 | duration, 9 | ) { 10 | const key = portal.add( 11 | { 16 | portal.remove(key) 17 | }} 18 | /> 19 | ) 20 | } 21 | -------------------------------------------------------------------------------- /components/noticeBar/assets/notice_hint@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/troila-mobile/mCloud-Design-Mobile/24feb308da78aa8c3bb8c7e87466b0341b6f45da/components/noticeBar/assets/notice_hint@2x.png -------------------------------------------------------------------------------- /components/noticeBar/assets/notice_hint@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/troila-mobile/mCloud-Design-Mobile/24feb308da78aa8c3bb8c7e87466b0341b6f45da/components/noticeBar/assets/notice_hint@3x.png -------------------------------------------------------------------------------- /components/noticeBar/demo/basic.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { View } from 'react-native' 3 | import { NoticeBar } from '../..' 4 | 5 | const apiText = 'Some very long text needed scroll to view all of them and loop over.' 6 | 7 | export default class NoticeBarDemo extends React.Component { 8 | render() { 9 | return ( 10 | 11 | 12 | 17 | 23 | 29 | 30 | ) 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /components/noticeBar/style/index.js: -------------------------------------------------------------------------------- 1 | import { StyleSheet } from 'react-native' 2 | 3 | export default (theme) => StyleSheet.create({ 4 | containerStyle: { 5 | flexDirection: 'row', 6 | alignItems: 'center', 7 | paddingHorizontal: 14, 8 | paddingVertical: 12, 9 | borderTopWidth: StyleSheet.hairlineWidth, 10 | borderTopColor: '#FED39F', 11 | borderBottomWidth: StyleSheet.hairlineWidth, 12 | borderBottomColor: '#FED39F', 13 | backgroundColor: '#FFFAE4', 14 | }, 15 | textContainer: { 16 | flex:1, 17 | overflow:'hidden', 18 | }, 19 | textStyle: { 20 | color: '#FE821E', 21 | fontSize: theme.font_size_base, 22 | }, 23 | iconStyle: { 24 | width: 20, 25 | height: 20, 26 | marginRight: 10, 27 | }, 28 | closeStyle: { 29 | color: '#FE821E', 30 | fontSize: 20, 31 | }, 32 | neverStyle: { 33 | color: '#FE821E', 34 | fontSize: theme.font_size_base, 35 | textDecorationLine: 'underline', 36 | fontWeight: '500', 37 | }, 38 | closeMargin: { 39 | marginLeft: 15, 40 | }, 41 | }) 42 | -------------------------------------------------------------------------------- /components/picker/MultiPicker.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { View, ViewPropTypes } from 'react-native' 3 | import MultiPickerMixin from './MultiPickerMixin' 4 | import PropTypes from 'prop-types' 5 | 6 | 7 | const MultiPicker = (props) => { 8 | const { 9 | children, style, getValue, onValueChange, 10 | } = props 11 | const selectedValue = getValue() 12 | const colElements = React.Children.map(children, (col, i) => React.cloneElement(col, { 13 | selectedValue: selectedValue[i], 14 | onValueChange: (...args) => onValueChange(i, ...args), 15 | })) 16 | return {colElements} 17 | } 18 | 19 | MultiPicker.propTypes = { 20 | children: PropTypes.any, 21 | style: ViewPropTypes.style, 22 | getValue: PropTypes.func, 23 | onValueChange: PropTypes.func, 24 | } 25 | 26 | export default MultiPickerMixin(MultiPicker) 27 | -------------------------------------------------------------------------------- /components/picker/MultiPickerMixin.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import PropTypes from 'prop-types' 3 | 4 | export default function (ComposedComponent) { 5 | return class extends React.Component { 6 | static defaultProps = { 7 | prefixCls: 'rmc-multi-picker', 8 | onValueChange() { }, 9 | }; 10 | static propTypes = { 11 | children: PropTypes.any, 12 | selectedValue: PropTypes.any, 13 | onValueChange: PropTypes.func, 14 | prefixCls: PropTypes.string, 15 | onScrollChange: PropTypes.func, 16 | } 17 | getValue = () => { 18 | const { children, selectedValue } = this.props 19 | if (selectedValue && selectedValue.length) { 20 | return selectedValue 21 | } else { 22 | if (!children) { 23 | return [] 24 | } 25 | return React.Children.map(children, (c) => { 26 | const cc = React.Children.toArray( 27 | c.children || c.props.children, 28 | ) 29 | return cc && cc[0] && cc[0].props.value 30 | }) 31 | } 32 | }; 33 | onChange = (i, v, cb) => { 34 | const value = this.getValue().concat() 35 | value[i] = v 36 | if (cb) { 37 | cb(value, i) 38 | } 39 | }; 40 | onValueChange = (i, v) => { 41 | const { 42 | onValueChange, 43 | } = this.props 44 | this.onChange(i, v, onValueChange) 45 | }; 46 | onScrollChange = (i, v) => { 47 | const { 48 | onScrollChange, 49 | } = this.props 50 | this.onChange(i, v, onScrollChange) 51 | }; 52 | render() { 53 | const { 54 | onScrollChange, 55 | } = this.props 56 | return ( 57 | 64 | ) 65 | } 66 | } 67 | } 68 | -------------------------------------------------------------------------------- /components/picker/NativePicker.ios.js: -------------------------------------------------------------------------------- 1 | export { Picker as default } from 'react-native' 2 | -------------------------------------------------------------------------------- /components/picker/NativePicker.web.js: -------------------------------------------------------------------------------- 1 | export { Picker as default } from 'react-native' 2 | -------------------------------------------------------------------------------- /components/picker/Picker.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | // eslint-disable-next-line import/no-unresolved 3 | import NativePicker from './NativePicker' 4 | import PropTypes from 'prop-types' 5 | 6 | const { Item } = NativePicker 7 | 8 | class Picker extends React.Component { 9 | static defaultProps = { 10 | children: [], 11 | }; 12 | static Item = () => { }; 13 | static propTypes = { 14 | selectedValue: PropTypes.any, 15 | children: PropTypes.any, 16 | style: PropTypes.any, 17 | } 18 | shouldComponentUpdate(nextProps) { 19 | const { 20 | selectedValue, 21 | children, 22 | } = this.props 23 | return ( 24 | selectedValue !== nextProps.selectedValue 25 | || children !== nextProps.children 26 | ) 27 | } 28 | getValue() { 29 | const { 30 | selectedValue, 31 | children : oldChildren, 32 | } = this.props 33 | if ('selectedValue' in this.props) { 34 | return selectedValue 35 | } 36 | const children = React.Children.toArray(oldChildren) 37 | return children && children[0] && children[0].props.value 38 | } 39 | render() { 40 | const { 41 | children: oldChildren, 42 | } = this.props 43 | const children = React.Children.map(oldChildren, (c) => ( 44 | 50 | )) 51 | // eslint-disable-next-line react/jsx-props-no-spreading 52 | return {children} 53 | } 54 | } 55 | 56 | export default Picker 57 | -------------------------------------------------------------------------------- /components/picker/PickerMixin.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import PropTypes from 'prop-types' 3 | 4 | 5 | const Item = (_props) => null 6 | 7 | export default function (ComposedComponent) { 8 | return class extends React.Component { 9 | static Item = Item; 10 | static propTypes = { 11 | children: PropTypes.any, 12 | } 13 | select = (value, itemHeight, scrollTo) => { 14 | const { 15 | children: oldChildren, 16 | } = this.props 17 | const children = React.Children.toArray(oldChildren) 18 | for (let i = 0, len = children.length; i < len; i++) { 19 | if (children[i].props.value === value) { 20 | this.selectByIndex(i, itemHeight, scrollTo) 21 | return 22 | } 23 | } 24 | this.selectByIndex(0, itemHeight, scrollTo) 25 | }; 26 | doScrollingComplete = (top, itemHeight, fireValueChange) => { 27 | const { 28 | children: oldChildren, 29 | } = this.props 30 | const children = React.Children.toArray(oldChildren) 31 | const index = this.computeChildIndex(top, itemHeight, children.length) 32 | const child = children[index] 33 | if (child) { 34 | fireValueChange(child.props.value) 35 | } else if (console.warn) { 36 | console.warn('child not found', children, index) 37 | } 38 | }; 39 | computeChildIndex(top, itemHeight, childrenLength) { 40 | const index = Math.round(top / itemHeight) 41 | return Math.min(index, childrenLength - 1) 42 | } 43 | selectByIndex(index, itemHeight, zscrollTo) { 44 | const { 45 | children: oldChildren, 46 | } = this.props 47 | if ( 48 | index < 0 49 | || index >= React.Children.count(oldChildren) 50 | || !itemHeight 51 | ) { 52 | return 53 | } 54 | zscrollTo(index * itemHeight) 55 | } 56 | render() { 57 | return ( 58 | 65 | ) 66 | } 67 | } 68 | } 69 | -------------------------------------------------------------------------------- /components/picker/Popup.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { 3 | Text, TouchableOpacity, View, Modal, 4 | } from 'react-native' 5 | import PopupMixin from './PopupMixin' 6 | import PropTypes from 'prop-types' 7 | 8 | const getModal = (props, visible, { 9 | getContent, hide, onDismiss, onOk, 10 | }) => { 11 | const { 12 | styles, title, okText, dismissText, 13 | } = props 14 | 15 | const titleEl = typeof title === 'string' ? ( 16 | {title} 17 | ) : ( 18 | title 19 | ) 20 | const okEl = typeof okText === 'string' ? ( 21 | {okText} 22 | ) : ( 23 | okText 24 | ) 25 | const dismissEl = typeof dismissText === 'string' ? ( 26 | {dismissText} 27 | ) : ( 28 | dismissText 29 | ) 30 | const { 31 | actionTextActiveOpacity, 32 | } = props 33 | return ( 34 | 41 | 42 | 46 | 47 | 52 | {dismissEl} 53 | 54 | {titleEl} 55 | 60 | {okEl} 61 | 62 | 63 | {getContent()} 64 | 65 | 66 | ) 67 | } 68 | 69 | getModal.propTypes = { 70 | styles: PropTypes.object, 71 | title: PropTypes.string, 72 | okText: PropTypes.string, 73 | dismissText: PropTypes.string, 74 | actionTextActiveOpacity: PropTypes.number, 75 | } 76 | 77 | export default PopupMixin(getModal, { 78 | actionTextActiveOpacity: 0.7, 79 | triggerType: 'onPress', 80 | styles: {}, 81 | WrapComponent: View, 82 | }) 83 | -------------------------------------------------------------------------------- /components/picker/cascader/Popup.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import PopupPicker from '../Popup' 3 | import PropTypes from 'prop-types' 4 | 5 | 6 | class PopupCascader extends React.Component { 7 | static defaultProps = { 8 | pickerValueProp: 'value', 9 | pickerValueChangeProp: 'onChange', 10 | }; 11 | static propTypes = { 12 | pickerValueProp: PropTypes.string, 13 | pickerValueChangeProp: PropTypes.string, 14 | onOk: PropTypes.func, 15 | onChange: PropTypes.func, 16 | cascader: PropTypes.any, 17 | } 18 | onOk = (v) => { 19 | const { onChange, onOk } = this.props 20 | if (onChange) { 21 | onChange(v) 22 | } 23 | if (onOk) { 24 | onOk(v) 25 | } 26 | }; 27 | render() { 28 | const { 29 | cascader, 30 | } = this.props 31 | return ( 32 | 38 | ) 39 | } 40 | } 41 | 42 | export default PopupCascader 43 | -------------------------------------------------------------------------------- /components/picker/style/index.js: -------------------------------------------------------------------------------- 1 | import { StyleSheet } from 'react-native' 2 | 3 | 4 | export default (theme) => StyleSheet.create({ 5 | modal: { 6 | flex: 1, 7 | flexDirection: 'column', 8 | justifyContent: 'flex-end', 9 | }, 10 | header: { 11 | height: 44, 12 | alignItems: 'center', 13 | flexDirection: 'row', 14 | justifyContent:'center', 15 | borderBottomWidth: 1, 16 | borderBottomColor: theme.border_color_base, 17 | borderTopLeftRadius:theme.radius_lg, 18 | borderTopRightRadius:theme.radius_lg, 19 | backgroundColor: theme.picker_header_background_color, 20 | }, 21 | headerItem: { 22 | height: 44, 23 | flex: 1, 24 | justifyContent: 'center', 25 | }, 26 | actionText: { 27 | fontSize: theme.font_size_base, 28 | fontWeight:'bold', 29 | }, 30 | okText: { 31 | color: theme.brand_primary, 32 | }, 33 | dismissText: { 34 | color: theme.picker_dismiss_text_color, 35 | }, 36 | title: { 37 | color: theme.picker_title_text_color, 38 | fontSize: theme.font_size_caption, 39 | textAlign: 'center', 40 | }, 41 | modelContainer:{ 42 | flex:1, 43 | backgroundColor: 'rgba(0,0,0,0.4)', 44 | }, 45 | topView:{ 46 | flex: 1, 47 | }, 48 | leftHeaderItem:{ 49 | paddingLeft: theme.h_spacing_lg, 50 | }, 51 | rightHeaderItem: { 52 | paddingRight: theme.h_spacing_lg, 53 | alignItems:'flex-end', 54 | }, 55 | centerHeaderItem:{ 56 | alignItems: 'center', 57 | }, 58 | pickerContainer:{ 59 | backgroundColor: theme.picker_background_color, 60 | }, 61 | pickerItem:{ 62 | color: theme.color_text_base, 63 | }, 64 | pickerAndroidSelectedItemText:{ 65 | fontSize: 20, 66 | fontWeight: '300', 67 | color: theme.picker_android_selected_item_text_color, 68 | }, 69 | pickerAndroidItemText: { 70 | fontSize: 18, 71 | color: theme.picker_android_item_text_color, 72 | textAlign: 'center', 73 | height: 20, 74 | }, 75 | }) 76 | -------------------------------------------------------------------------------- /components/provider/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { ThemeContext } from '../style' 3 | import PropTypes from 'prop-types' 4 | import lightTheme from '../style/themes/light' 5 | import darkTheme from '../style/themes/dark' 6 | import ModalProvider from '../modal/provider' 7 | 8 | const themeConfig = { 9 | light: lightTheme, 10 | dark: darkTheme, 11 | } 12 | 13 | export default class extends React.Component { 14 | static defaultProps = { 15 | theme: 'light', 16 | children: null, 17 | }; 18 | static propTypes = { 19 | theme: PropTypes.string, 20 | children: PropTypes.any, 21 | } 22 | render() { 23 | const { children, theme } = this.props 24 | const themeStyle = themeConfig[theme] || themeConfig.light 25 | return ( 26 | 27 | 28 | {children} 29 | 30 | 31 | ) 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /components/radio/index.js: -------------------------------------------------------------------------------- 1 | import Radio from './Radio' 2 | import RadioItem from './RadioItem' 3 | 4 | Radio.RadioItem = RadioItem 5 | 6 | export default Radio 7 | -------------------------------------------------------------------------------- /components/radio/style/index.js: -------------------------------------------------------------------------------- 1 | import { StyleSheet } from 'react-native' 2 | 3 | export default (theme) => StyleSheet.create({ 4 | wrapper: { 5 | flexDirection: 'row', 6 | alignItems: 'center', 7 | }, 8 | itemWrapper: { 9 | flexDirection: 'row', 10 | alignItems: 'center', 11 | height: theme.checkbox_item_height, 12 | backgroundColor: theme.fill_base, 13 | paddingLeft: theme.h_spacing_lg, 14 | }, 15 | circleStyle: { 16 | justifyContent: 'center', 17 | alignItems: 'center', 18 | borderWidth: theme.border_width_md, 19 | borderColor: theme.radio_circle_border_color, 20 | }, 21 | centerStyle: { 22 | backgroundColor: theme.brand_primary, 23 | }, 24 | iconRight: { 25 | marginLeft: theme.h_spacing_md, 26 | }, 27 | itemText: { 28 | marginLeft: theme.h_spacing_lg, 29 | fontSize: theme.font_size_caption, 30 | color: theme.color_text_base, 31 | }, 32 | disabledItemText: { 33 | color: theme.color_text_info, 34 | }, 35 | line: { 36 | backgroundColor: theme.border_color_base, 37 | height: theme.border_width_sm, 38 | position: 'absolute', 39 | left: theme.h_spacing_lg, 40 | right: 0, 41 | bottom: 0, 42 | }, 43 | }) 44 | -------------------------------------------------------------------------------- /components/searchBar/assets/clear@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/troila-mobile/mCloud-Design-Mobile/24feb308da78aa8c3bb8c7e87466b0341b6f45da/components/searchBar/assets/clear@2x.png -------------------------------------------------------------------------------- /components/searchBar/assets/clear@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/troila-mobile/mCloud-Design-Mobile/24feb308da78aa8c3bb8c7e87466b0341b6f45da/components/searchBar/assets/clear@3x.png -------------------------------------------------------------------------------- /components/searchBar/assets/search-big@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/troila-mobile/mCloud-Design-Mobile/24feb308da78aa8c3bb8c7e87466b0341b6f45da/components/searchBar/assets/search-big@2x.png -------------------------------------------------------------------------------- /components/searchBar/assets/search-big@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/troila-mobile/mCloud-Design-Mobile/24feb308da78aa8c3bb8c7e87466b0341b6f45da/components/searchBar/assets/search-big@3x.png -------------------------------------------------------------------------------- /components/searchBar/assets/search-small@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/troila-mobile/mCloud-Design-Mobile/24feb308da78aa8c3bb8c7e87466b0341b6f45da/components/searchBar/assets/search-small@2x.png -------------------------------------------------------------------------------- /components/searchBar/assets/search-small@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/troila-mobile/mCloud-Design-Mobile/24feb308da78aa8c3bb8c7e87466b0341b6f45da/components/searchBar/assets/search-small@3x.png -------------------------------------------------------------------------------- /components/searchBar/demo/basic.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react' 2 | import { 3 | TouchableOpacity, 4 | Text, 5 | StyleSheet, 6 | Keyboard, 7 | } from 'react-native' 8 | import { SearchBar } from '../..' 9 | 10 | export default () => { 11 | const [value, onChange] = useState('打卡助手') 12 | return ( 13 | Keyboard.dismiss()} 18 | > 19 | 20 | 圆角搜索框 21 | 22 | 23 | 未输入状态 24 | 25 | 26 | 27 | 初始值 28 | 29 | 30 | 31 | 通栏搜索框 32 | 33 | 34 | 初始值 35 | 36 | 37 | 38 | 受控 39 | 40 | console.log(val)} 44 | onClear={() => onChange('')} 45 | onChange={(val) => onChange(val)} 46 | /> 47 | 48 | ) 49 | } 50 | 51 | const styles = StyleSheet.create({ 52 | wrap: { 53 | flex: 1, 54 | backgroundColor: '#E6E6E6', 55 | }, 56 | title: { 57 | fontSize: 14, 58 | color: '#1F2530', 59 | paddingVertical: 10, 60 | paddingLeft: 15, 61 | }, 62 | boldTitle: { 63 | fontSize: 16, 64 | color: '#1F2530', 65 | paddingVertical: 10, 66 | paddingLeft: 10, 67 | fontWeight: '500', 68 | }, 69 | }) 70 | -------------------------------------------------------------------------------- /components/searchBar/style/index.js: -------------------------------------------------------------------------------- 1 | import { StyleSheet } from 'react-native' 2 | 3 | export default (theme) => StyleSheet.create({ 4 | default_wrapper: { 5 | backgroundColor: theme.fill_base, 6 | height: theme.search_bar_height, 7 | paddingLeft: theme.h_spacing_lg, 8 | paddingRight: theme.h_spacing_lg, 9 | flexDirection: 'row', 10 | alignItems: 'center', 11 | borderTopWidth: theme.border_width_sm, 12 | borderBottomWidth: theme.border_width_sm, 13 | borderColor: theme.border_color_base, 14 | }, 15 | default_inputWrapper: { 16 | flex: 1, 17 | flexDirection: 'row', 18 | }, 19 | default_input: { 20 | backgroundColor: theme.fill_base, 21 | height: theme.search_bar_input_height, 22 | color: theme.color_text_base, 23 | fontSize: theme.font_size_base, 24 | paddingLeft: 15 + theme.h_spacing_sm, 25 | paddingRight: theme.h_spacing_sm, 26 | flex: 1, 27 | paddingTop: 0, 28 | paddingBottom: 0, 29 | }, 30 | default_searchView: { 31 | position: 'absolute', 32 | flexDirection: 'row', 33 | alignSelf: 'center', 34 | left: theme.h_spacing_lg, 35 | marginRight: theme.h_spacing_sm, 36 | }, 37 | default_clearView: { 38 | position: 'absolute', 39 | flexDirection: 'row', 40 | alignSelf: 'center', 41 | right: theme.h_spacing_md, 42 | }, 43 | radius_wrapper: { 44 | height: theme.search_bar_height, 45 | paddingLeft: theme.h_spacing_lg, 46 | paddingRight: theme.h_spacing_lg, 47 | flexDirection: 'row', 48 | alignItems: 'center', 49 | }, 50 | radius_inputWrapper: { 51 | flex: 1, 52 | flexDirection: 'row', 53 | }, 54 | radius_input: { 55 | borderRadius: theme.search_bar_input_height / 2, 56 | backgroundColor: theme.fill_base, 57 | height: theme.search_bar_input_height, 58 | color: theme.color_text_base, 59 | fontSize: theme.font_size_base, 60 | paddingLeft: theme.h_spacing_lg + 13 + theme.h_spacing_sm * 2, 61 | paddingRight: theme.h_spacing_lg + 23 + theme.h_spacing_sm, 62 | flex: 1, 63 | paddingTop: 0, 64 | paddingBottom: 0, 65 | borderWidth: theme.border_width_sm, 66 | borderColor: theme.border_color_base, 67 | }, 68 | radius_searchView: { 69 | position: 'absolute', 70 | flexDirection: 'row', 71 | alignSelf: 'center', 72 | left: theme.h_spacing_lg * 2 + theme.h_spacing_sm, 73 | marginRight: theme.h_spacing_sm, 74 | }, 75 | radius_clearView: { 76 | position: 'absolute', 77 | flexDirection: 'row', 78 | alignSelf: 'center', 79 | right: theme.h_spacing_lg + theme.h_spacing_md + 2, 80 | }, 81 | }) 82 | -------------------------------------------------------------------------------- /components/segmentedControl/demo/basic.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by sml on 2019/9/20. 3 | */ 4 | import React from 'react' 5 | import { View } from 'react-native' 6 | import { SegmentedControl } from '../..' 7 | 8 | export default () => ( 9 | 15 | 16 | {},() => {}]} 21 | style={{ marginTop:20 }} 22 | /> 23 | {},() => {}]} 27 | type='special' 28 | style={{ marginTop:20 }} 29 | /> 30 | {},() => {},() => {}]} 34 | type='special' 35 | style={{ marginTop:20,width:300 }} 36 | /> 37 | 38 | ) -------------------------------------------------------------------------------- /components/segmentedControl/style/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by sml on 2019/9/20. 3 | */ 4 | import { StyleSheet } from 'react-native' 5 | 6 | export default (theme) => StyleSheet.create({ 7 | defaultContainer: { 8 | flexDirection: 'row', 9 | borderColor:theme.sc_selected_bg_color_default, 10 | borderWidth:1, 11 | borderRadius:theme.radius_md, 12 | width:theme.segmented_control_width, 13 | }, 14 | specialContainer:{ 15 | flexDirection: 'row', 16 | borderColor:theme.sc_sepcial_border_color, 17 | borderWidth:1, 18 | borderRadius:theme.radius_md, 19 | width:theme.segmented_control_width, 20 | }, 21 | containerHeight:{ 22 | height:theme.segmented_control_height, 23 | }, 24 | defaultBorderRight:{ 25 | borderColor:theme.sc_selected_bg_color_default, 26 | borderRightWidth:1 27 | }, 28 | specialBorderRight:{ 29 | borderColor:theme.sc_selected_bg_color_special, 30 | borderRightWidth:1 31 | }, 32 | disabled:{ 33 | opacity:0.6, 34 | }, 35 | defaultButtonBGUnselected:{ 36 | backgroundColor:theme.sc_unselected_bg_color_default, 37 | }, 38 | defaultButtonBGSelected:{ 39 | backgroundColor:theme.sc_selected_bg_color_default, 40 | }, 41 | defaultUnselectedText:{ 42 | fontSize:theme.font_size_base, 43 | color:theme.sc_unselected_text_color_default, 44 | }, 45 | defaultSelectedText:{ 46 | fontSize:theme.font_size_base, 47 | color:theme.sc_selected_text_color_default, 48 | }, 49 | specialButtonBGUnselected:{ 50 | backgroundColor:theme.sc_selected_bg_color_default, 51 | }, 52 | specialButtonBGSelected:{ 53 | backgroundColor:theme.sc_selected_bg_color_special, 54 | }, 55 | specialUnselectedText:{ 56 | fontSize:theme.font_size_base, 57 | color:theme.sc_unselected_text_color_special 58 | }, 59 | specialSelectedText:{ 60 | fontSize:theme.font_size_base, 61 | color:theme.sc_selected_text_color_special, 62 | }, 63 | borderRadiusLeft: { 64 | flex:1, 65 | alignItems: 'center', 66 | justifyContent: 'center', 67 | borderTopLeftRadius:theme.radius_md, 68 | borderBottomLeftRadius:theme.radius_md, 69 | }, 70 | borderRadiusRight: { 71 | flex:1, 72 | alignItems: 'center', 73 | justifyContent: 'center', 74 | borderTopRightRadius:theme.radius_md, 75 | borderBottomRightRadius:theme.radius_md, 76 | }, 77 | wrapperStyle: { 78 | flex:1, 79 | alignItems: 'center', 80 | justifyContent: 'center', 81 | }, 82 | }) 83 | -------------------------------------------------------------------------------- /components/shareSheet/assets/icon-friend.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/troila-mobile/mCloud-Design-Mobile/24feb308da78aa8c3bb8c7e87466b0341b6f45da/components/shareSheet/assets/icon-friend.png -------------------------------------------------------------------------------- /components/shareSheet/assets/icon-friend@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/troila-mobile/mCloud-Design-Mobile/24feb308da78aa8c3bb8c7e87466b0341b6f45da/components/shareSheet/assets/icon-friend@2x.png -------------------------------------------------------------------------------- /components/shareSheet/assets/icon-friend@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/troila-mobile/mCloud-Design-Mobile/24feb308da78aa8c3bb8c7e87466b0341b6f45da/components/shareSheet/assets/icon-friend@3x.png -------------------------------------------------------------------------------- /components/shareSheet/assets/icon-qq.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/troila-mobile/mCloud-Design-Mobile/24feb308da78aa8c3bb8c7e87466b0341b6f45da/components/shareSheet/assets/icon-qq.png -------------------------------------------------------------------------------- /components/shareSheet/assets/icon-qq@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/troila-mobile/mCloud-Design-Mobile/24feb308da78aa8c3bb8c7e87466b0341b6f45da/components/shareSheet/assets/icon-qq@2x.png -------------------------------------------------------------------------------- /components/shareSheet/assets/icon-qq@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/troila-mobile/mCloud-Design-Mobile/24feb308da78aa8c3bb8c7e87466b0341b6f45da/components/shareSheet/assets/icon-qq@3x.png -------------------------------------------------------------------------------- /components/shareSheet/assets/icon-qzone.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/troila-mobile/mCloud-Design-Mobile/24feb308da78aa8c3bb8c7e87466b0341b6f45da/components/shareSheet/assets/icon-qzone.png -------------------------------------------------------------------------------- /components/shareSheet/assets/icon-qzone@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/troila-mobile/mCloud-Design-Mobile/24feb308da78aa8c3bb8c7e87466b0341b6f45da/components/shareSheet/assets/icon-qzone@2x.png -------------------------------------------------------------------------------- /components/shareSheet/assets/icon-qzone@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/troila-mobile/mCloud-Design-Mobile/24feb308da78aa8c3bb8c7e87466b0341b6f45da/components/shareSheet/assets/icon-qzone@3x.png -------------------------------------------------------------------------------- /components/shareSheet/assets/icon-wechat.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/troila-mobile/mCloud-Design-Mobile/24feb308da78aa8c3bb8c7e87466b0341b6f45da/components/shareSheet/assets/icon-wechat.png -------------------------------------------------------------------------------- /components/shareSheet/assets/icon-wechat@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/troila-mobile/mCloud-Design-Mobile/24feb308da78aa8c3bb8c7e87466b0341b6f45da/components/shareSheet/assets/icon-wechat@2x.png -------------------------------------------------------------------------------- /components/shareSheet/assets/icon-wechat@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/troila-mobile/mCloud-Design-Mobile/24feb308da78aa8c3bb8c7e87466b0341b6f45da/components/shareSheet/assets/icon-wechat@3x.png -------------------------------------------------------------------------------- /components/shareSheet/assets/icon-weibo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/troila-mobile/mCloud-Design-Mobile/24feb308da78aa8c3bb8c7e87466b0341b6f45da/components/shareSheet/assets/icon-weibo.png -------------------------------------------------------------------------------- /components/shareSheet/assets/icon-weibo@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/troila-mobile/mCloud-Design-Mobile/24feb308da78aa8c3bb8c7e87466b0341b6f45da/components/shareSheet/assets/icon-weibo@2x.png -------------------------------------------------------------------------------- /components/shareSheet/assets/icon-weibo@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/troila-mobile/mCloud-Design-Mobile/24feb308da78aa8c3bb8c7e87466b0341b6f45da/components/shareSheet/assets/icon-weibo@3x.png -------------------------------------------------------------------------------- /components/shareSheet/demo/basic.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { 3 | ShareSheet, 4 | Button, 5 | } from '../..' 6 | 7 | export default class extends React.Component { 8 | state={ 9 | options:['text','value'], 10 | } 11 | render() { 12 | const { 13 | options, 14 | } = this.state 15 | return ( 16 | <> 17 | 26 | this.actionSheet = e} 28 | options={['qq','qzone']} 29 | disabledIndexArrary={[5]} 30 | title="zhe是标题dfshdfshuhgiuhdubhdsfiubhdsiufhb" 31 | onPress={(key) => console.log(key)} 32 | /> 33 | 34 | ) 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /components/shareSheet/item.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { 3 | View, 4 | TouchableOpacity, 5 | Text, 6 | Image, 7 | StyleSheet, 8 | } from 'react-native' 9 | import PropTypes from 'prop-types' 10 | 11 | export default class ShareItem extends React.Component { 12 | static propTypes = { 13 | item: PropTypes.object, 14 | onPress: PropTypes.func, 15 | styles: PropTypes.object, 16 | title: PropTypes.string, 17 | } 18 | static defaultProps = { 19 | item:{ 20 | image:require('./assets/icon-friend.png'), 21 | title:'分享', 22 | }, 23 | styles:{}, 24 | title:null, 25 | onPress:() => {}, 26 | } 27 | render() { 28 | const { 29 | item, 30 | styles, 31 | onPress, 32 | } = this.props 33 | return ( 34 | 35 | 39 | 40 | 41 | 42 | 43 | {item.title} 44 | 45 | 46 | 47 | ) 48 | } 49 | } 50 | 51 | const ItemStyle = StyleSheet.create({ 52 | itemBackground:{ 53 | marginHorizontal:7.5, 54 | marginVertical:15, 55 | }, 56 | itemButton:{ 57 | flexDirection:'column', 58 | justifyContent:'space-around', 59 | flex:1, 60 | }, 61 | 62 | }) 63 | -------------------------------------------------------------------------------- /components/shareSheet/style/index.js: -------------------------------------------------------------------------------- 1 | import { StyleSheet } from 'react-native' 2 | 3 | export default (theme) => StyleSheet.create({ 4 | overlay: { 5 | position: 'absolute', 6 | top: 0, 7 | right: 0, 8 | bottom: 0, 9 | left: 0, 10 | opacity: 0.6, 11 | backgroundColor:'#000', 12 | 13 | }, 14 | textStyle:{ 15 | color: 2, 16 | borderColor: '#f1f1f1', 17 | }, 18 | cancelText:{ 19 | color:theme.sheet_title_color, 20 | fontSize:theme.font_size_caption, 21 | textAlign:'center', 22 | }, 23 | cancelButton: { 24 | height: 50, 25 | marginTop: 1, 26 | alignItems: 'center', 27 | justifyContent: 'center', 28 | backgroundColor: theme.sheet_backgroundColor, 29 | }, 30 | titleBox: { 31 | height:40, 32 | alignItems: 'center', 33 | justifyContent: 'center', 34 | backgroundColor: theme.sheet_title_backgroundcolor, 35 | paddingHorizontal:10, 36 | borderTopLeftRadius:10, 37 | borderTopRightRadius:10, 38 | }, 39 | titleStyle:{ 40 | textAlign:'center', 41 | color:theme.sheet_title_color, 42 | fontSize:theme.font_size_base, 43 | }, 44 | body: { 45 | flex: 1, 46 | alignSelf: 'flex-end', 47 | backgroundColor: theme.sheet_spre_color, 48 | borderTopLeftRadius:10, 49 | borderTopRightRadius:10, 50 | }, 51 | wrapper: { 52 | flex: 1, 53 | flexDirection: 'row', 54 | borderTopLeftRadius:10, 55 | borderTopRightRadius:10, 56 | }, 57 | itemView:{ 58 | backgroundColor:theme.sheet_item_backgroundColor, 59 | width:55, 60 | height:55, 61 | borderRadius:5, 62 | justifyContent:'center', 63 | alignItems:'center', 64 | }, 65 | itemText:{ 66 | textAlign:'center', 67 | color:theme.sheet_item_title_color, 68 | marginTop:10, 69 | }, 70 | scrollContent:{ 71 | flexDirection:'row', 72 | justifyContent:'center', 73 | paddingHorizontal:10, 74 | }, 75 | scrollStyle:{ 76 | backgroundColor:theme.sheet_backgroundColor, 77 | }, 78 | }) 79 | -------------------------------------------------------------------------------- /components/stepper/assets/stepper_add@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/troila-mobile/mCloud-Design-Mobile/24feb308da78aa8c3bb8c7e87466b0341b6f45da/components/stepper/assets/stepper_add@2x.png -------------------------------------------------------------------------------- /components/stepper/assets/stepper_add@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/troila-mobile/mCloud-Design-Mobile/24feb308da78aa8c3bb8c7e87466b0341b6f45da/components/stepper/assets/stepper_add@3x.png -------------------------------------------------------------------------------- /components/stepper/assets/stepper_add_default@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/troila-mobile/mCloud-Design-Mobile/24feb308da78aa8c3bb8c7e87466b0341b6f45da/components/stepper/assets/stepper_add_default@2x.png -------------------------------------------------------------------------------- /components/stepper/assets/stepper_add_default@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/troila-mobile/mCloud-Design-Mobile/24feb308da78aa8c3bb8c7e87466b0341b6f45da/components/stepper/assets/stepper_add_default@3x.png -------------------------------------------------------------------------------- /components/stepper/assets/stepper_add_disable@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/troila-mobile/mCloud-Design-Mobile/24feb308da78aa8c3bb8c7e87466b0341b6f45da/components/stepper/assets/stepper_add_disable@2x.png -------------------------------------------------------------------------------- /components/stepper/assets/stepper_add_disable@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/troila-mobile/mCloud-Design-Mobile/24feb308da78aa8c3bb8c7e87466b0341b6f45da/components/stepper/assets/stepper_add_disable@3x.png -------------------------------------------------------------------------------- /components/stepper/assets/stepper_subtract@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/troila-mobile/mCloud-Design-Mobile/24feb308da78aa8c3bb8c7e87466b0341b6f45da/components/stepper/assets/stepper_subtract@2x.png -------------------------------------------------------------------------------- /components/stepper/assets/stepper_subtract@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/troila-mobile/mCloud-Design-Mobile/24feb308da78aa8c3bb8c7e87466b0341b6f45da/components/stepper/assets/stepper_subtract@3x.png -------------------------------------------------------------------------------- /components/stepper/assets/stepper_subtract_default@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/troila-mobile/mCloud-Design-Mobile/24feb308da78aa8c3bb8c7e87466b0341b6f45da/components/stepper/assets/stepper_subtract_default@2x.png -------------------------------------------------------------------------------- /components/stepper/assets/stepper_subtract_default@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/troila-mobile/mCloud-Design-Mobile/24feb308da78aa8c3bb8c7e87466b0341b6f45da/components/stepper/assets/stepper_subtract_default@3x.png -------------------------------------------------------------------------------- /components/stepper/assets/stepper_subtract_disable@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/troila-mobile/mCloud-Design-Mobile/24feb308da78aa8c3bb8c7e87466b0341b6f45da/components/stepper/assets/stepper_subtract_disable@2x.png -------------------------------------------------------------------------------- /components/stepper/assets/stepper_subtract_disable@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/troila-mobile/mCloud-Design-Mobile/24feb308da78aa8c3bb8c7e87466b0341b6f45da/components/stepper/assets/stepper_subtract_disable@3x.png -------------------------------------------------------------------------------- /components/stepper/demo/basic.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { View } from 'react-native' 3 | import { Stepper } from '../..' 4 | 5 | export default () => ( 6 | 11 | 12 | {}} 19 | canInput={true} 20 | /> 21 | 22 | ) 23 | -------------------------------------------------------------------------------- /components/stepper/style/index.js: -------------------------------------------------------------------------------- 1 | import { StyleSheet } from 'react-native' 2 | 3 | export default (theme) => StyleSheet.create({ 4 | container: { 5 | flexDirection: 'row', 6 | }, 7 | wrapper: { 8 | flexDirection: 'row', 9 | alignItems: 'center', 10 | margin:2 11 | }, 12 | radius_text:{ 13 | marginHorizontal:theme.h_spacing_lg, 14 | color:theme.color_text_base, 15 | fontSize:theme.font_size_subhead, 16 | } 17 | 18 | }) 19 | -------------------------------------------------------------------------------- /components/steps/assets/steps_error@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/troila-mobile/mCloud-Design-Mobile/24feb308da78aa8c3bb8c7e87466b0341b6f45da/components/steps/assets/steps_error@2x.png -------------------------------------------------------------------------------- /components/steps/assets/steps_error@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/troila-mobile/mCloud-Design-Mobile/24feb308da78aa8c3bb8c7e87466b0341b6f45da/components/steps/assets/steps_error@3x.png -------------------------------------------------------------------------------- /components/steps/assets/steps_finish@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/troila-mobile/mCloud-Design-Mobile/24feb308da78aa8c3bb8c7e87466b0341b6f45da/components/steps/assets/steps_finish@2x.png -------------------------------------------------------------------------------- /components/steps/assets/steps_finish@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/troila-mobile/mCloud-Design-Mobile/24feb308da78aa8c3bb8c7e87466b0341b6f45da/components/steps/assets/steps_finish@3x.png -------------------------------------------------------------------------------- /components/steps/assets/steps_wait@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/troila-mobile/mCloud-Design-Mobile/24feb308da78aa8c3bb8c7e87466b0341b6f45da/components/steps/assets/steps_wait@2x.png -------------------------------------------------------------------------------- /components/steps/assets/steps_wait@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/troila-mobile/mCloud-Design-Mobile/24feb308da78aa8c3bb8c7e87466b0341b6f45da/components/steps/assets/steps_wait@3x.png -------------------------------------------------------------------------------- /components/steps/index.js: -------------------------------------------------------------------------------- 1 | import Steps from './Steps' 2 | import StepsItem from './StepsItem' 3 | 4 | Steps.StepsItem = StepsItem 5 | 6 | export default Steps 7 | -------------------------------------------------------------------------------- /components/style/index.js: -------------------------------------------------------------------------------- 1 | import deepmerge from 'deepmerge' 2 | import React from 'react' 3 | import defaultTheme from './themes/light' 4 | import PropTypes from 'prop-types' 5 | 6 | export const ThemeContext = React.createContext(defaultTheme) 7 | export class WithTheme extends React.Component { 8 | static defaultProps = { 9 | themeStyles: () => { }, 10 | }; 11 | static propTypes = { 12 | themeStyles: PropTypes.func, 13 | styles: PropTypes.object, 14 | children: PropTypes.func, 15 | } 16 | static contextType = ThemeContext 17 | getStyles = (theme) => { 18 | const { themeStyles, styles } = this.props 19 | const defaultThemeStyles = themeStyles(theme) 20 | if (styles) { 21 | return deepmerge(defaultThemeStyles, styles) 22 | } 23 | return defaultThemeStyles 24 | }; 25 | render() { 26 | const { children } = this.props 27 | return ( 28 | 29 | {(theme) => children(this.getStyles(theme), theme)} 30 | 31 | ) 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /components/style/themes/dark.js: -------------------------------------------------------------------------------- 1 | import defaultTheme, { brandPrimary } from './light' 2 | 3 | export default { 4 | ...defaultTheme, 5 | dark: true, 6 | 7 | // 文字色 8 | color_text_base: '#FFFFFF', // 标题 9 | 10 | // 背景色 11 | fill_base: '#12162F', // 组件默认背景 12 | fill_grey: '#030722', // 组件默认背景 13 | 14 | // action sheet 15 | sheet_title_backgroundcolor:'#141933', 16 | sheet_backgroundColor:'#2B304D', 17 | sheet_title_color:'#A5ABB1', 18 | sheet_item_title_color:'#fff', 19 | sheet_spre_color:'#444A69', 20 | sheet_item_backgroundColor:'#222741', 21 | 22 | // 边框色 23 | border_color_base: '#262B48', 24 | 25 | ghost_button_fill_tap: '#ffffff1A', 26 | ghost_button_background_color: '#ffffff33', 27 | picker_background_color: '#292D4B', 28 | picker_header_background_color: '#141933', 29 | picker_dismiss_text_color: '#A5ABB1', 30 | picker_title_text_color: '#ffffff', 31 | picker_android_selected_item_text_color: '#ffffff', 32 | picker_android_item_text_color: '#50546B', 33 | 34 | // Tabs indicator Color 35 | tabs_indicator_Color:'#262B48', 36 | labelBackgroundColor:'#262B48', 37 | 38 | 39 | // segmented_control 40 | sc_selected_bg_color_default: '#262B48', // 同时应用于背景、文字颜色、边框色 41 | sc_unselected_bg_color_default:'#030722', // darkMode: 42 | sc_selected_text_color_default:brandPrimary, 43 | sc_unselected_text_color_default:'#969FB5', 44 | sc_selected_bg_color_special:brandPrimary, // 同时应用于背景、文字颜色、边框色 45 | sc_selected_text_color_special:'#fff', 46 | sc_unselected_text_color_special:'#969FB5', 47 | sc_sepcial_border_color:'#262B48', 48 | 49 | // badge 50 | badge_background_color:'#12162F', 51 | badge_text_color:'#fff', 52 | 53 | 54 | // card 55 | card_background_color:'#12162F', 56 | card_title_color:'#fff', 57 | card_content_color: '#A5ABB1', 58 | 59 | // radio 60 | radio_circle_border_color: '#555768', 61 | 62 | // switch 63 | switch_tint: '#2C304E', 64 | switch_disabled_tint: '#2C304E', 65 | switch_disabled_thumbtint: 'rgba(255,255,255,.4)', 66 | 67 | // steps 68 | steps_text_black_color:'#fff', 69 | steps_text_normal_color: '#A5ABB1', 70 | 71 | } 72 | -------------------------------------------------------------------------------- /components/switch/Switch.web.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react' 2 | import { 3 | Switch, 4 | ViewPropTypes, 5 | } from 'react-native' 6 | import PropTypes from 'prop-types' 7 | import { WithTheme } from '../style' 8 | import SwitchStyles from './style' 9 | 10 | export default class SwitchButton extends Component { 11 | static propTypes = { 12 | style: ViewPropTypes.style, 13 | styles: PropTypes.object, 14 | checked: PropTypes.bool, 15 | onChange: PropTypes.func, 16 | disabled: PropTypes.bool, 17 | onTintColor: PropTypes.string, 18 | } 19 | static defaultProps = { 20 | style: {}, 21 | styles: {}, 22 | checked: false, 23 | onChange: () => { }, 24 | disabled: false, 25 | } 26 | render() { 27 | const { 28 | style, 29 | styles, 30 | disabled, 31 | checked, 32 | onChange, 33 | onTintColor, 34 | } = this.props 35 | return ( 36 | 37 | { 38 | (_styles, theme) => ( 39 | 46 | ) 47 | } 48 | 49 | ) 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /components/switch/demo/basic.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react' 2 | import { View, Text, StyleSheet } from 'react-native' 3 | import { Switch } from '../..' 4 | 5 | const { SwitchItem } = Switch 6 | 7 | export default () => { 8 | const [checked, onChange] = useState(false) 9 | return ( 10 | 11 | 12 | Switch 13 | 14 | 受控 15 | onChange(!checked)} 18 | style={styles.switch} 19 | /> 20 | 默认选中 21 | 25 | 不可选状态 26 | 31 | 32 | SwitchItem 33 | 34 | onChange(!checked)} 37 | > 38 | 文本1(受控) 39 | 40 | 43 | 文本2(默认选中) 44 | 45 | 49 | 文本3(不可选状态) 50 | 51 | 52 | ) 53 | } 54 | 55 | const styles = StyleSheet.create({ 56 | wrap: { 57 | flex: 1, 58 | }, 59 | title: { 60 | fontSize: 14, 61 | color: '#1F2530', 62 | paddingVertical: 10, 63 | paddingLeft: 15, 64 | }, 65 | boldTitle: { 66 | fontSize: 16, 67 | color: '#1F2530', 68 | paddingVertical: 10, 69 | paddingLeft: 10, 70 | fontWeight: '500', 71 | }, 72 | switch: { 73 | marginBottom: 10, 74 | marginLeft: 15, 75 | }, 76 | }) 77 | -------------------------------------------------------------------------------- /components/switch/index.js: -------------------------------------------------------------------------------- 1 | import Switch from './Switch' 2 | import SwitchItem from './SwitchItem' 3 | 4 | Switch.SwitchItem = SwitchItem 5 | 6 | export default Switch 7 | -------------------------------------------------------------------------------- /components/switch/style/index.js: -------------------------------------------------------------------------------- 1 | import { StyleSheet } from 'react-native' 2 | 3 | export default (theme) => StyleSheet.create({ 4 | wrapper: { 5 | flexDirection: 'row', 6 | alignItems: 'center', 7 | justifyContent: 'space-between', 8 | height: theme.checkbox_item_height, 9 | backgroundColor: theme.fill_base, 10 | paddingLeft: theme.h_spacing_lg, 11 | paddingRight: theme.h_spacing_lg, 12 | }, 13 | switch: { 14 | width: 51, 15 | height: 31, 16 | borderRadius: 31 / 2, 17 | flexDirection: 'row', 18 | alignItems: 'center', 19 | }, 20 | switchBtn: { 21 | width: 51, 22 | height: 31, 23 | borderRadius: 31 / 2, 24 | flexDirection: 'row', 25 | alignItems: 'center', 26 | }, 27 | switchThumb: { 28 | width: 28, 29 | height: 28, 30 | borderRadius: 28 / 2, 31 | position: 'absolute', 32 | }, 33 | itemText: { 34 | fontSize: theme.font_size_caption, 35 | color: theme.color_text_base, 36 | }, 37 | disabledItemText: { 38 | color: theme.color_text_info, 39 | }, 40 | line: { 41 | backgroundColor: theme.border_color_base, 42 | height: theme.border_width_sm, 43 | position: 'absolute', 44 | left: theme.h_spacing_lg, 45 | right: 0, 46 | bottom: 0, 47 | }, 48 | }) 49 | -------------------------------------------------------------------------------- /components/textarea/style/index.js: -------------------------------------------------------------------------------- 1 | import { StyleSheet } from 'react-native' 2 | 3 | export default (theme) => StyleSheet.create({ 4 | container: { 5 | borderBottomWidth: theme.border_width_sm, 6 | borderBottomColor: theme.border_color_base, 7 | backgroundColor: theme.fill_base, 8 | }, 9 | labelWarp: { 10 | marginRight: theme.h_spacing_lg, 11 | marginTop: theme.h_spacing_lg, 12 | marginBottom: theme.v_spacing_sm, 13 | flexDirection: 'row', 14 | alignItems: 'center', 15 | }, 16 | label: { 17 | fontSize: theme.font_size_base, 18 | color: theme.color_text_base, 19 | }, 20 | inputWrapper: { 21 | flex: 1, 22 | flexDirection: 'row', 23 | }, 24 | input: { 25 | fontSize: theme.font_size_base, 26 | lineHeight: Math.round(1.3 * theme.font_size_base), 27 | textAlignVertical: 'top', 28 | color: theme.color_text_base, 29 | paddingRight: 0, 30 | }, 31 | inputDisabled: { 32 | color: theme.color_text_disabled, 33 | }, 34 | count: { 35 | position: 'absolute', 36 | right: theme.h_spacing_lg, 37 | bottom: theme.h_spacing_md, 38 | color: theme.color_text_info, 39 | }, 40 | clear: { 41 | paddingTop: 13, 42 | paddingRight: 9, 43 | }, 44 | RequiredText: { 45 | fontSize: theme.font_size_base, 46 | color: 'red', 47 | marginLeft: 3.5, 48 | marginRight: 6, 49 | }, 50 | }) 51 | -------------------------------------------------------------------------------- /components/utils/AsyncStorage.js: -------------------------------------------------------------------------------- 1 | export { default } from '@react-native-community/async-storage' 2 | -------------------------------------------------------------------------------- /components/utils/AsyncStorage.web.js: -------------------------------------------------------------------------------- 1 | export { AsyncStorage as default } from 'react-native' 2 | -------------------------------------------------------------------------------- /components/utils/KeyboardType.js: -------------------------------------------------------------------------------- 1 | export const keyboardTypeArray = [ 2 | 'default', 3 | 'email-address', 4 | 'numeric', 5 | 'phone-pad', 6 | 'ascii-capable', 7 | 'numbers-and-punctuation', 8 | 'url', 9 | 'number-pad', 10 | 'name-phone-pad', 11 | 'decimal-pad', 12 | 'twitter', 13 | 'web-search', 14 | 'visible-password', 15 | ] 16 | -------------------------------------------------------------------------------- /docker-compose.yml: -------------------------------------------------------------------------------- 1 | version: "3" 2 | 3 | services: 4 | docusaurus: 5 | build: . 6 | ports: 7 | - 3000:3000 8 | - 35729:35729 9 | volumes: 10 | - ./docs:/app/docs 11 | - ./website/blog:/app/website/blog 12 | - ./website/core:/app/website/core 13 | - ./website/i18n:/app/website/i18n 14 | - ./website/pages:/app/website/pages 15 | - ./website/static:/app/website/static 16 | - ./website/sidebars.json:/app/website/sidebars.json 17 | - ./website/siteConfig.js:/app/website/siteConfig.js 18 | working_dir: /app/website 19 | -------------------------------------------------------------------------------- /docs/ActionSheet.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: ActionSheet 3 | title: ActionSheet 4 | sidebar_label: ActionSheet 5 | --- 6 | 7 | ActionSheet 8 | 9 | ## Basic Example: 10 | ```SnackPlayer name=ActionSheet-simple 11 | import React from 'react' 12 | import { 13 | ActionSheet, 14 | Button, 15 | } from 'mcloud-mobile' 16 | 17 | export default class extends React.Component { 18 | state={ 19 | options:['text','value'], 20 | } 21 | render() { 22 | const { 23 | options, 24 | } = this.state 25 | return ( 26 | <> 27 | 38 | this.actionSheet = e} 40 | options={options} 41 | disabledIndexArrary={[5]} 42 | title="zhe是标题dfshdfshuhgiuhdubhdsfiubhdsiufhb" 43 | customColors={[{ color:'red',cellIndex:2 }]} 44 | cellHeight={160} 45 | /> 46 | 47 | ) 48 | } 49 | } 50 | 51 | 52 | ``` 53 | ## Props: 54 | 55 | 属性 | 说明 | 类型 | 默认值 56 | ----|-----|------|------ 57 | | options | 选项 | array | 无 | 58 | | showCancel | 是否显示cancel选项 | bool | true | 59 | | cancel | 取消点击事件 | func | 无 | 60 | | onPress | 按钮选中事件 | func | 无 | 61 | | disabledIndexArrary | 不可选择选项数组 | array | 无 | 62 | | styles | 自定义样式 | Object | 无 | 63 | | title | 标题，最多显示两行 | string | 无 | 64 | | checkedIndex | 选中的索引(-1即为不带选中样式) | number | -1 | 65 | | lines | 选项的行数 | number | 1 | 66 | | customColors | 指定行颜色 | array[ {color:自定义颜色,cellIndex:行数} ] | [] | 67 | | cellHeight | 行高 | number | 50 | -------------------------------------------------------------------------------- /docs/ActivityIndicator.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: ActivityIndicator 3 | title: ActivityIndicator 4 | sidebar_label: ActivityIndicator 5 | --- 6 | 7 | ActivityIndicator 8 | 9 | ## Basic Example: 10 | 11 | ```SnackPlayer name=activity-indicator-simple 12 | import React from 'react' 13 | import { View,ScrollView } from 'react-native' 14 | import { ActivityIndicator } from "mcloud-mobile"; 15 | 16 | const ViewTop = () => ( 17 | 18 | ) 19 | 20 | export default () => ( 21 | 22 | 23 | 24 | 25 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | ) 45 | ``` 46 | 47 | ## Props: 48 | 49 | 属性 | 说明 | 类型 | 默认值 50 | ----|-----|------|------ 51 | | size | 指示器大小，可选值为`large`、`small` | string | `small`| 52 | | color | 指示器颜色，可选值为`gray`、`white`、`颜色值` | string | `gray`| 53 | | animating | 是否显示 | boolean | `true`| 54 | | toast | 是否是toast模式，true为浮层toast模式，阻塞 下层控件操作，false为占位模式 | boolean | `fase`| 55 | | text | 指示器显示文字 | string | 无 | 56 | | textStyle | 自定义指示器文字样式 | Object | 无 | 57 | | style | 自定义样式 | Object | 无 | 58 | -------------------------------------------------------------------------------- /docs/Avatar.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: Avatar 3 | title: Avatar 4 | sidebar_label: Avatar 5 | --- 6 | 7 | Avatar 8 | 9 | ## Basic Example: 10 | ```SnackPlayer name=avatar-simple 11 | import React from 'react' 12 | import { 13 | View, 14 | } from 'react-native' 15 | import { Avatar } from 'mcloud-mobile' 16 | 17 | export default class AvatarDemo extends React.Component { 18 | render() { 19 | return ( 20 | 28 | 32 | 35 | 38 | 39 | ) 40 | } 41 | } 42 | 43 | ``` 44 | 45 | ## Props: 46 | 47 | 属性 | 说明 | 类型 | 默认值 48 | ----|-----|------|------ 49 | | source | 头像资源链接 | object | 无 | 50 | | size | 头像尺寸 | number | 70 | 51 | | styles | 样式集合 | object | 无 | 52 | | type | 头像边框样式，可选值（'normal', 'white'） | string | 'normal' | 53 | | defaultAvatar | 默认头像 | object | require('./assets/default.png') | 54 | -------------------------------------------------------------------------------- /docs/Badge.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: Badge 3 | title: Badge 4 | sidebar_label: Badge 5 | --- 6 | 7 | Badge 8 | 9 | ## Basic Example: 10 | 11 | ```SnackPlayer name=Badge-simple 12 | import React from 'react' 13 | import { View } from 'react-native' 14 | import { Badge } from 'mcloud-mobile' 15 | 16 | export default () => ( 17 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | ) 32 | ``` 33 | 34 | ## Props: 35 | 36 | 属性 | 说明 | 类型 | 默认值 37 | ----|-----|------|------ 38 | | type | Badge类型，可选值为`redPoint`/`number`/`new` | string | `redPoint` | 39 | | text | 文本 | string | '' | 40 | | textStyle | 文本样式 | object | 无 | 41 | | count | 未读数，type为`number`时需要 | number | 0 | 42 | | showBadge | 是否显示红色标记 | bool | true | 43 | | style | 自定义样式 | Object | 无 | 44 | | onPress | 点击按钮的点击回调函数 | (e: Object): void | 无 | 45 | 46 | -------------------------------------------------------------------------------- /docs/Card.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: Card 3 | title: Card 4 | sidebar_label: Card 5 | --- 6 | 7 | Card 8 | 9 | ## Basic Example: 10 | 11 | ```SnackPlayer name=Card-simple 12 | import React from 'react' 13 | import { View,Dimensions } from 'react-native' 14 | import { Card } from 'mcloud-mobile' 15 | 16 | 17 | 18 | export default () => ( 19 | 26 | 31 | 38 | 44 | 51 | 63 | 64 | 65 | ) 66 | ``` 67 | 68 | ## Props: 69 | 70 | 属性 | 说明 | 类型 | 默认值 71 | ----|-----|------|------ 72 | | type | Card类型，可选值为`horizontal`/`vertical` | string | `redPoint` | 73 | | title | 标题 | string | '标题' | 74 | | titleStyle | 标题样式 | object | - | 75 | | titleNumberOfLines | 标题行数 | number | - | 76 | | content | 内容 | string | '内容' | 77 | | contentStyle | 内容样式 | object | - | 78 | | contentNumberOfLines | 内容行数 | number | 2 | 79 | | image | 图片 | object | 无 | 80 | | imageStyle | 图片样式 | object | - | 81 | | imageOnPress | 图片的点击回调函数 | (e: Object): void | 无 | 82 | | cardOnPress | card的点击回调函数 | (e: Object): void | 无 | 83 | 84 | 85 | -------------------------------------------------------------------------------- /docs/Contributing.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: Contributing 3 | title: 贡献说明 4 | sidebar_label: Contributing 5 | --- 6 | 7 | > 请遵循以下规则来贡献此项目 8 | 9 | ## Directory Structure 10 | 11 | - 组件统一在`component`目录下创建对应的Finder并实现`demo`&`style`目录以及`index.js` 12 | - 在`docs`目录下创建对应的`.md` 13 | - `example`下补充对应的demo用例 14 | 15 | ## Develop Rules 16 | 17 | - 组件的统一导出入口在`compoents/index.js`，在完成组件的实现后请对应增加导出声明 18 | - 组件业务代码不允许直接实现style，需要在对应组件目录的`style`下实现`index.js`来实现导出函数 19 | - style的实现必须以函数式实现，不允许直接声明style 20 | - style的内部样式需要以函数内的参数的属性来实现大部分属性值 21 | - 组件必须由`WithTheme`类包裹，通过`children function return`方式实现 22 | - git-hooks配置了提交时的eslint验证机制，如验证失败请修改后提交 23 | - 适配`dark mode`: 在`components/style/themes`下，默认使用`light`样式，在`dark.js`内适配，`dark`默认继承自`light`，哪些属性需要变更自行编写，保持属性名和`light`内一致即可 24 | 25 | ## Doc Rules 26 | 27 | - 每个组件必须配备`.md`说明 28 | - doc内的id属性必须是唯一性，`title & sidebar_label`属性自行定义 29 | - doc内由3部分组成 30 | - Description 描述 31 | - Example 示例代码(必须要保证示例代码的正确性，如果需要添加第三方依赖，请在`website/core/RemarkablePlugins.js`内的`data-snack-dependencies`属性上对应增加) 32 | - Props 两种形态的props描述，请参照.md 33 | - `.md`完成后需要对应在`website/sidebars.json`中根据目录规则，添加自定义的`.md id`属性 34 | - 调试website：`cd website & yarn start` 35 | - 需要保证doc和component的匹配准确性，doc编辑完成后需要调试`website`来验证效果 36 | 37 | ## Example Develop 38 | - 在`/example/componentList`内参照示例补充调试用例 39 | - ios: `/ xcode run` 40 | - android: `/ android studio run` 41 | 42 | ## TODO 43 | - 配置 github commit auto build component and publish npm 44 | - 配置 github pull request auto run website build and publish github.io -------------------------------------------------------------------------------- /docs/CountDownView.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: CountDownView 3 | title: CountDownView 4 | sidebar_label: CountDownView 5 | --- 6 | 7 | CountDownView 8 | 9 | ## Basic Example: 10 | 11 | ```SnackPlayer name=activity-indicator-simple 12 | import React from 'react' 13 | import { View,ScrollView } from 'react-native' 14 | import { CountDownView } from "mcloud-mobile"; 15 | 16 | const ViewTop = () => ( 17 | 18 | ) 19 | 20 | export default () => ( 21 | 22 | 23 | 24 | 25 | 26 | ) 27 | ``` 28 | 29 | ## Props: 30 | 31 | 属性 | 说明 | 类型 | 默认值 32 | ----|-----|------|------ 33 | | text | 初始显示文本 | string | `获取验证码`| 34 | | waitingText | 倒计时显示文本，不包括计数部分 | string | `已发送`| 35 | | resendText| 倒计时结束显示文本 | string | `重新发送`| 36 | | seconds | 倒计时时间 | number | `60`| 37 | | onPress | 点击按钮的点击回调函数 | (e: Object): void | 无 | 38 | | textStyle | 自定义指示器文字样式 | Object | 无 | 39 | | style | 自定义样式 | Object | 无 | 40 | -------------------------------------------------------------------------------- /docs/DatePicker.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: DatePicker 3 | title: DatePicker 4 | sidebar_label: DatePicker 5 | --- 6 | 7 | Badge 8 | 9 | ## Basic Example: 10 | 11 | ```SnackPlayer name=Badge-simple 12 | import React from 'react' 13 | import { View } from 'react-native' 14 | import { DatePicker, List } from 'mcloud-mobile' 15 | 16 | export default class extends React.Component { 17 | state = { 18 | value: undefined, 19 | } 20 | onChange = (value) => { 21 | this.setState({ value }) 22 | } 23 | render() { 24 | const { 25 | value, 26 | } = this.state 27 | return ( 28 | 29 | 30 | 40 | Select Date 41 | 42 | 43 | 44 | ) 45 | } 46 | } 47 | 48 | ``` 49 | 50 | ## Props: 51 | 52 | 属性 | 说明 | 类型 | 默认值 53 | ----|-----|------|------ 54 | | mode | 日期选择的类型, 可以是日期`date`,时间`time`,日期+时间`datetime`,年`year`,月`month` | String | `date` | 55 | | value | 当前选中时间 | Date | 无 | 56 | | defaultDate | 默认选中时间 | Date | 无 | 57 | | minDate | 最小可选日期 | Date | 2000-1-1 | 58 | | maxDate | 最大可选日期 | Date | 2030-1-1 | 59 | | minuteStep | 分钟数递增步长设置 | Number | 1 | 60 | | disabled | 是否不可用 | Boolean | false | 61 | | onChange | 时间发生变化的回调函数 | (date: Object): void | - | 62 | | onValueChange | 每列 picker 改变时的回调 | (vals: any, index: number) => void | - | 63 | | format | 格式化选中的值 | `(value: Date) => date string` / `format string`(对应 mode 下格式分别为:`YYYY-MM-DD`,`HH:mm`,`YYYY-MM-DD HH:mm`) | - | 64 | | title | 弹框的标题 | string/React.ReactElement | 无 | 65 | | itemStyle | itemStyle | StyleProp; 66 | | - | 67 | | extra | 显示文案 | String | `请选择` | 68 | | onOk | 点击选中时执行的回调 | (val): void | 无 | 69 | | onDismiss | 点击取消时执行的回调 | (): void | 无 | 70 | 71 | 注意：日期字符串在不同浏览器有不同的实现，例如 `new Date('2017-1-1')` 在 Safari 上是 Invalid Date，而在 Chrome 上是能正常解析的。 72 | 73 | 注意：`DatePicker` children 建议是 `List.Item`, 如果不是，需要是自定义组件(组件内需处理 `onClick` / `extra` / `children` 属性 74 | -------------------------------------------------------------------------------- /docs/EmptyView.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: EmptyView 3 | title: EmptyView 4 | sidebar_label: EmptyView 5 | --- 6 | 7 | EmptyView 8 | 9 | ## Basic Example: 10 | 11 | ```SnackPlayer name=empty-simple 12 | import React from 'react' 13 | import { View, StyleSheet } from 'react-native' 14 | import { EmptyView } from 'mcloud-mobile'; 15 | 16 | export default () => ( 17 | {}}> 18 | 很抱歉，加载失败了 19 | 20 | 21 | // 22 | // 暂无数据 23 | // 24 | ) 25 | 26 | 27 | ``` 28 | ## Props: 29 | 30 | 属性 | 说明 | 类型 | 默认值 31 | ----|-----|------|------ 32 | | type | 缺省页类型，可选值为 `'no_image'(无image)` 、 `'network_failed'(网络加载失败)` 、 `'no_data'(暂无数据)` 或者 `'custom'(手动传image)`| string | - | 33 | | emptyImage | image可选，可不传 | Object | - | 34 | | onRefresh | 刷新方法,可选,不传则没有重新加载按钮 | func | - | 35 | | style | 自定义样式 | Object | 无 | 36 | -------------------------------------------------------------------------------- /docs/Label.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: Label 3 | title: Label 4 | sidebar_label: Label 5 | --- 6 | 7 | Label 8 | 9 | ## Basic Example: 10 | 11 | ```SnackPlayer name=label-simple 12 | import React from 'react' 13 | import { View, Text, StyleSheet } from 'react-native' 14 | import { Label } from 'mcloud-mobile'; 15 | 16 | export default () => ( 17 | 18 | 19 | SmallLabel 20 | 21 | 22 | 25 | 28 | 29 | 30 | LargeLabel 31 | 32 | 33 | 43 | 53 | 54 | 55 | ) 56 | const styles = StyleSheet.create({ 57 | wrap: { 58 | flex: 1, 59 | backgroundColor: '#E6E6E6', 60 | }, 61 | multiStyle:{ 62 | width:120, 63 | marginLeft:20, 64 | }, 65 | defaultStyle:{ 66 | marginLeft: 20, 67 | backgroundColor:'#969FB5', 68 | }, 69 | cellStyle:{ 70 | marginTop:10, 71 | flexDirection:'row', 72 | }, 73 | boldTitle: { 74 | marginTop:10, 75 | fontSize: 16, 76 | color: '#1F2530', 77 | paddingVertical: 10, 78 | paddingLeft: 10, 79 | fontWeight: '500', 80 | }, 81 | }) 82 | ``` 83 | ## Props: 84 | 85 | 属性 | 说明 | 类型 | 默认值 86 | ----|-----|------|------ 87 | | type | 标签文本颜色，可选值为 `white(白色)` 或者 `black(黑色)` | string | - | 88 | | textType | 标签文本大小，可选值为 `smallText(小)` 或者 `largeText(大)` | string | - | 89 | | disabled | 标签是否可点击, 不可点击 (true), 可设置点击(false) | bool | 不可点击(true) | 90 | | onPress | 点击事件 | func | - | 91 | | size | 标签大小，可选值为 `small(小)` 或者 `large(大)` | string | - | 92 | | style | 自定义样式 | Object | 无 | 93 | -------------------------------------------------------------------------------- /docs/Marquee.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: Marquee 3 | title: Marquee 4 | sidebar_label: Marquee 5 | --- 6 | 7 | 滚动文字组件 8 | 9 | ## Basic Example: 10 | 11 | ```SnackPlayer name=marquee-simple 12 | import React from 'react' 13 | import { View } from 'react-native' 14 | import { Marquee } from 'mcloud-mobile' 15 | 16 | export default class MarqueeDemo extends React.Component { 17 | render() { 18 | return ( 19 | 20 | 21 | 22 | ) 23 | } 24 | } 25 | ``` 26 | 27 | ## Props: 28 | 29 | 属性 | 说明 | 类型 | 默认值 30 | ----|-----|------|------ 31 | | speed | 文字滚动速度 | number | 80 | 32 | | text | 滚动文字内容 | string | ''| 33 | | maxWidth | 文字区域最大长度 | number | 1200 | 34 | | loop | 是否滚动 | boolean | true | 35 | | startDelay | 开始滚动前延时时间ms | number | 1000 | 36 | | resetDelay | 返回开始位置前延时时间ms | number | 800 | 37 | -------------------------------------------------------------------------------- /docs/NoticeBar.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: NoticeBar 3 | title: NoticeBar 4 | sidebar_label: NoticeBar 5 | --- 6 | 7 | 提示信息组件 8 | 9 | ## Basic Example: 10 | 11 | ```SnackPlayer name=notice-simple 12 | import React from 'react' 13 | import { View } from 'react-native' 14 | import { NoticeBar } from 'mcloud-mobile' 15 | 16 | const apiText = 'Some very long text needed scroll to view all of them and loop over.' 17 | 18 | export default class NoticeBarDemo extends React.Component { 19 | render() { 20 | return ( 21 | 22 | 23 | 28 | 34 | 40 | 41 | ) 42 | } 43 | } 44 | ``` 45 | 46 | ## Props: 47 | 48 | 属性 | 说明 | 类型 | 默认值 49 | ----|-----|------|------ 50 | | textStyle | 文字样式 | object | | 51 | | iconLeft | 是否显示左侧图标 | boolean | true | 52 | | iconSource | 图标资源 | any | | 53 | | numberOfLines | 行数 | number | 1 | 54 | | marquee | 是否单行滚动 | boolean | false | 55 | | marqueeProps | 滚动属性 | object | | 56 | | closeType | 关闭方式'none','close','never' | string | 'none' | 57 | | closeStyle | 关闭按钮样式 | object | | 58 | | text | 提示信息内容 | string | '' | 59 | | onDismiss | 关闭回调 | function | null | 60 | | neverShowKey | 不再提示的本地存储Key值 | string | 'NeverShow' | 61 | -------------------------------------------------------------------------------- /docs/SegmentedControl.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: SegmentedControl 3 | title: SegmentedControl 4 | sidebar_label: SegmentedControl 5 | --- 6 | 7 | SegmentedControl 8 | 9 | ## Basic Example: 10 | 11 | ```SnackPlayer name=SegmentedControl-simple 12 | import React from 'react'; 13 | import { SafeAreaView, View, FlatList, StyleSheet, Text } from 'react-native'; 14 | import Constants from 'expo-constants'; 15 | import { SegmentedControl } from "mcloud-mobile"; 16 | 17 | 18 | export default function App() { 19 | return ( 20 | 21 | 22 | {},() => {}]} 27 | style={{ marginTop:20 }} 28 | /> 29 | {},() => {}]} 33 | type='special' 34 | style={{ marginTop:20 }} 35 | /> 36 | {},() => {},() => {}]} 40 | type='special' 41 | style={{ marginTop:20,width:300 }} 42 | /> 43 | 44 | 45 | ); 46 | } 47 | 48 | const styles = StyleSheet.create({ 49 | container: { 50 | flex: 1, 51 | marginTop: Constants.statusBarHeight, 52 | alignItems:'center' 53 | }, 54 | }); 55 | ``` 56 | 57 | ## Props: 58 | 59 | 属性 | 说明 | 类型 | 默认值 60 | ----|-----|------|------ 61 | | type | SegmentedControl类型，可选值为`default`/`special` | string | `default` | 62 | | disabled | 设置禁用 | boolean | false | 63 | | segments | 按钮的个数 | number | 2 | 64 | | titles | 按钮的title | 元素为string类型的数组 | 无 | 65 | | onPressMethods | 按钮点击的回调函数 | 元素为函数类型的数组 | 无 | 66 | | selectedIndex | 初始选中哪个按钮 | number | 0 | 67 | | style | 自定义样式 | Object | 无 | 68 | 69 | -------------------------------------------------------------------------------- /docs/ShareSheet.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: ShareSheet 3 | title: ShareSheet 4 | sidebar_label: ShareSheet 5 | --- 6 | 7 | ShareSheet 8 | 9 | ## Basic Example: 10 | ```SnackPlayer name=ShareSheet-simple 11 | import React from 'react' 12 | import { 13 | ShareSheet, 14 | Button, 15 | } from 'mcloud-mobile' 16 | 17 | export default class extends React.Component { 18 | state={ 19 | options:['text','value'], 20 | } 21 | render() { 22 | const { 23 | options, 24 | } = this.state 25 | return ( 26 | <> 27 | 36 | this.actionSheet = e} 38 | options={['qq','qzone']} 39 | disabledIndexArrary={[5]} 40 | title="zhe是标题dfshdfshuhgiuhdubhdsfiubhdsiufhb" 41 | onPress={(key) => console.log(key)} 42 | /> 43 | 44 | ) 45 | } 46 | } 47 | 48 | 49 | ``` 50 | ## Props: 51 | 52 | 属性 | 说明 | 类型 | 默认值 53 | ----|-----|------|------ 54 | | options | 选项可选项['qq','qzone','friend','wechat','weibo']| array | 无 | 55 | | customItem | 自定义分享类型，遵循格式：[{ image:'', title:'', key:'' }] | array | 无 | 56 | | cancel | 取消点击事件 | func | 无 | 57 | | onPress | 按钮选中事件(key)=>{} ,key为分享类型 | func | 无 | 58 | | styles | 自定义样式 | Object | 无 | -------------------------------------------------------------------------------- /docs/Stepper.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: Stepper 3 | title: Stepper 4 | sidebar_label: Stepper 5 | --- 6 | 7 | 加减操作 8 | 9 | ## Basic Example: 10 | 11 | ```SnackPlayer name=stepper-simple 12 | import { StyleSheet } from 'react-native' 13 | import { Stepper } from 'mCloud-mobile'; 14 | 15 | export default () => { 16 | return ( 17 | 18 | {}} 25 | /> 26 | 27 | ) 28 | } 29 | 30 | const styles = StyleSheet.create({ 31 | warp: { 32 | flex: 1, 33 | backgroundColor: '#E6E6E6', 34 | } 35 | }) 36 | 37 | 38 | ``` 39 | 40 | ## Stepper Props 41 | 42 | 属性 | 说明 | 类型 | 默认值 43 | ----|-----|------|------ 44 | | min | 最小值 | number | 0 | 45 | | max | 最大值 | number | 100 | 46 | | step | 每次操作加减数 | number | 1 | 47 | | defaultValue | 默认值 | number | 50 | 48 | | value | 当前值 | number | 无 | 49 | | unit | 文字后面的单位 | String | 无 | 50 | | onChange | change事件触发的回调函数 | (e: Object): e.value | 无 | 51 | 52 | -------------------------------------------------------------------------------- /docs/exampledoc4.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: doc4 3 | title: Button 4 | --- 5 | 6 | this is another document 7 | -------------------------------------------------------------------------------- /docs/exampledoc5.md: -------------------------------------------------------------------------------- 1 | --- 2 | id: doc5 3 | title: Fifth Document 4 | --- 5 | 6 | Another one 7 | -------------------------------------------------------------------------------- /example/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import {TouchableOpacity,StyleSheet,Text} from 'react-native' 3 | import { createAppContainer } from 'react-navigation' 4 | import { createStackNavigator } from 'react-navigation-stack' 5 | import ComponentList from './componentList' 6 | import Home from './home' 7 | import {Provider} from '../components' 8 | 9 | 10 | const scenes = { 11 | Home: { 12 | screen: Home, 13 | navigationOptions: { 14 | header: null 15 | } 16 | }, 17 | } 18 | 19 | ComponentList.map((item) => { 20 | scenes[item.title] = { 21 | screen: item.example.default, 22 | navigationOptions: { 23 | title: item.title 24 | } 25 | } 26 | }) 27 | 28 | const AppNavigator = createStackNavigator(scenes) 29 | 30 | const AppContainer = createAppContainer(AppNavigator) 31 | 32 | export default class extends React.Component{ 33 | state = { 34 | theme: 'light' 35 | } 36 | render(){ 37 | const { 38 | theme 39 | } = this.state 40 | const buttonColor = theme === 'light' ? '#fff' : '#000' 41 | const textColor = theme ==='light'?'#000':'#fff' 42 | return ( 43 | 44 | 50 | 54 | 55 | {theme} 56 | 57 | 58 | 59 | ) 60 | } 61 | toggleTheme=()=>{ 62 | this.setState((state)=>({ 63 | theme: state.theme === 'light' ? 'dark' : 'light' 64 | })) 65 | } 66 | } 67 | 68 | const styles = StyleSheet.create({ 69 | themeButton:{ 70 | position:'absolute', 71 | bottom:100, 72 | right:15, 73 | height:50, 74 | width:50, 75 | borderRadius:25, 76 | alignItems:'center', 77 | justifyContent:'center', 78 | borderWidth:1 79 | }, 80 | themeText:{ 81 | fontSize:20 82 | }, 83 | }) 84 | -------------------------------------------------------------------------------- /example/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/troila-mobile/mCloud-Design-Mobile/24feb308da78aa8c3bb8c7e87466b0341b6f45da/example/logo.png -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable import/first */ 2 | import { ThemeColors } from 'react-navigation' 3 | 4 | ThemeColors.light.body = 'red' 5 | 6 | /** 7 | * @format 8 | */ 9 | import { AppRegistry } from 'react-native' 10 | import App from './example/App' 11 | import { name as appName } from './app.json' 12 | 13 | AppRegistry.registerComponent(appName, () => App) 14 | -------------------------------------------------------------------------------- /ios/Podfile: -------------------------------------------------------------------------------- 1 | platform :ios, '9.0' 2 | require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules' 3 | 4 | target 'mCloudMobile' do 5 | # Pods for mCloudMobile 6 | pod 'React', :path => '../node_modules/react-native/' 7 | pod 'React-Core', :path => '../node_modules/react-native/React' 8 | pod 'React-DevSupport', :path => '../node_modules/react-native/React' 9 | pod 'React-RCTActionSheet', :path => '../node_modules/react-native/Libraries/ActionSheetIOS' 10 | pod 'React-RCTAnimation', :path => '../node_modules/react-native/Libraries/NativeAnimation' 11 | pod 'React-RCTBlob', :path => '../node_modules/react-native/Libraries/Blob' 12 | pod 'React-RCTImage', :path => '../node_modules/react-native/Libraries/Image' 13 | pod 'React-RCTLinking', :path => '../node_modules/react-native/Libraries/LinkingIOS' 14 | pod 'React-RCTNetwork', :path => '../node_modules/react-native/Libraries/Network' 15 | pod 'React-RCTSettings', :path => '../node_modules/react-native/Libraries/Settings' 16 | pod 'React-RCTText', :path => '../node_modules/react-native/Libraries/Text' 17 | pod 'React-RCTVibration', :path => '../node_modules/react-native/Libraries/Vibration' 18 | pod 'React-RCTWebSocket', :path => '../node_modules/react-native/Libraries/WebSocket' 19 | 20 | pod 'React-cxxreact', :path => '../node_modules/react-native/ReactCommon/cxxreact' 21 | pod 'React-jsi', :path => '../node_modules/react-native/ReactCommon/jsi' 22 | pod 'React-jsiexecutor', :path => '../node_modules/react-native/ReactCommon/jsiexecutor' 23 | pod 'React-jsinspector', :path => '../node_modules/react-native/ReactCommon/jsinspector' 24 | pod 'yoga', :path => '../node_modules/react-native/ReactCommon/yoga' 25 | 26 | pod 'DoubleConversion', :podspec => '../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec' 27 | pod 'glog', :podspec => '../node_modules/react-native/third-party-podspecs/glog.podspec' 28 | pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec' 29 | pod 'RNGestureHandler', :path => '../node_modules/react-native-gesture-handler' 30 | 31 | pod 'RNCAsyncStorage', :path => '../node_modules/@react-native-community/async-storage' 32 | 33 | target 'mCloudMobileTests' do 34 | inherit! :search_paths 35 | # Pods for testing 36 | end 37 | 38 | use_native_modules! 39 | end 40 | 41 | target 'mCloudMobile-tvOS' do 42 | # Pods for mCloudMobile-tvOS 43 | 44 | target 'mCloudMobile-tvOSTests' do 45 | inherit! :search_paths 46 | # Pods for testing 47 | end 48 | 49 | end 50 | -------------------------------------------------------------------------------- /ios/mCloudMobile-tvOS/Info.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CFBundleDevelopmentRegion 6 | en 7 | CFBundleExecutable 8 | $(EXECUTABLE_NAME) 9 | CFBundleIdentifier 10 | $(PRODUCT_BUNDLE_IDENTIFIER) 11 | CFBundleInfoDictionaryVersion 12 | 6.0 13 | CFBundleName 14 | $(PRODUCT_NAME) 15 | CFBundlePackageType 16 | APPL 17 | CFBundleShortVersionString 18 | 1.0 19 | CFBundleSignature 20 | ???? 21 | CFBundleVersion 22 | 1 23 | LSRequiresIPhoneOS 24 | 25 | NSAppTransportSecurity 26 | 27 | NSExceptionDomains 28 | 29 | localhost 30 | 31 | NSExceptionAllowsInsecureHTTPLoads 32 | 33 | 34 | 35 | 36 | NSLocationWhenInUseUsageDescription 37 | 38 | UILaunchStoryboardName 39 | LaunchScreen 40 | UIRequiredDeviceCapabilities 41 | 42 | armv7 43 | 44 | UISupportedInterfaceOrientations 45 | 46 | UIInterfaceOrientationPortrait 47 | UIInterfaceOrientationLandscapeLeft 48 | UIInterfaceOrientationLandscapeRight 49 | 50 | UIViewControllerBasedStatusBarAppearance 51 | 52 | 53 | 54 | -------------------------------------------------------------------------------- /ios/mCloudMobile-tvOSTests/Info.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CFBundleDevelopmentRegion 6 | en 7 | CFBundleExecutable 8 | $(EXECUTABLE_NAME) 9 | CFBundleIdentifier 10 | org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier) 11 | CFBundleInfoDictionaryVersion 12 | 6.0 13 | CFBundleName 14 | $(PRODUCT_NAME) 15 | CFBundlePackageType 16 | BNDL 17 | CFBundleShortVersionString 18 | 1.0 19 | CFBundleSignature 20 | ???? 21 | CFBundleVersion 22 | 1 23 | 24 | 25 | -------------------------------------------------------------------------------- /ios/mCloudMobile.xcworkspace/contents.xcworkspacedata: -------------------------------------------------------------------------------- 1 | 2 | 4 | 6 | 7 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /ios/mCloudMobile.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | IDEDidComputeMac32BitWarning 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /ios/mCloudMobile.xcworkspace/xcshareddata/WorkspaceSettings.xcsettings: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | BuildSystemType 6 | Original 7 | 8 | 9 | -------------------------------------------------------------------------------- /ios/mCloudMobile/AppDelegate.h: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) Facebook, Inc. and its affiliates. 3 | * 4 | * This source code is licensed under the MIT license found in the 5 | * LICENSE file in the root directory of this source tree. 6 | */ 7 | 8 | #import 9 | #import 10 | 11 | @interface AppDelegate : UIResponder 12 | 13 | @property (nonatomic, strong) UIWindow *window; 14 | 15 | @end 16 | -------------------------------------------------------------------------------- /ios/mCloudMobile/AppDelegate.m: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) Facebook, Inc. and its affiliates. 3 | * 4 | * This source code is licensed under the MIT license found in the 5 | * LICENSE file in the root directory of this source tree. 6 | */ 7 | 8 | #import "AppDelegate.h" 9 | 10 | #import 11 | #import 12 | #import 13 | 14 | @implementation AppDelegate 15 | 16 | - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions 17 | { 18 | RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions]; 19 | RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge 20 | moduleName:@"mCloudMobile" 21 | initialProperties:nil]; 22 | 23 | rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1]; 24 | 25 | self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds]; 26 | UIViewController *rootViewController = [UIViewController new]; 27 | rootViewController.view = rootView; 28 | self.window.rootViewController = rootViewController; 29 | [self.window makeKeyAndVisible]; 30 | return YES; 31 | } 32 | 33 | - (NSURL *)sourceURLForBridge:(RCTBridge *)bridge 34 | { 35 | #if DEBUG 36 | return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil]; 37 | #else 38 | return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"]; 39 | #endif 40 | } 41 | 42 | @end 43 | -------------------------------------------------------------------------------- /ios/mCloudMobile/Images.xcassets/AppIcon.appiconset/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "images" : [ 3 | { 4 | "idiom" : "iphone", 5 | "size" : "29x29", 6 | "scale" : "2x" 7 | }, 8 | { 9 | "idiom" : "iphone", 10 | "size" : "29x29", 11 | "scale" : "3x" 12 | }, 13 | { 14 | "idiom" : "iphone", 15 | "size" : "40x40", 16 | "scale" : "2x" 17 | }, 18 | { 19 | "idiom" : "iphone", 20 | "size" : "40x40", 21 | "scale" : "3x" 22 | }, 23 | { 24 | "idiom" : "iphone", 25 | "size" : "60x60", 26 | "scale" : "2x" 27 | }, 28 | { 29 | "idiom" : "iphone", 30 | "size" : "60x60", 31 | "scale" : "3x" 32 | } 33 | ], 34 | "info" : { 35 | "version" : 1, 36 | "author" : "xcode" 37 | } 38 | } -------------------------------------------------------------------------------- /ios/mCloudMobile/Images.xcassets/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "info" : { 3 | "version" : 1, 4 | "author" : "xcode" 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /ios/mCloudMobile/Info.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CFBundleDevelopmentRegion 6 | en 7 | CFBundleDisplayName 8 | mCloudMobile 9 | CFBundleExecutable 10 | $(EXECUTABLE_NAME) 11 | CFBundleIdentifier 12 | $(PRODUCT_BUNDLE_IDENTIFIER) 13 | CFBundleInfoDictionaryVersion 14 | 6.0 15 | CFBundleName 16 | $(PRODUCT_NAME) 17 | CFBundlePackageType 18 | APPL 19 | CFBundleShortVersionString 20 | 1.0 21 | CFBundleSignature 22 | ???? 23 | CFBundleVersion 24 | 1 25 | LSRequiresIPhoneOS 26 | 27 | NSAppTransportSecurity 28 | 29 | NSAllowsArbitraryLoads 30 | 31 | NSExceptionDomains 32 | 33 | localhost 34 | 35 | NSExceptionAllowsInsecureHTTPLoads 36 | 37 | 38 | 39 | 40 | NSLocationWhenInUseUsageDescription 41 | 42 | UILaunchStoryboardName 43 | LaunchScreen 44 | UIRequiredDeviceCapabilities 45 | 46 | armv7 47 | 48 | UISupportedInterfaceOrientations 49 | 50 | UIInterfaceOrientationPortrait 51 | UIInterfaceOrientationLandscapeLeft 52 | UIInterfaceOrientationLandscapeRight 53 | 54 | UIViewControllerBasedStatusBarAppearance 55 | 56 | 57 | 58 | -------------------------------------------------------------------------------- /ios/mCloudMobile/main.m: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) Facebook, Inc. and its affiliates. 3 | * 4 | * This source code is licensed under the MIT license found in the 5 | * LICENSE file in the root directory of this source tree. 6 | */ 7 | 8 | #import 9 | 10 | #import "AppDelegate.h" 11 | 12 | int main(int argc, char * argv[]) { 13 | @autoreleasepool { 14 | return UIApplicationMain(argc, argv, nil, NSStringFromClass([AppDelegate class])); 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /ios/mCloudMobileTests/Info.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CFBundleDevelopmentRegion 6 | en 7 | CFBundleExecutable 8 | $(EXECUTABLE_NAME) 9 | CFBundleIdentifier 10 | $(PRODUCT_BUNDLE_IDENTIFIER) 11 | CFBundleInfoDictionaryVersion 12 | 6.0 13 | CFBundleName 14 | $(PRODUCT_NAME) 15 | CFBundlePackageType 16 | BNDL 17 | CFBundleShortVersionString 18 | 1.0 19 | CFBundleSignature 20 | ???? 21 | CFBundleVersion 22 | 1 23 | 24 | 25 | -------------------------------------------------------------------------------- /ios/mCloudMobileTests/mCloudMobileTests.m: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) Facebook, Inc. and its affiliates. 3 | * 4 | * This source code is licensed under the MIT license found in the 5 | * LICENSE file in the root directory of this source tree. 6 | */ 7 | 8 | #import 9 | #import 10 | 11 | #import 12 | #import 13 | 14 | #define TIMEOUT_SECONDS 600 15 | #define TEXT_TO_LOOK_FOR @"Welcome to React Native!" 16 | 17 | @interface mCloudMobileTests : XCTestCase 18 | 19 | @end 20 | 21 | @implementation mCloudMobileTests 22 | 23 | - (BOOL)findSubviewInView:(UIView *)view matching:(BOOL(^)(UIView *view))test 24 | { 25 | if (test(view)) { 26 | return YES; 27 | } 28 | for (UIView *subview in [view subviews]) { 29 | if ([self findSubviewInView:subview matching:test]) { 30 | return YES; 31 | } 32 | } 33 | return NO; 34 | } 35 | 36 | - (void)testRendersWelcomeScreen 37 | { 38 | UIViewController *vc = [[[RCTSharedApplication() delegate] window] rootViewController]; 39 | NSDate *date = [NSDate dateWithTimeIntervalSinceNow:TIMEOUT_SECONDS]; 40 | BOOL foundElement = NO; 41 | 42 | __block NSString *redboxError = nil; 43 | RCTSetLogFunction(^(RCTLogLevel level, RCTLogSource source, NSString *fileName, NSNumber *lineNumber, NSString *message) { 44 | if (level >= RCTLogLevelError) { 45 | redboxError = message; 46 | } 47 | }); 48 | 49 | while ([date timeIntervalSinceNow] > 0 && !foundElement && !redboxError) { 50 | [[NSRunLoop mainRunLoop] runMode:NSDefaultRunLoopMode beforeDate:[NSDate dateWithTimeIntervalSinceNow:0.1]]; 51 | [[NSRunLoop mainRunLoop] runMode:NSRunLoopCommonModes beforeDate:[NSDate dateWithTimeIntervalSinceNow:0.1]]; 52 | 53 | foundElement = [self findSubviewInView:vc.view matching:^BOOL(UIView *view) { 54 | if ([view.accessibilityLabel isEqualToString:TEXT_TO_LOOK_FOR]) { 55 | return YES; 56 | } 57 | return NO; 58 | }]; 59 | } 60 | 61 | RCTSetLogFunction(RCTDefaultLogFunction); 62 | 63 | XCTAssertNil(redboxError, @"RedBox error: %@", redboxError); 64 | XCTAssertTrue(foundElement, @"Couldn't find element with text '%@' in %d seconds", TEXT_TO_LOOK_FOR, TIMEOUT_SECONDS); 65 | } 66 | 67 | 68 | @end 69 | -------------------------------------------------------------------------------- /metro.config.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Metro configuration for React Native 3 | * https://github.com/facebook/react-native 4 | * 5 | * @format 6 | */ 7 | 8 | module.exports = { 9 | transformer: { 10 | getTransformOptions: async () => ({ 11 | transform: { 12 | experimentalImportSupport: false, 13 | inlineRequires: false, 14 | }, 15 | }), 16 | }, 17 | }; 18 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "mcloud-mobile", 3 | "version": "1.1.1", 4 | "main":"components/index.js", 5 | "scripts": { 6 | "start": "react-native start", 7 | "test": "jest", 8 | "lint": "eslint .", 9 | "pre-lint": "eslint $(git diff-index --cached HEAD --name-only --diff-filter ACMR | egrep '.js$')" 10 | }, 11 | "pre-commit": [ 12 | "pre-lint" 13 | ], 14 | "dependencies": { 15 | "@react-native-community/async-storage": "^1.6.2", 16 | "array-tree-filter": "^2.1.0", 17 | "deepmerge": "^4.0.0", 18 | "lodash": "^4.17.19", 19 | "prop-types": "^15.7.2", 20 | "react-native-reanimated": "^1.7.1", 21 | "react-native-tab-view": "^2.13.0" 22 | }, 23 | "devDependencies": { 24 | "@babel/core": "^7.6.0", 25 | "@babel/runtime": "^7.6.0", 26 | "@react-native-community/eslint-config": "^0.0.5", 27 | "babel-eslint": "^10.0.3", 28 | "babel-jest": "^24.9.0", 29 | "eslint": "^6.4.0", 30 | "eslint-config-airbnb": "^18.0.1", 31 | "eslint-plugin-babel": "^5.3.0", 32 | "eslint-plugin-import": "^2.18.2", 33 | "eslint-plugin-jsx-a11y": "^6.2.3", 34 | "eslint-plugin-prettier": "^3.1.1", 35 | "eslint-plugin-react": "^7.14.3", 36 | "eslint-plugin-react-hooks": "^2.0.1", 37 | "eslint-plugin-react-native": "^3.7.0", 38 | "jest": "^24.9.0", 39 | "metro-react-native-babel-preset": "^0.56.0", 40 | "patch-package": "^6.2.0", 41 | "postinstall-postinstall": "^2.0.0", 42 | "pre-commit": "^1.2.2", 43 | "prettier": "^1.18.2", 44 | "react": "16.8.6", 45 | "react-native": "0.60.5", 46 | "react-native-fast-image": "^7.0.2", 47 | "react-native-gesture-handler": "^1.6.1", 48 | "react-native-screens": "^1.0.0-alpha.23", 49 | "react-navigation": "^4.0.5", 50 | "react-navigation-stack": "^1.8.0", 51 | "react-test-renderer": "16.8.6" 52 | }, 53 | "jest": { 54 | "preset": "react-native" 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /patches/@react-native-community+eslint-config+0.0.5.patch: -------------------------------------------------------------------------------- 1 | diff --git a/node_modules/@react-native-community/eslint-config/index.js b/node_modules/@react-native-community/eslint-config/index.js 2 | index d1cfc69..bfc0f92 100644 3 | --- a/node_modules/@react-native-community/eslint-config/index.js 4 | +++ b/node_modules/@react-native-community/eslint-config/index.js 5 | @@ -18,7 +18,7 @@ module.exports = { 6 | 7 | plugins: [ 8 | 'eslint-comments', 9 | - 'prettier', 10 | + // 'prettier', 11 | 'react', 12 | 'react-hooks', 13 | 'react-native', 14 | @@ -216,7 +216,7 @@ module.exports = { 15 | 16 | // Prettier Plugin 17 | // https://github.com/prettier/eslint-plugin-prettier 18 | - 'prettier/prettier': 2, 19 | + // 'prettier/prettier': 2, 20 | 21 | // Stylistic Issues 22 | // These rules are purely matters of style and are quite subjective. 23 | -------------------------------------------------------------------------------- /patches/@react-navigation+core+3.5.1.patch: -------------------------------------------------------------------------------- 1 | diff --git a/node_modules/@react-navigation/core/lib/module/ThemeColors.js b/node_modules/@react-navigation/core/lib/module/ThemeColors.js 2 | index f4abb13..fade339 100644 3 | --- a/node_modules/@react-navigation/core/lib/module/ThemeColors.js 4 | +++ b/node_modules/@react-navigation/core/lib/module/ThemeColors.js 5 | @@ -1,2 +1,2 @@ 6 | -export default{light:{header:'#fff',headerBorder:'#a7a7aa',body:'#fff',bodyBorder:'#a7a7aa',bodyContent:'#fff',label:'rgba(0, 0, 0, 0.9)'},dark:{header:'#2a2a2a',headerBorder:'#3a3a3a',body:'#000',bodyBorder:'#343434',bodyContent:'#2a2a2a',label:'#fff'}}; 7 | +export default { light: { header: '#fff', headerBorder: '#a7a7aa', body: '#E6E6E6', bodyBorder: '#a7a7aa', bodyContent: '#fff', label: 'rgba(0, 0, 0, 0.9)' }, dark: { header: '#2a2a2a', headerBorder: '#3a3a3a', body:'#030722',bodyBorder:'#343434',bodyContent:'#2a2a2a',label:'#fff'}}; 8 | //# sourceMappingURL=ThemeColors.js.map 9 | \ No newline at end of file 10 | -------------------------------------------------------------------------------- /website/blog/2017-09-25-testing-rss.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Adding RSS Support - RSS Truncation Test 3 | author: Eric Nakagawa 4 | authorURL: http://twitter.com/ericnakagawa 5 | authorFBID: 661277173 6 | --- 7 | 1234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890 8 | 9 | This should be truncated. 10 | 11 | This line should never render in XML. 12 | -------------------------------------------------------------------------------- /website/blog/2017-09-26-adding-rss.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Adding RSS Support 3 | author: Eric Nakagawa 4 | authorURL: http://twitter.com/ericnakagawa 5 | authorFBID: 661277173 6 | --- 7 | 8 | This is a test post. 9 | 10 | A whole bunch of other information. 11 | -------------------------------------------------------------------------------- /website/blog/2017-10-24-new-version-1.0.0.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: New Version 1.0.0 3 | author: Eric Nakagawa 4 | authorURL: http://twitter.com/ericnakagawa 5 | authorFBID: 661277173 6 | --- 7 | 8 | This blog post will test file name parsing issues when periods are present. 9 | -------------------------------------------------------------------------------- /website/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "scripts": { 3 | "examples": "docusaurus-examples", 4 | "start": "docusaurus-start", 5 | "build": "docusaurus-build", 6 | "publish-gh-pages": "docusaurus-publish", 7 | "write-translations": "docusaurus-write-translations", 8 | "version": "docusaurus-version", 9 | "rename-version": "docusaurus-rename-version" 10 | }, 11 | "devDependencies": { 12 | "docusaurus": "^1.13.0" 13 | }, 14 | "dependencies": { 15 | "highlight.js": "^9.15.10", 16 | "remarkable": "^2.0.0" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /website/pages/en/help.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) 2017-present, Facebook, Inc. 3 | * 4 | * This source code is licensed under the MIT license found in the 5 | * LICENSE file in the root directory of this source tree. 6 | */ 7 | 8 | const React = require('react'); 9 | 10 | const CompLibrary = require('../../core/CompLibrary.js'); 11 | 12 | const Container = CompLibrary.Container; 13 | const GridBlock = CompLibrary.GridBlock; 14 | 15 | function Help(props) { 16 | const {config: siteConfig, language = ''} = props; 17 | const {baseUrl, docsUrl} = siteConfig; 18 | const docsPart = `${docsUrl ? `${docsUrl}/` : ''}`; 19 | const langPart = `${language ? `${language}/` : ''}`; 20 | const docUrl = doc => `${baseUrl}${docsPart}${langPart}${doc}`; 21 | 22 | const supportLinks = [ 23 | { 24 | content: `Learn more using the [documentation on this site.](${docUrl( 25 | 'doc1.html', 26 | )})`, 27 | title: 'Browse Docs', 28 | }, 29 | { 30 | content: 'Ask questions about the documentation and project', 31 | title: 'Join the community', 32 | }, 33 | { 34 | content: "Find out what's new with this project", 35 | title: 'Stay up to date', 36 | }, 37 | ]; 38 | 39 | return ( 40 |
41 | 42 |
43 |
44 |

Need help?

45 |
46 |

This project is maintained by a dedicated group of people.

47 | 48 |
49 | 50 |
51 | ); 52 | } 53 | 54 | module.exports = Help; 55 | -------------------------------------------------------------------------------- /website/pages/en/users.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright (c) 2017-present, Facebook, Inc. 3 | * 4 | * This source code is licensed under the MIT license found in the 5 | * LICENSE file in the root directory of this source tree. 6 | */ 7 | 8 | const React = require('react'); 9 | 10 | const CompLibrary = require('../../core/CompLibrary.js'); 11 | 12 | const Container = CompLibrary.Container; 13 | 14 | class Users extends React.Component { 15 | render() { 16 | const {config: siteConfig} = this.props; 17 | if ((siteConfig.users || []).length === 0) { 18 | return null; 19 | } 20 | 21 | const editUrl = `${siteConfig.repoUrl}/edit/master/website/siteConfig.js`; 22 | const showcase = siteConfig.users.map(user => ( 23 | 24 | {user.caption} 25 | 26 | )); 27 | 28 | return ( 29 |
30 | 31 |
32 |
33 |

Who is Using This?

34 |

This project is used by many folks

35 |
36 |
{showcase}
37 |

Are you using this project?

38 | 39 | Add your company 40 | 41 |
42 | 43 |
44 | ); 45 | } 46 | } 47 | 48 | module.exports = Users; 49 | -------------------------------------------------------------------------------- /website/sidebars.json: -------------------------------------------------------------------------------- 1 | { 2 | "docs": { 3 | "Croe": ["index","Contributing"], 4 | "First Category": ["doc2"], 5 | "Second Category": ["doc3"] 6 | }, 7 | "docs-other": { 8 | "Component": [ 9 | "Button", 10 | "SegmentedControl", 11 | "SearchBar", 12 | "Radio", 13 | "Checkbox", 14 | "Badge", 15 | "Marquee", 16 | "Switch", 17 | "InputItem", 18 | "NoticeBar", 19 | "Textarea", 20 | "List", 21 | "Card", 22 | "Picker", 23 | "Label", 24 | "EmptyView", 25 | "Stepper", 26 | "Tabs", 27 | "DatePicker", 28 | "Modal", 29 | "Avatar", 30 | "ActionSheet", 31 | "ShareSheet" 32 | ], 33 | "First Category": ["doc4", "doc5"] 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /website/static/css/custom.css: -------------------------------------------------------------------------------- 1 | /* your custom css */ 2 | 3 | @media only screen and (min-device-width: 360px) and (max-device-width: 736px) { 4 | } 5 | 6 | @media only screen and (min-width: 1024px) { 7 | } 8 | 9 | @media only screen and (max-width: 1023px) { 10 | } 11 | 12 | @media only screen and (min-width: 1400px) { 13 | } 14 | 15 | @media only screen and (min-width: 1500px) { 16 | } -------------------------------------------------------------------------------- /website/static/img/daka_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/troila-mobile/mCloud-Design-Mobile/24feb308da78aa8c3bb8c7e87466b0341b6f45da/website/static/img/daka_logo.png -------------------------------------------------------------------------------- /website/static/img/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/troila-mobile/mCloud-Design-Mobile/24feb308da78aa8c3bb8c7e87466b0341b6f45da/website/static/img/favicon.png -------------------------------------------------------------------------------- /website/static/img/oss_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/troila-mobile/mCloud-Design-Mobile/24feb308da78aa8c3bb8c7e87466b0341b6f45da/website/static/img/oss_logo.png --------------------------------------------------------------------------------