forgetest5
/
react-components-docs
1
0
Fork 1
Code Issues Pull Requests Releases Wiki Activity

新增组件划分

This commit is contained in:
BoyuZhou 2017-08-22 14:41:06 +08:00
parent 98599a2215
commit 3471699028
8 changed files with 591 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
.idea/misc.xml Normal file
View File

@ -0,0 +1,38 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="JavaScriptSettings">
<option name="languageLevel" value="JSX" />
</component>
<component name="JsFlowSettings">
<service-enabled>true</service-enabled>
<exe-path />
<annotation-enable>false</annotation-enable>
<other-services-enabled>true</other-services-enabled>
</component>
<component name="ProjectInspectionProfilesVisibleTreeState">
<entry key="Project Default">
<profile-state>
<expanded-state>
<State>
<id />
</State>
<State>
<id>CSS</id>
</State>
<State>
<id>Code quality toolsCSS</id>
</State>
<State>
<id>GeneralJavaScript</id>
</State>
<State>
<id>JavaScript</id>
</State>
<State>
<id>Node.jsJavaScript</id>
</State>
</expanded-state>
</profile-state>
</entry>
</component>
</project>

8
.idea/modules.xml Normal file
View File

@ -0,0 +1,8 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="ProjectModuleManager">
<modules>
<module fileurl="file://$PROJECT_DIR$/.idea/react-components-docs.iml" filepath="$PROJECT_DIR$/.idea/react-components-docs.iml" />
</modules>
</component>
</project>

12
.idea/react-components-docs.iml Normal file
View File

@ -0,0 +1,12 @@
<?xml version="1.0" encoding="UTF-8"?>
<module type="WEB_MODULE" version="4">
<component name="NewModuleRootManager">
<content url="file://$MODULE_DIR$">
<excludeFolder url="file://$MODULE_DIR$/.tmp" />
<excludeFolder url="file://$MODULE_DIR$/temp" />
<excludeFolder url="file://$MODULE_DIR$/tmp" />
</content>
<orderEntry type="inheritedJdk" />
<orderEntry type="sourceFolder" forTests="false" />
</component>
</module>

6
.idea/vcs.xml Normal file
View File

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="VcsDirectoryMappings">
<mapping directory="$PROJECT_DIR$" vcs="Git" />
</component>
</project>

378
.idea/workspace.xml Normal file
View File

@ -0,0 +1,378 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="ChangeListManager">
<list default="true" id="e6268886-b616-4b3f-a001-08a3385e36ae" name="Default" comment="">
<change type="NEW" beforePath="" afterPath="$PROJECT_DIR$/.idea/vcs.xml" />
<change type="NEW" beforePath="" afterPath="$PROJECT_DIR$/组件划分原则.md" />
<change type="MODIFICATION" beforePath="$PROJECT_DIR$/react编码规范.md" afterPath="$PROJECT_DIR$/react编码规范.md" />
<change type="MODIFICATION" beforePath="$PROJECT_DIR$/如何写一个标准的react组件.md" afterPath="$PROJECT_DIR$/如何写一个标准的react组件.md" />
</list>
<ignored path="$PROJECT_DIR$/.tmp/" />
<ignored path="$PROJECT_DIR$/temp/" />
<ignored path="$PROJECT_DIR$/tmp/" />
<option name="EXCLUDED_CONVERTED_TO_IGNORED" value="true" />
<option name="TRACKING_ENABLED" value="true" />
<option name="SHOW_DIALOG" value="false" />
<option name="HIGHLIGHT_CONFLICTS" value="true" />
<option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
<option name="LAST_RESOLUTION" value="IGNORE" />
</component>
<component name="ExecutionTargetManager" SELECTED_TARGET="default_target" />
<component name="FileEditorManager">
<leaf SIDE_TABS_SIZE_LIMIT_KEY="300">
<file leaf-file-name="现有组件及待开发.md" pinned="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/现有组件及待开发.md">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="-156">
<caret line="0" column="0" lean-forward="false" selection-start-line="0" selection-start-column="0" selection-end-line="0" selection-end-column="0" />
<folding />
</state>
</provider>
</entry>
</file>
<file leaf-file-name="react编码规范.md" pinned="false" current-in-tab="true">
<entry file="file://$PROJECT_DIR$/react编码规范.md">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="604">
<caret line="206" column="75" lean-forward="true" selection-start-line="206" selection-start-column="75" selection-end-line="206" selection-end-column="75" />
<folding />
</state>
</provider>
</entry>
</file>
<file leaf-file-name="组件划分原则.md" pinned="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/组件划分原则.md">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="488">
<caret line="78" column="16" lean-forward="true" selection-start-line="78" selection-start-column="16" selection-end-line="78" selection-end-column="16" />
<folding />
</state>
</provider>
</entry>
</file>
<file leaf-file-name="react组件测试流程和规范.md" pinned="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/react组件测试流程和规范.md">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="0">
<caret line="0" column="0" lean-forward="false" selection-start-line="0" selection-start-column="0" selection-end-line="0" selection-end-column="0" />
<folding />
</state>
</provider>
</entry>
</file>
<file leaf-file-name="组件版本及分支管理.md" pinned="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/组件版本及分支管理.md">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="598">
<caret line="23" column="35" lean-forward="true" selection-start-line="23" selection-start-column="35" selection-end-line="23" selection-end-column="35" />
<folding />
</state>
</provider>
</entry>
</file>
<file leaf-file-name="如何写一个标准的react组件.md" pinned="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/如何写一个标准的react组件.md">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="-956">
<caret line="41" column="14" lean-forward="true" selection-start-line="41" selection-start-column="14" selection-end-line="41" selection-end-column="14" />
<folding />
</state>
</provider>
</entry>
</file>
</leaf>
</component>
<component name="FileTemplateManagerImpl">
<option name="RECENT_TEMPLATES">
<list>
<option value="doc" />
</list>
</option>
</component>
<component name="Git.Settings">
<option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
</component>
<component name="IdeDocumentHistory">
<option name="CHANGED_PATHS">
<list>
<option value="$PROJECT_DIR$/如何写一个标准的react组件.md" />
<option value="$PROJECT_DIR$/组件划分原则.md" />
<option value="$PROJECT_DIR$/react编码规范.md" />
</list>
</option>
</component>
<component name="JsBuildToolGruntFileManager" detection-done="true" sorting="DEFINITION_ORDER" />
<component name="JsBuildToolPackageJson" detection-done="true" sorting="DEFINITION_ORDER" />
<component name="JsGulpfileManager">
<detection-done>true</detection-done>
<sorting>DEFINITION_ORDER</sorting>
</component>
<component name="ProjectFrameBounds">
<option name="x" value="-8" />
<option name="y" value="-8" />
<option name="width" value="1932" />
<option name="height" value="1092" />
</component>
<component name="ProjectLevelVcsManager">
<ConfirmationsSetting value="2" id="Add" />
</component>
<component name="ProjectView">
<navigator currentView="ProjectPane" proportions="" version="1">
<flattenPackages />
<showMembers />
<showModules />
<showLibraryContents />
<hideEmptyPackages />
<abbreviatePackageNames />
<autoscrollToSource />
<autoscrollFromSource />
<sortByType />
<manualOrder />
<foldersAlwaysOnTop value="true" />
</navigator>
<panes>
<pane id="Scope" />
<pane id="Scratches" />
<pane id="ProjectPane">
<subPane>
<PATH>
<PATH_ELEMENT>
<option name="myItemId" value="react-components-docs" />
<option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.ProjectViewProjectNode" />
</PATH_ELEMENT>
<PATH_ELEMENT>
<option name="myItemId" value="react-components-docs" />
<option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.PsiDirectoryNode" />
</PATH_ELEMENT>
</PATH>
</subPane>
</pane>
</panes>
</component>
<component name="PropertiesComponent">
<property name="settings.editor.selected.configurable" value="Settings.JavaScript" />
<property name="JavaScriptPreferStrict" value="false" />
<property name="JavaScriptWeakerCompletionTypeGuess" value="true" />
<property name="WebServerToolWindowFactoryState" value="false" />
<property name="last_opened_file_path" value="$PROJECT_DIR$" />
</component>
<component name="RunDashboard">
<option name="ruleStates">
<list>
<RuleState>
<option name="name" value="ConfigurationTypeDashboardGroupingRule" />
</RuleState>
<RuleState>
<option name="name" value="StatusDashboardGroupingRule" />
</RuleState>
</list>
</option>
</component>
<component name="RunManager">
<configuration default="true" type="DartCommandLineRunConfigurationType" factoryName="Dart Command Line Application">
<method />
</configuration>
<configuration default="true" type="DartTestRunConfigurationType" factoryName="Dart Test">
<method />
</configuration>
<configuration default="true" type="JavaScriptTestRunnerJest" factoryName="Jest">
<node-interpreter value="project" />
<working-dir value="" />
<envs />
<scope-kind value="ALL" />
<method />
</configuration>
<configuration default="true" type="JavaScriptTestRunnerKarma" factoryName="Karma">
<config-file value="" />
<node-interpreter value="project" />
<envs />
<method />
</configuration>
<configuration default="true" type="JavaScriptTestRunnerProtractor" factoryName="Protractor">
<config-file value="" />
<node-interpreter value="project" />
<envs />
<method />
</configuration>
<configuration default="true" type="JavascriptDebugType" factoryName="JavaScript Debug">
<method />
</configuration>
<configuration default="true" type="NodeJSConfigurationType" factoryName="Node.js" path-to-node="project" working-dir="">
<method />
</configuration>
<configuration default="true" type="cucumber.js" factoryName="Cucumber.js">
<option name="cucumberJsArguments" value="" />
<option name="executablePath" />
<option name="filePath" />
<method />
</configuration>
<configuration default="true" type="js.build_tools.gulp" factoryName="Gulp.js">
<node-interpreter>project</node-interpreter>
<node-options />
<gulpfile />
<tasks />
<arguments />
<envs />
<method />
</configuration>
<configuration default="true" type="js.build_tools.npm" factoryName="npm">
<command value="run" />
<scripts />
<node-interpreter value="project" />
<envs />
<method />
</configuration>
<configuration default="true" type="mocha-javascript-test-runner" factoryName="Mocha">
<node-interpreter>project</node-interpreter>
<node-options />
<working-directory />
<pass-parent-env>true</pass-parent-env>
<envs />
<ui />
<extra-mocha-options />
<test-kind>DIRECTORY</test-kind>
<test-directory />
<recursive>false</recursive>
<method />
</configuration>
</component>
<component name="ShelveChangesManager" show_recycled="false">
<option name="remove_strategy" value="false" />
</component>
<component name="TaskManager">
<task active="true" id="Default" summary="Default task">
<changelist id="e6268886-b616-4b3f-a001-08a3385e36ae" name="Default" comment="" />
<created>1502951840899</created>
<option name="number" value="Default" />
<option name="presentableId" value="Default" />
<updated>1502951840899</updated>
<workItem from="1502951842356" duration="3929000" />
<workItem from="1503381253636" duration="2775000" />
</task>
<servers />
</component>
<component name="TimeTrackingManager">
<option name="totallyTimeSpent" value="6704000" />
</component>
<component name="ToolWindowManager">
<frame x="-8" y="-8" width="1932" height="1092" extended-state="0" />
<editor active="true" />
<layout>
<window_info id="Project" active="false" anchor="left" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="true" show_stripe_button="true" weight="0.24973601" sideWeight="0.5" order="0" side_tool="false" content_ui="combo" />
<window_info id="TODO" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="6" side_tool="false" content_ui="tabs" />
<window_info id="Event Log" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="7" side_tool="true" content_ui="tabs" />
<window_info id="Run" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="2" side_tool="false" content_ui="tabs" />
<window_info id="Version Control" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="7" side_tool="false" content_ui="tabs" />
<window_info id="Structure" active="false" anchor="left" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.25" sideWeight="0.5" order="1" side_tool="false" content_ui="tabs" />
<window_info id="Terminal" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="7" side_tool="false" content_ui="tabs" />
<window_info id="Debug" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.4" sideWeight="0.5" order="3" side_tool="false" content_ui="tabs" />
<window_info id="Favorites" active="false" anchor="left" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="2" side_tool="true" content_ui="tabs" />
<window_info id="Cvs" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.25" sideWeight="0.5" order="4" side_tool="false" content_ui="tabs" />
<window_info id="Message" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="0" side_tool="false" content_ui="tabs" />
<window_info id="Commander" active="false" anchor="right" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.4" sideWeight="0.5" order="0" side_tool="false" content_ui="tabs" />
<window_info id="Inspection" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.4" sideWeight="0.5" order="5" side_tool="false" content_ui="tabs" />
<window_info id="Hierarchy" active="false" anchor="right" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.25" sideWeight="0.5" order="2" side_tool="false" content_ui="combo" />
<window_info id="Find" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="1" side_tool="false" content_ui="tabs" />
<window_info id="Ant Build" active="false" anchor="right" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.25" sideWeight="0.5" order="1" side_tool="false" content_ui="tabs" />
</layout>
</component>
<component name="TypeScriptGeneratedFilesManager">
<option name="processedProjectFiles" value="true" />
</component>
<component name="VcsContentAnnotationSettings">
<option name="myLimit" value="2678400000" />
</component>
<component name="XDebuggerManager">
<breakpoint-manager />
<watches-manager />
</component>
<component name="editorHistoryManager">
<entry file="file://$PROJECT_DIR$/现有组件及待开发.md">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="0">
<caret line="0" column="0" lean-forward="false" selection-start-line="0" selection-start-column="0" selection-end-line="0" selection-end-column="0" />
<folding />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/react编码规范.md">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="0">
<caret line="0" column="0" lean-forward="false" selection-start-line="0" selection-start-column="0" selection-end-line="0" selection-end-column="0" />
<folding />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/组件划分原则.md">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="312">
<caret line="12" column="7" lean-forward="false" selection-start-line="12" selection-start-column="7" selection-end-line="12" selection-end-column="7" />
<folding />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/如何写一个标准的react组件.md">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="1170">
<caret line="45" column="0" lean-forward="false" selection-start-line="45" selection-start-column="0" selection-end-line="45" selection-end-column="27" />
<folding />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/sass环境依赖解决.md">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="0">
<caret line="0" column="0" lean-forward="false" selection-start-line="0" selection-start-column="0" selection-end-line="0" selection-end-column="0" />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/如何写一个标准的react组件.md">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="-956">
<caret line="41" column="14" lean-forward="true" selection-start-line="41" selection-start-column="14" selection-end-line="41" selection-end-column="14" />
<folding />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/组件版本及分支管理.md">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="598">
<caret line="23" column="35" lean-forward="true" selection-start-line="23" selection-start-column="35" selection-end-line="23" selection-end-column="35" />
<folding />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/现有组件及待开发.md">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="-156">
<caret line="0" column="0" lean-forward="false" selection-start-line="0" selection-start-column="0" selection-end-line="0" selection-end-column="0" />
<folding />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/组件划分原则.md">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="488">
<caret line="78" column="16" lean-forward="true" selection-start-line="78" selection-start-column="16" selection-end-line="78" selection-end-column="16" />
<folding />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/react组件测试流程和规范.md">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="0">
<caret line="0" column="0" lean-forward="false" selection-start-line="0" selection-start-column="0" selection-end-line="0" selection-end-column="0" />
<folding />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/react编码规范.md">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="604">
<caret line="206" column="75" lean-forward="true" selection-start-line="206" selection-start-column="75" selection-end-line="206" selection-end-column="75" />
<folding />
</state>
</provider>
</entry>
</component>
</project>

22
react编码规范.md
View File

@ -184,17 +184,27 @@ export default Button;
### 常用npm包
##### keyCode
##### [keyCode](https://github.com/timoxley/keycode)
##### warning
##### bee-animate
##### [warning](https://github.com/BerkeleyTrue/warning)
##### bee-transition
```
var warning = require('warning');
##### bee-overlay
var ShouldBeTrue = false;
##### dom-helpers (3.0.0)
warning(
ShouldBeTrue,
'This thing should be true but you set to false. No soup for you!'
);
```
##### [bee-animate](https://github.com/tinper-bee/bee-animate)
##### [bee-overlay](https://github.com/tinper-bee/bee-overlay)
##### [dom-helpers (3.0.0)](https://github.com/react-bootstrap/dom-helpers)
参考链接

12
如何写一个标准的react组件.md
View File

@ -6,6 +6,16 @@
### 一、下载tinper-bee开发工具
#### 1、全局安装开发工具
如果是用友内部员工，请使用用友内部npm镜像和下载工具ynpm-tool。
```
npm install -g ynpm-tool
ynpm install
```
也可以使用npm。
```
npm install -g bee-tools
```
@ -27,6 +37,8 @@ cnpm install -g bee-tools
npm --registry https://registry.npm.taobao.org install -g bee-tools
```
#### 2、生成组件脚手架
下面以创建button组件为例

121
组件划分原则.md Normal file
View File

@ -0,0 +1,121 @@
# 组件划分原则
### 一、单一原则
一个组件只做一件事。
遵循单一原则可以让我们的组件逻辑更简单，职责更明确，复用性更好。
拆分单一原则组件也更方便我们将无状态组件改写成函数组件，来优化react性能。
```
//bad
class Panel extends Component{
render() {
return (
<div className="u-panel">
<div className="u-panel-header">
</div>
<div className="u-panel-body">
</div>
<div className="u-panel-footer">
</div>
</div>
)
}
}
//good
function PanelHeader(props) {
return (
<div className="u-panel-header">
</div>
)
}
function PanelBody(props) {
return (
<div className="u-panel-body">
</div>
)
}
function PanelHFooter(props) {
return (
<div className="u-panel-footer">
</div>
)
}
class Panel extends Component{
render() {
return (
<div className="u-panel">
<PanelHeader />
<PanelBody />
<PanelHFooter />
</div>
)
}
}
```
### 二、通用原则
我们的基础组件，只包含业务中最常用的功能和适用性最广的DOM结构。
### 三、可扩展原则
组件提供最灵活的扩展性。
- 每一个提供样式的DOM结构都允许用户传入class和style来修改样式。
- 每一个UI展示部分都提供接口允许用户替换。组件只封装交互逻辑和提供默认的组件内容。
- 对于封装逻辑的组件可以允许用户传入展示部分组件。
- 逻辑组件允许用户扩展包裹的dom元素，即允许用户传入component（props, react元素或dom元素的字符串）
来替换我们默认包裹的dom元素。
- 样式扩展
```
class Example extends Component{
render() {
let {className, style} = this.props;
return (
<div className={className} style={style}>
</div>
)
}
}
```
- 组件内容扩展
```
//默认给定一个图标
let defaultProps = {
closeIcon: <Icon type="close" />
}
class Tile extends Component{
render() {
//允许用户传入自定义的图标或按钮
let { closeIcon } = this.props;
let
return (
<div>
{ React.cloneElement(closeIcon, { className: "close-btn", onClick: this.close }) }
...
</div>
)
}
}
Tile.defaultProps = defaultProps;
```