change demo
This commit is contained in:
BoyuZhou
commit
2646517633
|
|
@ -2,14 +2,50 @@
|
||||||
<project version="4">
|
<project version="4">
|
||||||
<component name="ChangeListManager">
|
<component name="ChangeListManager">
|
||||||
<list default="true" id="fc6f46f1-46b7-479d-a1be-6709765e93ca" name="Default" comment="">
|
<list default="true" id="fc6f46f1-46b7-479d-a1be-6709765e93ca" name="Default" comment="">
|
||||||
<change type="NEW" beforePath="" afterPath="$PROJECT_DIR$/.idea/vcs.xml" />
|
<change type="NEW" beforePath="" afterPath="$PROJECT_DIR$/build/lib/multiSelect.js" />
|
||||||
<change type="MODIFICATION" beforePath="$PROJECT_DIR$/build/Table.js" afterPath="$PROJECT_DIR$/build/Table.js" />
|
<change type="NEW" beforePath="" afterPath="$PROJECT_DIR$/build/lib/sort.js" />
|
||||||
|
<change type="NEW" beforePath="" afterPath="$PROJECT_DIR$/build/lib/sum.js" />
|
||||||
|
<change type="NEW" beforePath="" afterPath="$PROJECT_DIR$/build/lib/util.js" />
|
||||||
|
<change type="NEW" beforePath="" afterPath="$PROJECT_DIR$/build/render/CheckboxRender.js" />
|
||||||
|
<change type="NEW" beforePath="" afterPath="$PROJECT_DIR$/build/render/DateRender.js" />
|
||||||
|
<change type="NEW" beforePath="" afterPath="$PROJECT_DIR$/build/render/InputRender.js" />
|
||||||
|
<change type="NEW" beforePath="" afterPath="$PROJECT_DIR$/build/render/RadioRender.js" />
|
||||||
|
<change type="NEW" beforePath="" afterPath="$PROJECT_DIR$/build/render/SelectRender.js" />
|
||||||
|
<change type="NEW" beforePath="" afterPath="$PROJECT_DIR$/demo/demolist/Demo11.js" />
|
||||||
|
<change type="NEW" beforePath="" afterPath="$PROJECT_DIR$/demo/demolist/Demo12.js" />
|
||||||
|
<change type="NEW" beforePath="" afterPath="$PROJECT_DIR$/demo/demolist/Demo13.js" />
|
||||||
|
<change type="NEW" beforePath="" afterPath="$PROJECT_DIR$/demo/demolist/Demo15.js" />
|
||||||
|
<change type="NEW" beforePath="" afterPath="$PROJECT_DIR$/docs/mixin.md" />
|
||||||
|
<change type="NEW" beforePath="" afterPath="$PROJECT_DIR$/docs/mixin_en.md" />
|
||||||
|
<change type="NEW" beforePath="" afterPath="$PROJECT_DIR$/docs/rendertype.md" />
|
||||||
|
<change type="NEW" beforePath="" afterPath="$PROJECT_DIR$/docs/rendertype_en.md" />
|
||||||
|
<change type="NEW" beforePath="" afterPath="$PROJECT_DIR$/src/lib/multiSelect.js" />
|
||||||
|
<change type="NEW" beforePath="" afterPath="$PROJECT_DIR$/src/lib/sort.js" />
|
||||||
|
<change type="NEW" beforePath="" afterPath="$PROJECT_DIR$/src/lib/sum.js" />
|
||||||
|
<change type="NEW" beforePath="" afterPath="$PROJECT_DIR$/src/lib/util.js" />
|
||||||
|
<change type="NEW" beforePath="" afterPath="$PROJECT_DIR$/src/render/CheckboxRender.js" />
|
||||||
|
<change type="NEW" beforePath="" afterPath="$PROJECT_DIR$/src/render/DateRender.js" />
|
||||||
|
<change type="NEW" beforePath="" afterPath="$PROJECT_DIR$/src/render/InputRender.js" />
|
||||||
|
<change type="NEW" beforePath="" afterPath="$PROJECT_DIR$/src/render/RadioRender.js" />
|
||||||
|
<change type="NEW" beforePath="" afterPath="$PROJECT_DIR$/src/render/SelectRender.js" />
|
||||||
|
<change type="MODIFICATION" beforePath="$PROJECT_DIR$/.idea/workspace.xml" afterPath="$PROJECT_DIR$/.idea/workspace.xml" />
|
||||||
|
<change type="MODIFICATION" beforePath="$PROJECT_DIR$/demo/TableDemo.scss" afterPath="$PROJECT_DIR$/demo/TableDemo.scss" />
|
||||||
|
<change type="MODIFICATION" beforePath="$PROJECT_DIR$/demo/demolist/Demo1.js" afterPath="$PROJECT_DIR$/demo/demolist/Demo1.js" />
|
||||||
<change type="MODIFICATION" beforePath="$PROJECT_DIR$/demo/demolist/Demo10.js" afterPath="$PROJECT_DIR$/demo/demolist/Demo10.js" />
|
<change type="MODIFICATION" beforePath="$PROJECT_DIR$/demo/demolist/Demo10.js" afterPath="$PROJECT_DIR$/demo/demolist/Demo10.js" />
|
||||||
|
<change type="MODIFICATION" beforePath="$PROJECT_DIR$/demo/demolist/Demo2.js" afterPath="$PROJECT_DIR$/demo/demolist/Demo2.js" />
|
||||||
|
<change type="MODIFICATION" beforePath="$PROJECT_DIR$/demo/demolist/Demo3.js" afterPath="$PROJECT_DIR$/demo/demolist/Demo3.js" />
|
||||||
|
<change type="MODIFICATION" beforePath="$PROJECT_DIR$/demo/demolist/Demo4.js" afterPath="$PROJECT_DIR$/demo/demolist/Demo4.js" />
|
||||||
|
<change type="MODIFICATION" beforePath="$PROJECT_DIR$/demo/demolist/Demo5.js" afterPath="$PROJECT_DIR$/demo/demolist/Demo5.js" />
|
||||||
|
<change type="MODIFICATION" beforePath="$PROJECT_DIR$/demo/demolist/Demo6.js" afterPath="$PROJECT_DIR$/demo/demolist/Demo6.js" />
|
||||||
<change type="MODIFICATION" beforePath="$PROJECT_DIR$/demo/demolist/Demo7.js" afterPath="$PROJECT_DIR$/demo/demolist/Demo7.js" />
|
<change type="MODIFICATION" beforePath="$PROJECT_DIR$/demo/demolist/Demo7.js" afterPath="$PROJECT_DIR$/demo/demolist/Demo7.js" />
|
||||||
<change type="MODIFICATION" beforePath="$PROJECT_DIR$/demo/demolist/Demo8.js" afterPath="$PROJECT_DIR$/demo/demolist/Demo8.js" />
|
<change type="MODIFICATION" beforePath="$PROJECT_DIR$/demo/demolist/Demo8.js" afterPath="$PROJECT_DIR$/demo/demolist/Demo8.js" />
|
||||||
<change type="MODIFICATION" beforePath="$PROJECT_DIR$/demo/demolist/Demo9.js" afterPath="$PROJECT_DIR$/demo/demolist/Demo9.js" />
|
<change type="MODIFICATION" beforePath="$PROJECT_DIR$/demo/demolist/Demo9.js" afterPath="$PROJECT_DIR$/demo/demolist/Demo9.js" />
|
||||||
|
<change type="MODIFICATION" beforePath="$PROJECT_DIR$/demo/index-demo-base.js" afterPath="$PROJECT_DIR$/demo/index-demo-base.js" />
|
||||||
<change type="MODIFICATION" beforePath="$PROJECT_DIR$/demo/index.js" afterPath="$PROJECT_DIR$/demo/index.js" />
|
<change type="MODIFICATION" beforePath="$PROJECT_DIR$/demo/index.js" afterPath="$PROJECT_DIR$/demo/index.js" />
|
||||||
|
<change type="MODIFICATION" beforePath="$PROJECT_DIR$/docs/api.md" afterPath="$PROJECT_DIR$/docs/api.md" />
|
||||||
|
<change type="MODIFICATION" beforePath="$PROJECT_DIR$/index.html" afterPath="$PROJECT_DIR$/index.html" />
|
||||||
<change type="MODIFICATION" beforePath="$PROJECT_DIR$/package.json" afterPath="$PROJECT_DIR$/package.json" />
|
<change type="MODIFICATION" beforePath="$PROJECT_DIR$/package.json" afterPath="$PROJECT_DIR$/package.json" />
|
||||||
|
<change type="MODIFICATION" beforePath="$PROJECT_DIR$/src/Table.scss" afterPath="$PROJECT_DIR$/src/Table.scss" />
|
||||||
</list>
|
</list>
|
||||||
<ignored path="$PROJECT_DIR$/.tmp/" />
|
<ignored path="$PROJECT_DIR$/.tmp/" />
|
||||||
<ignored path="$PROJECT_DIR$/temp/" />
|
<ignored path="$PROJECT_DIR$/temp/" />
|
||||||
|
|
@ -23,25 +59,74 @@
|
||||||
</component>
|
</component>
|
||||||
<component name="ExecutionTargetManager" SELECTED_TARGET="default_target" />
|
<component name="ExecutionTargetManager" SELECTED_TARGET="default_target" />
|
||||||
<component name="FileEditorManager">
|
<component name="FileEditorManager">
|
||||||
<leaf>
|
<leaf SIDE_TABS_SIZE_LIMIT_KEY="300">
|
||||||
<file leaf-file-name="Demo7.js" pinned="false" current-in-tab="false">
|
<file leaf-file-name="Demo7.js" pinned="false" current-in-tab="false">
|
||||||
<entry file="file://$PROJECT_DIR$/demo/demolist/Demo7.js">
|
<entry file="file://$PROJECT_DIR$/demo/demolist/Demo7.js">
|
||||||
<provider selected="true" editor-type-id="text-editor">
|
<provider selected="true" editor-type-id="text-editor">
|
||||||
<state relative-caret-position="456">
|
<state relative-caret-position="2340">
|
||||||
<caret line="81" column="41" lean-forward="false" selection-start-line="81" selection-start-column="41" selection-end-line="81" selection-end-column="41" />
|
<caret line="90" column="5" lean-forward="false" selection-start-line="90" selection-start-column="5" selection-end-line="90" selection-end-column="5" />
|
||||||
<folding>
|
<folding>
|
||||||
<element signature="n#!!doc" expanded="true" />
|
<element signature="n#!!doc" expanded="true" />
|
||||||
<element signature="e#54#93#0" expanded="true" />
|
<element signature="e#55#94#0" expanded="true" />
|
||||||
</folding>
|
</folding>
|
||||||
</state>
|
</state>
|
||||||
</provider>
|
</provider>
|
||||||
</entry>
|
</entry>
|
||||||
</file>
|
</file>
|
||||||
<file leaf-file-name="package.json" pinned="false" current-in-tab="true">
|
<file leaf-file-name="Demo8.js" pinned="false" current-in-tab="false">
|
||||||
|
<entry file="file://$PROJECT_DIR$/demo/demolist/Demo8.js">
|
||||||
|
<provider selected="true" editor-type-id="text-editor">
|
||||||
|
<state relative-caret-position="-1026">
|
||||||
|
<caret line="8" column="0" lean-forward="false" selection-start-line="8" selection-start-column="0" selection-end-line="8" selection-end-column="0" />
|
||||||
|
<folding>
|
||||||
|
<element signature="n#!!doc" expanded="true" />
|
||||||
|
<element signature="e#93#132#0" expanded="true" />
|
||||||
|
</folding>
|
||||||
|
</state>
|
||||||
|
</provider>
|
||||||
|
</entry>
|
||||||
|
</file>
|
||||||
|
<file leaf-file-name="Demo9.js" pinned="false" current-in-tab="false">
|
||||||
|
<entry file="file://$PROJECT_DIR$/demo/demolist/Demo9.js">
|
||||||
|
<provider selected="true" editor-type-id="text-editor">
|
||||||
|
<state relative-caret-position="-3224">
|
||||||
|
<caret line="8" column="0" lean-forward="false" selection-start-line="8" selection-start-column="0" selection-end-line="8" selection-end-column="0" />
|
||||||
|
<folding>
|
||||||
|
<element signature="n#!!doc" expanded="true" />
|
||||||
|
<element signature="e#96#135#0" expanded="true" />
|
||||||
|
</folding>
|
||||||
|
</state>
|
||||||
|
</provider>
|
||||||
|
</entry>
|
||||||
|
</file>
|
||||||
|
<file leaf-file-name="index.js" pinned="false" current-in-tab="false">
|
||||||
|
<entry file="file://$PROJECT_DIR$/demo/index.js">
|
||||||
|
<provider selected="true" editor-type-id="text-editor">
|
||||||
|
<state relative-caret-position="650">
|
||||||
|
<caret line="72" column="22" lean-forward="false" selection-start-line="72" selection-start-column="22" selection-end-line="72" selection-end-column="22" />
|
||||||
|
<folding>
|
||||||
|
<element signature="e#1#44#0" expanded="true" />
|
||||||
|
<marker date="1506673238831" expanded="true" signature="32364:32376" ph="..." />
|
||||||
|
</folding>
|
||||||
|
</state>
|
||||||
|
</provider>
|
||||||
|
</entry>
|
||||||
|
</file>
|
||||||
|
<file leaf-file-name="index.html" pinned="false" current-in-tab="true">
|
||||||
|
<entry file="file://$PROJECT_DIR$/index.html">
|
||||||
|
<provider selected="true" editor-type-id="text-editor">
|
||||||
|
<state relative-caret-position="494">
|
||||||
|
<caret line="19" column="84" lean-forward="false" selection-start-line="19" selection-start-column="84" selection-end-line="19" selection-end-column="84" />
|
||||||
|
<folding />
|
||||||
|
</state>
|
||||||
|
</provider>
|
||||||
|
</entry>
|
||||||
|
</file>
|
||||||
|
<file leaf-file-name="package.json" pinned="false" current-in-tab="false">
|
||||||
<entry file="file://$PROJECT_DIR$/package.json">
|
<entry file="file://$PROJECT_DIR$/package.json">
|
||||||
<provider selected="true" editor-type-id="text-editor">
|
<provider selected="true" editor-type-id="text-editor">
|
||||||
<state relative-caret-position="560">
|
<state relative-caret-position="1430">
|
||||||
<caret line="41" column="22" lean-forward="false" selection-start-line="41" selection-start-column="22" selection-end-line="41" selection-end-column="22" />
|
<caret line="55" column="26" lean-forward="false" selection-start-line="55" selection-start-column="26" selection-end-line="55" selection-end-column="26" />
|
||||||
<folding />
|
<folding />
|
||||||
</state>
|
</state>
|
||||||
</provider>
|
</provider>
|
||||||
|
|
@ -56,10 +141,12 @@
|
||||||
<option name="CHANGED_PATHS">
|
<option name="CHANGED_PATHS">
|
||||||
<list>
|
<list>
|
||||||
<option value="$PROJECT_DIR$/demo/demolist/Demo10.js" />
|
<option value="$PROJECT_DIR$/demo/demolist/Demo10.js" />
|
||||||
<option value="$PROJECT_DIR$/demo/demolist/Demo9.js" />
|
|
||||||
<option value="$PROJECT_DIR$/demo/demolist/Demo8.js" />
|
|
||||||
<option value="$PROJECT_DIR$/demo/demolist/Demo7.js" />
|
<option value="$PROJECT_DIR$/demo/demolist/Demo7.js" />
|
||||||
|
<option value="$PROJECT_DIR$/demo/demolist/Demo8.js" />
|
||||||
|
<option value="$PROJECT_DIR$/demo/demolist/Demo9.js" />
|
||||||
<option value="$PROJECT_DIR$/package.json" />
|
<option value="$PROJECT_DIR$/package.json" />
|
||||||
|
<option value="$PROJECT_DIR$/demo/index.js" />
|
||||||
|
<option value="$PROJECT_DIR$/index.html" />
|
||||||
</list>
|
</list>
|
||||||
</option>
|
</option>
|
||||||
</component>
|
</component>
|
||||||
|
|
@ -97,7 +184,6 @@
|
||||||
<foldersAlwaysOnTop value="true" />
|
<foldersAlwaysOnTop value="true" />
|
||||||
</navigator>
|
</navigator>
|
||||||
<panes>
|
<panes>
|
||||||
<pane id="Scope" />
|
|
||||||
<pane id="Scratches" />
|
<pane id="Scratches" />
|
||||||
<pane id="ProjectPane">
|
<pane id="ProjectPane">
|
||||||
<subPane>
|
<subPane>
|
||||||
|
|
@ -145,6 +231,7 @@
|
||||||
</PATH>
|
</PATH>
|
||||||
</subPane>
|
</subPane>
|
||||||
</pane>
|
</pane>
|
||||||
|
<pane id="Scope" />
|
||||||
</panes>
|
</panes>
|
||||||
</component>
|
</component>
|
||||||
<component name="PropertiesComponent">
|
<component name="PropertiesComponent">
|
||||||
|
|
@ -152,7 +239,7 @@
|
||||||
<property name="JavaScriptPreferStrict" value="false" />
|
<property name="JavaScriptPreferStrict" value="false" />
|
||||||
<property name="JavaScriptWeakerCompletionTypeGuess" value="true" />
|
<property name="JavaScriptWeakerCompletionTypeGuess" value="true" />
|
||||||
<property name="WebServerToolWindowFactoryState" value="false" />
|
<property name="WebServerToolWindowFactoryState" value="false" />
|
||||||
<property name="last_opened_file_path" value="$PROJECT_DIR$/../tinper-bee" />
|
<property name="last_opened_file_path" value="$PROJECT_DIR$" />
|
||||||
<property name="HbShouldOpenHtmlAsHb" value="" />
|
<property name="HbShouldOpenHtmlAsHb" value="" />
|
||||||
<property name="nodejs_interpreter_path" value="C:/Program Files/nodejs/node" />
|
<property name="nodejs_interpreter_path" value="C:/Program Files/nodejs/node" />
|
||||||
</component>
|
</component>
|
||||||
|
|
@ -184,32 +271,33 @@
|
||||||
<option name="presentableId" value="Default" />
|
<option name="presentableId" value="Default" />
|
||||||
<updated>1504076174885</updated>
|
<updated>1504076174885</updated>
|
||||||
<workItem from="1504076176405" duration="2701000" />
|
<workItem from="1504076176405" duration="2701000" />
|
||||||
|
<workItem from="1506672272278" duration="1284000" />
|
||||||
</task>
|
</task>
|
||||||
<servers />
|
<servers />
|
||||||
</component>
|
</component>
|
||||||
<component name="TimeTrackingManager">
|
<component name="TimeTrackingManager">
|
||||||
<option name="totallyTimeSpent" value="2701000" />
|
<option name="totallyTimeSpent" value="3985000" />
|
||||||
</component>
|
</component>
|
||||||
<component name="ToolWindowManager">
|
<component name="ToolWindowManager">
|
||||||
<frame x="-8" y="0" width="1920" height="1084" extended-state="0" />
|
<frame x="-8" y="0" width="1920" height="1084" extended-state="1" />
|
||||||
<editor active="true" />
|
<editor active="true" />
|
||||||
<layout>
|
<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.24973433" sideWeight="0.5" order="0" side_tool="false" content_ui="combo" />
|
<window_info id="Project" active="false" anchor="left" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="true" show_stripe_button="true" weight="0.24973433" 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="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="-1" side_tool="true" 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="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="npm" 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="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="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="-1" side_tool="false" content_ui="tabs" />
|
|
||||||
<window_info id="npm" 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="-1" side_tool="true" 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="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="-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="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="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="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="-1" 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="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="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="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="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="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="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="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="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" />
|
<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>
|
</layout>
|
||||||
</component>
|
</component>
|
||||||
|
|
@ -224,24 +312,22 @@
|
||||||
<watches-manager />
|
<watches-manager />
|
||||||
</component>
|
</component>
|
||||||
<component name="editorHistoryManager">
|
<component name="editorHistoryManager">
|
||||||
<entry file="file://$PROJECT_DIR$/demo/demolist/Demo9.js">
|
<entry file="file://$PROJECT_DIR$/demo/demolist/Demo7.js">
|
||||||
<provider selected="true" editor-type-id="text-editor">
|
<provider selected="true" editor-type-id="text-editor">
|
||||||
<state relative-caret-position="-910">
|
<state relative-caret-position="2106">
|
||||||
<caret line="28" column="23" lean-forward="true" selection-start-line="28" selection-start-column="23" selection-end-line="28" selection-end-column="23" />
|
<caret line="81" column="32" lean-forward="true" selection-start-line="81" selection-start-column="32" selection-end-line="81" selection-end-column="32" />
|
||||||
<folding>
|
<folding>
|
||||||
<element signature="n#!!doc" expanded="true" />
|
<element signature="n#!!doc" expanded="true" />
|
||||||
|
<element signature="e#55#94#0" expanded="true" />
|
||||||
</folding>
|
</folding>
|
||||||
</state>
|
</state>
|
||||||
</provider>
|
</provider>
|
||||||
</entry>
|
</entry>
|
||||||
<entry file="file://$PROJECT_DIR$/demo/demolist/Demo8.js">
|
<entry file="file://$PROJECT_DIR$/package.json">
|
||||||
<provider selected="true" editor-type-id="text-editor">
|
<provider selected="true" editor-type-id="text-editor">
|
||||||
<state relative-caret-position="298">
|
<state relative-caret-position="1066">
|
||||||
<caret line="47" column="10" lean-forward="true" selection-start-line="47" selection-start-column="10" selection-end-line="47" selection-end-column="10" />
|
<caret line="41" column="22" lean-forward="false" selection-start-line="41" selection-start-column="22" selection-end-line="41" selection-end-column="22" />
|
||||||
<folding>
|
<folding />
|
||||||
<element signature="n#!!doc" expanded="true" />
|
|
||||||
<element signature="e#92#131#0" expanded="true" />
|
|
||||||
</folding>
|
|
||||||
</state>
|
</state>
|
||||||
</provider>
|
</provider>
|
||||||
</entry>
|
</entry>
|
||||||
|
|
@ -249,27 +335,65 @@
|
||||||
<provider selected="true" editor-type-id="text-editor">
|
<provider selected="true" editor-type-id="text-editor">
|
||||||
<state relative-caret-position="130">
|
<state relative-caret-position="130">
|
||||||
<caret line="5" column="2" lean-forward="false" selection-start-line="5" selection-start-column="2" selection-end-line="5" selection-end-column="35" />
|
<caret line="5" column="2" lean-forward="false" selection-start-line="5" selection-start-column="2" selection-end-line="5" selection-end-column="35" />
|
||||||
<folding>
|
|
||||||
<element signature="e#91#132#0" expanded="true" />
|
|
||||||
</folding>
|
|
||||||
</state>
|
</state>
|
||||||
</provider>
|
</provider>
|
||||||
</entry>
|
</entry>
|
||||||
<entry file="file://$PROJECT_DIR$/demo/demolist/Demo7.js">
|
<entry file="file://$PROJECT_DIR$/demo/demolist/Demo7.js">
|
||||||
<provider selected="true" editor-type-id="text-editor">
|
<provider selected="true" editor-type-id="text-editor">
|
||||||
<state relative-caret-position="456">
|
<state relative-caret-position="2340">
|
||||||
<caret line="81" column="41" lean-forward="false" selection-start-line="81" selection-start-column="41" selection-end-line="81" selection-end-column="41" />
|
<caret line="90" column="5" lean-forward="false" selection-start-line="90" selection-start-column="5" selection-end-line="90" selection-end-column="5" />
|
||||||
<folding>
|
<folding>
|
||||||
<element signature="n#!!doc" expanded="true" />
|
<element signature="n#!!doc" expanded="true" />
|
||||||
<element signature="e#54#93#0" expanded="true" />
|
<element signature="e#55#94#0" expanded="true" />
|
||||||
|
</folding>
|
||||||
|
</state>
|
||||||
|
</provider>
|
||||||
|
</entry>
|
||||||
|
<entry file="file://$PROJECT_DIR$/demo/demolist/Demo8.js">
|
||||||
|
<provider selected="true" editor-type-id="text-editor">
|
||||||
|
<state relative-caret-position="-1026">
|
||||||
|
<caret line="8" column="0" lean-forward="false" selection-start-line="8" selection-start-column="0" selection-end-line="8" selection-end-column="0" />
|
||||||
|
<folding>
|
||||||
|
<element signature="n#!!doc" expanded="true" />
|
||||||
|
<element signature="e#93#132#0" expanded="true" />
|
||||||
|
</folding>
|
||||||
|
</state>
|
||||||
|
</provider>
|
||||||
|
</entry>
|
||||||
|
<entry file="file://$PROJECT_DIR$/demo/demolist/Demo9.js">
|
||||||
|
<provider selected="true" editor-type-id="text-editor">
|
||||||
|
<state relative-caret-position="-3224">
|
||||||
|
<caret line="8" column="0" lean-forward="false" selection-start-line="8" selection-start-column="0" selection-end-line="8" selection-end-column="0" />
|
||||||
|
<folding>
|
||||||
|
<element signature="n#!!doc" expanded="true" />
|
||||||
|
<element signature="e#96#135#0" expanded="true" />
|
||||||
</folding>
|
</folding>
|
||||||
</state>
|
</state>
|
||||||
</provider>
|
</provider>
|
||||||
</entry>
|
</entry>
|
||||||
<entry file="file://$PROJECT_DIR$/package.json">
|
<entry file="file://$PROJECT_DIR$/package.json">
|
||||||
<provider selected="true" editor-type-id="text-editor">
|
<provider selected="true" editor-type-id="text-editor">
|
||||||
<state relative-caret-position="560">
|
<state relative-caret-position="1430">
|
||||||
<caret line="41" column="22" lean-forward="false" selection-start-line="41" selection-start-column="22" selection-end-line="41" selection-end-column="22" />
|
<caret line="55" column="26" lean-forward="false" selection-start-line="55" selection-start-column="26" selection-end-line="55" selection-end-column="26" />
|
||||||
|
<folding />
|
||||||
|
</state>
|
||||||
|
</provider>
|
||||||
|
</entry>
|
||||||
|
<entry file="file://$PROJECT_DIR$/demo/index.js">
|
||||||
|
<provider selected="true" editor-type-id="text-editor">
|
||||||
|
<state relative-caret-position="650">
|
||||||
|
<caret line="72" column="22" lean-forward="false" selection-start-line="72" selection-start-column="22" selection-end-line="72" selection-end-column="22" />
|
||||||
|
<folding>
|
||||||
|
<element signature="e#1#44#0" expanded="true" />
|
||||||
|
<marker date="1506673238831" expanded="true" signature="32364:32376" ph="..." />
|
||||||
|
</folding>
|
||||||
|
</state>
|
||||||
|
</provider>
|
||||||
|
</entry>
|
||||||
|
<entry file="file://$PROJECT_DIR$/index.html">
|
||||||
|
<provider selected="true" editor-type-id="text-editor">
|
||||||
|
<state relative-caret-position="494">
|
||||||
|
<caret line="19" column="84" lean-forward="false" selection-start-line="19" selection-start-column="84" selection-end-line="19" selection-end-column="84" />
|
||||||
<folding />
|
<folding />
|
||||||
</state>
|
</state>
|
||||||
</provider>
|
</provider>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,175 @@
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
|
||||||
|
|
||||||
|
var _react = require("react");
|
||||||
|
|
||||||
|
var _react2 = _interopRequireDefault(_react);
|
||||||
|
|
||||||
|
var _beeCheckbox = require("bee-checkbox");
|
||||||
|
|
||||||
|
var _beeCheckbox2 = _interopRequireDefault(_beeCheckbox);
|
||||||
|
|
||||||
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
||||||
|
|
||||||
|
function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; }
|
||||||
|
|
||||||
|
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
||||||
|
|
||||||
|
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
|
||||||
|
|
||||||
|
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); }
|
||||||
|
|
||||||
|
/**
|
||||||
|
* multiSelect={
|
||||||
|
* type--默认值为checkbox
|
||||||
|
* param--可以设置返回的选中的数据属性；默认值：null；
|
||||||
|
* }
|
||||||
|
* getSelectedDataFunc--function，能获取到选中的数据
|
||||||
|
* 使用全选时得注意，data中的key值一定要是唯一值
|
||||||
|
*/
|
||||||
|
module.exports = function multiSelect(Table) {
|
||||||
|
Array.prototype.indexOf = function (val) {
|
||||||
|
for (var i = 0; i < this.length; i++) {
|
||||||
|
if (this[i] == val) return i;
|
||||||
|
}
|
||||||
|
return -1;
|
||||||
|
};
|
||||||
|
Array.prototype.remove = function (val) {
|
||||||
|
var index = this.indexOf(val);
|
||||||
|
if (index > -1) {
|
||||||
|
this.splice(index, 1);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
return function (_Component) {
|
||||||
|
_inherits(BookLoader, _Component);
|
||||||
|
|
||||||
|
function BookLoader(props) {
|
||||||
|
_classCallCheck(this, BookLoader);
|
||||||
|
|
||||||
|
var _this = _possibleConstructorReturn(this, _Component.call(this, props));
|
||||||
|
|
||||||
|
_this.onAllCheckChange = function () {
|
||||||
|
var self = _this;
|
||||||
|
var listData = self.state.data.concat();
|
||||||
|
var checkedObj = _extends({}, self.state.checkedObj);
|
||||||
|
var data = self.props.data;
|
||||||
|
var selIds = [];
|
||||||
|
var id = self.props.multiSelect.param;
|
||||||
|
for (var i = 0; i < data.length; i++) {
|
||||||
|
checkedObj[data[i]["key"]] = !self.state.checkedAll;
|
||||||
|
}
|
||||||
|
if (self.state.checkedAll) {
|
||||||
|
selIds = [];
|
||||||
|
} else {
|
||||||
|
for (var i = 0; i < listData.length; i++) {
|
||||||
|
if (id) {
|
||||||
|
selIds[i] = listData[i][id];
|
||||||
|
} else {
|
||||||
|
selIds[i] = listData[i];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
self.setState({
|
||||||
|
checkedAll: !self.state.checkedAll,
|
||||||
|
checkedObj: checkedObj,
|
||||||
|
selIds: selIds
|
||||||
|
});
|
||||||
|
self.props.getSelectedDataFunc(selIds);
|
||||||
|
};
|
||||||
|
|
||||||
|
_this.onCheckboxChange = function (text, record, index) {
|
||||||
|
var self = _this;
|
||||||
|
var allFlag = false;
|
||||||
|
var selIds = self.state.selIds;
|
||||||
|
var id = self.props.multiSelect ? self.props.multiSelect.param ? record[self.props.multiSelect.param] : record : record;
|
||||||
|
var checkedObj = _extends({}, self.state.checkedObj);
|
||||||
|
var checkedArray = Object.keys(checkedObj);
|
||||||
|
var getSelectedDataFunc = self.props.getSelectedDataFunc;
|
||||||
|
|
||||||
|
if (checkedObj[record["key"]]) {
|
||||||
|
selIds.remove(id);
|
||||||
|
} else {
|
||||||
|
selIds.push(id);
|
||||||
|
}
|
||||||
|
checkedObj[record["key"]] = !checkedObj[record["key"]];
|
||||||
|
for (var i = 0; i < checkedArray.length; i++) {
|
||||||
|
if (!checkedObj[checkedArray[i]]) {
|
||||||
|
allFlag = false;
|
||||||
|
break;
|
||||||
|
} else {
|
||||||
|
allFlag = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
self.setState({
|
||||||
|
checkedAll: allFlag,
|
||||||
|
checkedObj: checkedObj,
|
||||||
|
selIds: selIds
|
||||||
|
});
|
||||||
|
if (typeof getSelectedDataFunc === 'function') {
|
||||||
|
getSelectedDataFunc(selIds);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
_this.state = {
|
||||||
|
checkedAll: false,
|
||||||
|
checkedObj: {},
|
||||||
|
selIds: [],
|
||||||
|
data: _this.props.data
|
||||||
|
};
|
||||||
|
return _this;
|
||||||
|
}
|
||||||
|
|
||||||
|
BookLoader.prototype.renderColumnsMultiSelect = function renderColumnsMultiSelect(columns) {
|
||||||
|
var _this2 = this;
|
||||||
|
|
||||||
|
var data = this.state.data;
|
||||||
|
|
||||||
|
var checkedObj = _extends({}, this.state.checkedObj);
|
||||||
|
var checkedArray = Object.keys(checkedObj);
|
||||||
|
var multiSelect = this.props.multiSelect;
|
||||||
|
|
||||||
|
var select_column = {};
|
||||||
|
var indeterminate_bool = false;
|
||||||
|
if (!multiSelect || !multiSelect.type) {
|
||||||
|
multiSelect = _extends({}, multiSelect, { type: "checkbox" });
|
||||||
|
}
|
||||||
|
if (multiSelect && multiSelect.type === "checkbox") {
|
||||||
|
var i = checkedArray.length;
|
||||||
|
while (i--) {
|
||||||
|
if (checkedObj[checkedArray[i]]) {
|
||||||
|
indeterminate_bool = true;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
var defaultColumns = [{
|
||||||
|
title: _react2["default"].createElement(_beeCheckbox2["default"], {
|
||||||
|
className: "table-checkbox",
|
||||||
|
checked: this.state.checkedAll,
|
||||||
|
indeterminate: indeterminate_bool && !this.state.checkedAll,
|
||||||
|
onChange: this.onAllCheckChange
|
||||||
|
}),
|
||||||
|
key: "checkbox",
|
||||||
|
dataIndex: "checkbox",
|
||||||
|
width: "5%",
|
||||||
|
render: function render(text, record, index) {
|
||||||
|
return _react2["default"].createElement(_beeCheckbox2["default"], {
|
||||||
|
className: "table-checkbox",
|
||||||
|
checked: checkedObj[record.key],
|
||||||
|
onChange: _this2.onCheckboxChange.bind(_this2, text, record, index)
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}];
|
||||||
|
columns = defaultColumns.concat(columns);
|
||||||
|
}
|
||||||
|
return columns;
|
||||||
|
};
|
||||||
|
|
||||||
|
BookLoader.prototype.render = function render() {
|
||||||
|
var columns = this.renderColumnsMultiSelect(this.props.columns).concat();
|
||||||
|
return _react2["default"].createElement(Table, _extends({}, this.props, { columns: columns }));
|
||||||
|
};
|
||||||
|
|
||||||
|
return BookLoader;
|
||||||
|
}(_react.Component);
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,147 @@
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
Object.defineProperty(exports, "__esModule", {
|
||||||
|
value: true
|
||||||
|
});
|
||||||
|
|
||||||
|
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
|
||||||
|
|
||||||
|
exports["default"] = sort;
|
||||||
|
|
||||||
|
var _react = require('react');
|
||||||
|
|
||||||
|
var _react2 = _interopRequireDefault(_react);
|
||||||
|
|
||||||
|
var _beeIcon = require('bee-icon');
|
||||||
|
|
||||||
|
var _beeIcon2 = _interopRequireDefault(_beeIcon);
|
||||||
|
|
||||||
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
||||||
|
|
||||||
|
function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; }
|
||||||
|
|
||||||
|
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
||||||
|
|
||||||
|
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
|
||||||
|
|
||||||
|
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); }
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 参数：prefixCls，默认bee-table,用于设置图标的样式
|
||||||
|
* @param {*} Table
|
||||||
|
*/
|
||||||
|
function sort(Table) {
|
||||||
|
return function (_Component) {
|
||||||
|
_inherits(Demo11, _Component);
|
||||||
|
|
||||||
|
function Demo11(props) {
|
||||||
|
_classCallCheck(this, Demo11);
|
||||||
|
|
||||||
|
var _this = _possibleConstructorReturn(this, _Component.call(this, props));
|
||||||
|
|
||||||
|
_this.toggleSortOrder = function (order, column) {
|
||||||
|
var _this$state = _this.state,
|
||||||
|
sortOrder = _this$state.sortOrder,
|
||||||
|
data = _this$state.data,
|
||||||
|
oldData = _this$state.oldData;
|
||||||
|
|
||||||
|
var ascend_sort = function ascend_sort(key) {
|
||||||
|
return function (a, b) {
|
||||||
|
return a.key - b.key;
|
||||||
|
};
|
||||||
|
};
|
||||||
|
var descend_sort = function descend_sort(key) {
|
||||||
|
return function (a, b) {
|
||||||
|
return b.key - a.key;
|
||||||
|
};
|
||||||
|
};
|
||||||
|
if (sortOrder === order) {
|
||||||
|
// 切换为未排序状态
|
||||||
|
order = "";
|
||||||
|
}
|
||||||
|
if (!oldData) {
|
||||||
|
oldData = data.concat();
|
||||||
|
}
|
||||||
|
if (order === "ascend") {
|
||||||
|
data = data.sort(function (a, b) {
|
||||||
|
return column.sorter(a, b);
|
||||||
|
});
|
||||||
|
} else if (order === "descend") {
|
||||||
|
data = data.sort(function (a, b) {
|
||||||
|
return column.sorter(b, a);
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
data = oldData.concat();
|
||||||
|
}
|
||||||
|
_this.setState({
|
||||||
|
sortOrder: order,
|
||||||
|
data: data,
|
||||||
|
oldData: oldData
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
_this.state = {
|
||||||
|
sortOrder: "",
|
||||||
|
data: _this.props.data
|
||||||
|
};
|
||||||
|
return _this;
|
||||||
|
}
|
||||||
|
|
||||||
|
Demo11.prototype.renderColumnsDropdown = function renderColumnsDropdown(columns) {
|
||||||
|
var _this2 = this;
|
||||||
|
|
||||||
|
var sortOrder = this.state.sortOrder;
|
||||||
|
|
||||||
|
var prefixCls = this.props.prefixCls || 'bee-table';
|
||||||
|
return columns.map(function (originColumn) {
|
||||||
|
var column = _extends({}, originColumn);
|
||||||
|
var sortButton = void 0;
|
||||||
|
if (column.sorter) {
|
||||||
|
var isAscend = sortOrder === "ascend";
|
||||||
|
var isDescend = sortOrder === "descend";
|
||||||
|
sortButton = _react2["default"].createElement(
|
||||||
|
'div',
|
||||||
|
{ className: prefixCls + '-column-sorter' },
|
||||||
|
_react2["default"].createElement(
|
||||||
|
'span',
|
||||||
|
{
|
||||||
|
className: prefixCls + '-column-sorter-up ' + (isAscend ? "on" : "off"),
|
||||||
|
title: '\u2191',
|
||||||
|
onClick: function onClick() {
|
||||||
|
return _this2.toggleSortOrder("ascend", column);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
_react2["default"].createElement(_beeIcon2["default"], { type: 'uf-triangle-up' })
|
||||||
|
),
|
||||||
|
_react2["default"].createElement(
|
||||||
|
'span',
|
||||||
|
{
|
||||||
|
className: prefixCls + '-column-sorter-down ' + (isDescend ? "on" : "off"),
|
||||||
|
title: '\u2193',
|
||||||
|
onClick: function onClick() {
|
||||||
|
return _this2.toggleSortOrder("descend", column);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
_react2["default"].createElement(_beeIcon2["default"], { type: 'uf-triangle-down' })
|
||||||
|
)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
column.title = _react2["default"].createElement(
|
||||||
|
'span',
|
||||||
|
null,
|
||||||
|
column.title,
|
||||||
|
sortButton
|
||||||
|
);
|
||||||
|
return column;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
Demo11.prototype.render = function render() {
|
||||||
|
var columns = this.renderColumnsDropdown(this.props.columns).concat();
|
||||||
|
return _react2["default"].createElement(Table, _extends({}, this.props, { columns: columns, data: this.state.data }));
|
||||||
|
};
|
||||||
|
|
||||||
|
return Demo11;
|
||||||
|
}(_react.Component);
|
||||||
|
}
|
||||||
|
module.exports = exports['default'];
|
||||||
|
|
@ -0,0 +1,84 @@
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
Object.defineProperty(exports, "__esModule", {
|
||||||
|
value: true
|
||||||
|
});
|
||||||
|
|
||||||
|
var _react = require('react');
|
||||||
|
|
||||||
|
var _react2 = _interopRequireDefault(_react);
|
||||||
|
|
||||||
|
var _src = require('../../src');
|
||||||
|
|
||||||
|
var _src2 = _interopRequireDefault(_src);
|
||||||
|
|
||||||
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
||||||
|
|
||||||
|
function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; }
|
||||||
|
|
||||||
|
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
||||||
|
|
||||||
|
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
|
||||||
|
|
||||||
|
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); }
|
||||||
|
|
||||||
|
exports["default"] = Sum = function Sum(Table) {
|
||||||
|
var SumTable = function (_React$Component) {
|
||||||
|
_inherits(SumTable, _React$Component);
|
||||||
|
|
||||||
|
function SumTable(props) {
|
||||||
|
var _temp, _this;
|
||||||
|
|
||||||
|
_classCallCheck(this, SumTable);
|
||||||
|
|
||||||
|
(_temp = (_this = _possibleConstructorReturn(this, _React$Component.call(this, props)), _this), _this.currentData = function (testTitle) {
|
||||||
|
return _react2["default"].createElement(
|
||||||
|
'div',
|
||||||
|
null,
|
||||||
|
testTitle
|
||||||
|
);
|
||||||
|
}, _this.currentData2 = function () {
|
||||||
|
data_2 = _this.state.data;
|
||||||
|
var obj = {};
|
||||||
|
if (data.isArray()) {
|
||||||
|
for (var i = 0; i < data_2.length; i++) {
|
||||||
|
for (var item in data[i]) {
|
||||||
|
if (obj[item] === 'undefined') {
|
||||||
|
obj[item] = data[i][item];
|
||||||
|
} else if (typeof data[i][item] == 'Number') {
|
||||||
|
obj[item] += data[i][item];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return _react2["default"].createElement(Table, {
|
||||||
|
showHeader: false,
|
||||||
|
columns: _this.props.columns,
|
||||||
|
data: obj,
|
||||||
|
heji: true
|
||||||
|
});
|
||||||
|
}, _temp), _this.state = {
|
||||||
|
data: _this.props.data
|
||||||
|
};
|
||||||
|
return _this;
|
||||||
|
}
|
||||||
|
|
||||||
|
SumTable.prototype.render = function render() {
|
||||||
|
var a = this.currentData;
|
||||||
|
var b = this.currentData2;
|
||||||
|
return _react2["default"].createElement(Table, {
|
||||||
|
columns: this.props.columns,
|
||||||
|
data: this.state.data,
|
||||||
|
heji: true,
|
||||||
|
title: a,
|
||||||
|
footer: b
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
return SumTable;
|
||||||
|
}(_react2["default"].Component);
|
||||||
|
|
||||||
|
return SumTable;
|
||||||
|
};
|
||||||
|
|
||||||
|
module.exports = exports['default'];
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
"use strict";
|
||||||
|
|
@ -0,0 +1,104 @@
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
Object.defineProperty(exports, "__esModule", {
|
||||||
|
value: true
|
||||||
|
});
|
||||||
|
|
||||||
|
var _react = require("react");
|
||||||
|
|
||||||
|
var _react2 = _interopRequireDefault(_react);
|
||||||
|
|
||||||
|
var _beeIcon = require("bee-icon");
|
||||||
|
|
||||||
|
var _beeIcon2 = _interopRequireDefault(_beeIcon);
|
||||||
|
|
||||||
|
var _beeCheckbox = require("bee-checkbox");
|
||||||
|
|
||||||
|
var _beeCheckbox2 = _interopRequireDefault(_beeCheckbox);
|
||||||
|
|
||||||
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
||||||
|
|
||||||
|
function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; }
|
||||||
|
|
||||||
|
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
||||||
|
|
||||||
|
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
|
||||||
|
|
||||||
|
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); }
|
||||||
|
|
||||||
|
var CheckboxRender = function (_Component) {
|
||||||
|
_inherits(CheckboxRender, _Component);
|
||||||
|
|
||||||
|
function CheckboxRender() {
|
||||||
|
var _temp, _this, _ret;
|
||||||
|
|
||||||
|
_classCallCheck(this, CheckboxRender);
|
||||||
|
|
||||||
|
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
|
||||||
|
args[_key] = arguments[_key];
|
||||||
|
}
|
||||||
|
|
||||||
|
return _ret = (_temp = (_this = _possibleConstructorReturn(this, _Component.call.apply(_Component, [this].concat(args))), _this), _this.state = {
|
||||||
|
value: _this.props.value,
|
||||||
|
editable: false
|
||||||
|
}, _this.handleChange = function (e) {
|
||||||
|
var value = e.target.value;
|
||||||
|
_this.setState({ value: value });
|
||||||
|
}, _this.check = function () {
|
||||||
|
_this.setState({ editable: false });
|
||||||
|
if (_this.props.onChange) {
|
||||||
|
_this.props.onChange(_this.state.value);
|
||||||
|
}
|
||||||
|
}, _this.edit = function () {
|
||||||
|
_this.setState({ editable: true });
|
||||||
|
}, _this.handleKeydown = function (event) {
|
||||||
|
console.log(event.keyCode);
|
||||||
|
if (event.keyCode == 13) {
|
||||||
|
_this.check();
|
||||||
|
}
|
||||||
|
}, _temp), _possibleConstructorReturn(_this, _ret);
|
||||||
|
}
|
||||||
|
|
||||||
|
CheckboxRender.prototype.render = function render() {
|
||||||
|
var _state = this.state,
|
||||||
|
value = _state.value,
|
||||||
|
editable = _state.editable;
|
||||||
|
var isclickTrigger = this.props.isclickTrigger;
|
||||||
|
|
||||||
|
var cellContent = "";
|
||||||
|
if (editable) {
|
||||||
|
cellContent = _react2["default"].createElement(
|
||||||
|
"div",
|
||||||
|
{ className: "editable-cell-input-wrapper" },
|
||||||
|
_react2["default"].createElement(_beeCheckbox2["default"], {
|
||||||
|
onChange: this.handleChange,
|
||||||
|
onKeyDown: this.handleKeydown,
|
||||||
|
onBlur: this.check,
|
||||||
|
autoFocus: true,
|
||||||
|
value: value
|
||||||
|
})
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
cellContent = _react2["default"].createElement(
|
||||||
|
"div",
|
||||||
|
{ className: "editable-cell-text-wrapper" },
|
||||||
|
value || " ",
|
||||||
|
_react2["default"].createElement(_beeIcon2["default"], {
|
||||||
|
type: "uf-pencil",
|
||||||
|
className: "editable-cell-icon",
|
||||||
|
onClick: this.edit
|
||||||
|
})
|
||||||
|
);
|
||||||
|
}
|
||||||
|
return _react2["default"].createElement(
|
||||||
|
"div",
|
||||||
|
{ className: "editable-cell" },
|
||||||
|
cellContent
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
return CheckboxRender;
|
||||||
|
}(_react.Component);
|
||||||
|
|
||||||
|
exports["default"] = CheckboxRender;
|
||||||
|
module.exports = exports["default"];
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
"use strict";
|
||||||
|
|
@ -0,0 +1,121 @@
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
Object.defineProperty(exports, "__esModule", {
|
||||||
|
value: true
|
||||||
|
});
|
||||||
|
|
||||||
|
var _react = require("react");
|
||||||
|
|
||||||
|
var _react2 = _interopRequireDefault(_react);
|
||||||
|
|
||||||
|
var _beeIcon = require("bee-icon");
|
||||||
|
|
||||||
|
var _beeIcon2 = _interopRequireDefault(_beeIcon);
|
||||||
|
|
||||||
|
var _beeFormControl = require("bee-form-control");
|
||||||
|
|
||||||
|
var _beeFormControl2 = _interopRequireDefault(_beeFormControl);
|
||||||
|
|
||||||
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
||||||
|
|
||||||
|
function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; }
|
||||||
|
|
||||||
|
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
||||||
|
|
||||||
|
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
|
||||||
|
|
||||||
|
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); }
|
||||||
|
|
||||||
|
var InputRender = function (_Component) {
|
||||||
|
_inherits(InputRender, _Component);
|
||||||
|
|
||||||
|
function InputRender() {
|
||||||
|
var _temp, _this, _ret;
|
||||||
|
|
||||||
|
_classCallCheck(this, InputRender);
|
||||||
|
|
||||||
|
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
|
||||||
|
args[_key] = arguments[_key];
|
||||||
|
}
|
||||||
|
|
||||||
|
return _ret = (_temp = (_this = _possibleConstructorReturn(this, _Component.call.apply(_Component, [this].concat(args))), _this), _this.state = {
|
||||||
|
value: _this.props.value,
|
||||||
|
editable: false
|
||||||
|
}, _this.handleChange = function (e) {
|
||||||
|
var value = e.target.value;
|
||||||
|
_this.setState({ value: value });
|
||||||
|
}, _this.check = function () {
|
||||||
|
_this.setState({ editable: false });
|
||||||
|
if (_this.props.onChange) {
|
||||||
|
_this.props.onChange(_this.state.value);
|
||||||
|
}
|
||||||
|
}, _this.edit = function () {
|
||||||
|
_this.setState({ editable: true });
|
||||||
|
}, _this.handleKeydown = function (event) {
|
||||||
|
console.log(event.keyCode);
|
||||||
|
if (event.keyCode == 13) {
|
||||||
|
_this.check();
|
||||||
|
}
|
||||||
|
}, _temp), _possibleConstructorReturn(_this, _ret);
|
||||||
|
}
|
||||||
|
|
||||||
|
InputRender.prototype.render = function render() {
|
||||||
|
var _state = this.state,
|
||||||
|
value = _state.value,
|
||||||
|
editable = _state.editable;
|
||||||
|
var isclickTrigger = this.props.isclickTrigger;
|
||||||
|
|
||||||
|
var cellContent = "";
|
||||||
|
if (editable) {
|
||||||
|
cellContent = isclickTrigger ? _react2["default"].createElement(
|
||||||
|
"div",
|
||||||
|
{ className: "editable-cell-input-wrapper" },
|
||||||
|
_react2["default"].createElement(_beeFormControl2["default"], {
|
||||||
|
onChange: this.handleChange,
|
||||||
|
onKeyDown: this.handleKeydown,
|
||||||
|
onBlur: this.check,
|
||||||
|
autoFocus: true,
|
||||||
|
value: value
|
||||||
|
})
|
||||||
|
) : _react2["default"].createElement(
|
||||||
|
"div",
|
||||||
|
{ className: "editable-cell-input-wrapper" },
|
||||||
|
_react2["default"].createElement(_beeFormControl2["default"], {
|
||||||
|
value: value,
|
||||||
|
onChange: this.handleChange,
|
||||||
|
onKeyDown: this.handleKeydown
|
||||||
|
}),
|
||||||
|
_react2["default"].createElement(_beeIcon2["default"], {
|
||||||
|
type: "uf-correct",
|
||||||
|
className: "editable-cell-icon-check",
|
||||||
|
onClick: this.check
|
||||||
|
})
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
cellContent = isclickTrigger ? _react2["default"].createElement(
|
||||||
|
"div",
|
||||||
|
{ className: "editable-cell-text-wrapper", onClick: this.edit },
|
||||||
|
value || " "
|
||||||
|
) : _react2["default"].createElement(
|
||||||
|
"div",
|
||||||
|
{ className: "editable-cell-text-wrapper" },
|
||||||
|
value || " ",
|
||||||
|
_react2["default"].createElement(_beeIcon2["default"], {
|
||||||
|
type: "uf-pencil",
|
||||||
|
className: "editable-cell-icon",
|
||||||
|
onClick: this.edit
|
||||||
|
})
|
||||||
|
);
|
||||||
|
}
|
||||||
|
return _react2["default"].createElement(
|
||||||
|
"div",
|
||||||
|
{ className: "editable-cell" },
|
||||||
|
cellContent
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
return InputRender;
|
||||||
|
}(_react.Component);
|
||||||
|
|
||||||
|
exports["default"] = InputRender;
|
||||||
|
module.exports = exports["default"];
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
"use strict";
|
||||||
|
|
@ -0,0 +1,134 @@
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
Object.defineProperty(exports, "__esModule", {
|
||||||
|
value: true
|
||||||
|
});
|
||||||
|
|
||||||
|
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
|
||||||
|
|
||||||
|
var _react = require("react");
|
||||||
|
|
||||||
|
var _react2 = _interopRequireDefault(_react);
|
||||||
|
|
||||||
|
var _beeIcon = require("bee-icon");
|
||||||
|
|
||||||
|
var _beeIcon2 = _interopRequireDefault(_beeIcon);
|
||||||
|
|
||||||
|
var _beeSelect = require("bee-select");
|
||||||
|
|
||||||
|
var _beeSelect2 = _interopRequireDefault(_beeSelect);
|
||||||
|
|
||||||
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
||||||
|
|
||||||
|
function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; }
|
||||||
|
|
||||||
|
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
||||||
|
|
||||||
|
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
|
||||||
|
|
||||||
|
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); }
|
||||||
|
|
||||||
|
var SelectRender = function (_Component) {
|
||||||
|
_inherits(SelectRender, _Component);
|
||||||
|
|
||||||
|
function SelectRender() {
|
||||||
|
var _temp, _this, _ret;
|
||||||
|
|
||||||
|
_classCallCheck(this, SelectRender);
|
||||||
|
|
||||||
|
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
|
||||||
|
args[_key] = arguments[_key];
|
||||||
|
}
|
||||||
|
|
||||||
|
return _ret = (_temp = (_this = _possibleConstructorReturn(this, _Component.call.apply(_Component, [this].concat(args))), _this), _this.state = {
|
||||||
|
value: _this.props.value,
|
||||||
|
editable: false
|
||||||
|
}, _this.handleChange = function (e) {
|
||||||
|
var value = e;
|
||||||
|
var self = _this;
|
||||||
|
if (self.props.onChange) {
|
||||||
|
self.props.onChange(value);
|
||||||
|
}
|
||||||
|
_this.setState({ value: value });
|
||||||
|
setTimeout(function () {
|
||||||
|
self.setState({ editable: false });
|
||||||
|
}, 0);
|
||||||
|
}, _this.check = function () {
|
||||||
|
_this.setState({ editable: false });
|
||||||
|
if (_this.props.onChange) {
|
||||||
|
_this.props.onChange(_this.state.value);
|
||||||
|
}
|
||||||
|
}, _this.edit = function () {
|
||||||
|
_this.setState({ editable: true });
|
||||||
|
}, _temp), _possibleConstructorReturn(_this, _ret);
|
||||||
|
}
|
||||||
|
|
||||||
|
SelectRender.prototype.render = function render() {
|
||||||
|
var _state = this.state,
|
||||||
|
value = _state.value,
|
||||||
|
editable = _state.editable;
|
||||||
|
var isclickTrigger = this.props.isclickTrigger;
|
||||||
|
|
||||||
|
var cellContent = "";
|
||||||
|
if (editable) {
|
||||||
|
cellContent = isclickTrigger ? _react2["default"].createElement(
|
||||||
|
"div",
|
||||||
|
{ className: "editable-cell-input-wrapper" },
|
||||||
|
_react2["default"].createElement(
|
||||||
|
_beeSelect2["default"],
|
||||||
|
_extends({}, this.props, {
|
||||||
|
value: this.state.value,
|
||||||
|
onChange: this.handleChange
|
||||||
|
}),
|
||||||
|
this.props.children
|
||||||
|
),
|
||||||
|
_react2["default"].createElement(_beeIcon2["default"], {
|
||||||
|
type: "uf-correct",
|
||||||
|
className: "editable-cell-icon-check",
|
||||||
|
onClick: this.check
|
||||||
|
})
|
||||||
|
) : _react2["default"].createElement(
|
||||||
|
"div",
|
||||||
|
{ className: "editable-cell-input-wrapper" },
|
||||||
|
_react2["default"].createElement(
|
||||||
|
_beeSelect2["default"],
|
||||||
|
_extends({}, this.props, {
|
||||||
|
value: this.state.value,
|
||||||
|
onChange: this.handleChange
|
||||||
|
}),
|
||||||
|
this.props.children
|
||||||
|
),
|
||||||
|
_react2["default"].createElement(_beeIcon2["default"], {
|
||||||
|
type: "uf-correct",
|
||||||
|
className: "editable-cell-icon-check",
|
||||||
|
onClick: this.check
|
||||||
|
})
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
cellContent = isclickTrigger ? _react2["default"].createElement(
|
||||||
|
"div",
|
||||||
|
{ className: "editable-cell-text-wrapper", onClick: this.edit },
|
||||||
|
value || " "
|
||||||
|
) : _react2["default"].createElement(
|
||||||
|
"div",
|
||||||
|
{ className: "editable-cell-text-wrapper" },
|
||||||
|
value || " ",
|
||||||
|
_react2["default"].createElement(_beeIcon2["default"], {
|
||||||
|
type: "uf-pencil",
|
||||||
|
className: "editable-cell-icon",
|
||||||
|
onClick: this.edit
|
||||||
|
})
|
||||||
|
);
|
||||||
|
}
|
||||||
|
return _react2["default"].createElement(
|
||||||
|
"div",
|
||||||
|
{ className: "editable-cell" },
|
||||||
|
cellContent
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
return SelectRender;
|
||||||
|
}(_react.Component);
|
||||||
|
|
||||||
|
exports["default"] = SelectRender;
|
||||||
|
module.exports = exports["default"];
|
||||||
|
|
@ -7,6 +7,11 @@
|
||||||
@import "../node_modules/bee-popconfirm/src/Popconfirm.scss";
|
@import "../node_modules/bee-popconfirm/src/Popconfirm.scss";
|
||||||
@import "../node_modules/bee-form-control/src/FormControl.scss";
|
@import "../node_modules/bee-form-control/src/FormControl.scss";
|
||||||
@import "../node_modules/bee-pagination/src/Pagination.scss";
|
@import "../node_modules/bee-pagination/src/Pagination.scss";
|
||||||
|
@import "../node_modules/bee-checkbox/src/Checkbox.scss";
|
||||||
|
@import "../node_modules/bee-select/src/Select.scss";
|
||||||
|
|
||||||
|
//引入日期控件样式文件
|
||||||
|
@import "../node_modules/bee-datepicker/src/datepicker.scss";
|
||||||
|
|
||||||
.editable-cell {
|
.editable-cell {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
@ -19,11 +24,13 @@
|
||||||
|
|
||||||
.editable-cell-text-wrapper {
|
.editable-cell-text-wrapper {
|
||||||
padding: 5px 24px 5px 5px;
|
padding: 5px 24px 5px 5px;
|
||||||
|
height: 30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.editable-cell-icon,
|
.editable-cell-icon,
|
||||||
.editable-cell-icon-check {
|
.editable-cell-icon-check {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
width: 20px;
|
width: 20px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
@ -76,3 +83,47 @@
|
||||||
position: absolute;
|
position: absolute;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.bee-table-column-sorter {
|
||||||
|
position: relative;
|
||||||
|
margin-left: 4px;
|
||||||
|
display: inline-block;
|
||||||
|
width: 14px;
|
||||||
|
height: 1em;
|
||||||
|
vertical-align: middle;
|
||||||
|
text-align: center;
|
||||||
|
& > .bee-table-column-sorter-down,
|
||||||
|
& > .bee-table-column-sorter-up {
|
||||||
|
line-height: 6px;
|
||||||
|
display: block;
|
||||||
|
width: 14px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.bee-table-column-sorter-down.on .uf-triangle-down,
|
||||||
|
.bee-table-column-sorter-down.on .uf-triangle-up,
|
||||||
|
.bee-table-column-sorter-up.on .uf-triangle-down,
|
||||||
|
.bee-table-column-sorter-up.on .uf-triangle-up {
|
||||||
|
color: #108ee9;
|
||||||
|
}
|
||||||
|
.bee-table-column-sorter .uf-triangle-down, .bee-table-column-sorter .uf-triangle-up {
|
||||||
|
-webkit-filter: none;
|
||||||
|
filter: none;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
.bee-table-column-sorter .uf-triangle-down, .bee-table-column-sorter .uf-triangle-up {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 0;
|
||||||
|
font-size: 12px;
|
||||||
|
font-size: 8px\9;
|
||||||
|
-webkit-transform: scale(.66666667) rotate(0deg);
|
||||||
|
-ms-transform: scale(.66666667) rotate(0deg);
|
||||||
|
transform: scale(.66666667) rotate(0deg);
|
||||||
|
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=1, M12=0, M21=0, M22=1)";
|
||||||
|
zoom: 1;
|
||||||
|
line-height: 4px;
|
||||||
|
height: 4px;
|
||||||
|
color: #999;
|
||||||
|
-webkit-transition: all .3s;
|
||||||
|
transition: all .3s;
|
||||||
|
}
|
||||||
|
|
@ -6,7 +6,6 @@
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import React, { Component } from 'react';
|
import React, { Component } from 'react';
|
||||||
import ReactDOM from 'react-dom';
|
|
||||||
import Table from '../../src';
|
import Table from '../../src';
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -40,5 +39,5 @@ class Demo1 extends Component {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
export default Demo1;
|
export default Demo1;
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -6,9 +6,11 @@
|
||||||
* import {Table} from 'tinper-bee';
|
* import {Table} from 'tinper-bee';
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
|
||||||
import React, { Component } from 'react';
|
import React, { Component } from 'react';
|
||||||
import Table from '../../src';
|
import Table from '../../src';
|
||||||
|
|
||||||
|
|
||||||
const columns10 = [
|
const columns10 = [
|
||||||
{
|
{
|
||||||
title: "Name",
|
title: "Name",
|
||||||
|
|
@ -41,5 +43,4 @@ const columns10 = [
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export default Demo10;
|
export default Demo10;
|
||||||
|
|
||||||
|
|
@ -0,0 +1,146 @@
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* @title 列排序
|
||||||
|
* @description 列排序
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
import React, { Component } from 'react';
|
||||||
|
import Table from '../../src';
|
||||||
|
import Icon from "bee-icon";
|
||||||
|
|
||||||
|
const columns11 = [
|
||||||
|
{
|
||||||
|
title: "名字",
|
||||||
|
dataIndex: "a",
|
||||||
|
key: "a",
|
||||||
|
width: 100
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "性别",
|
||||||
|
dataIndex: "b",
|
||||||
|
key: "b",
|
||||||
|
width: 100
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "年龄",
|
||||||
|
dataIndex: "c",
|
||||||
|
key: "c",
|
||||||
|
width: 200,
|
||||||
|
sorter: (a, b) => a.c - b.c
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "操作",
|
||||||
|
dataIndex: "",
|
||||||
|
key: "d",
|
||||||
|
render() {
|
||||||
|
return <a href="#">一些操作</a>;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
const data11 = [
|
||||||
|
{ a: "杨过", b: "男", c: 30, key: "2" },
|
||||||
|
{ a: "令狐冲", b: "男", c: 41, key: "1" },
|
||||||
|
{ a: "郭靖", b: "男", c: 25, key: "3" }
|
||||||
|
];
|
||||||
|
|
||||||
|
const defaultProps11 = {
|
||||||
|
prefixCls: "bee-table"
|
||||||
|
};
|
||||||
|
class Demo11 extends Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
this.state = {
|
||||||
|
sortOrder: "",
|
||||||
|
data: data11
|
||||||
|
};
|
||||||
|
}
|
||||||
|
toggleSortOrder=(order, column)=> {
|
||||||
|
let { sortOrder, data, oldData } = this.state;
|
||||||
|
let ascend_sort = function(key) {
|
||||||
|
return function(a, b) {
|
||||||
|
return a.key - b.key;
|
||||||
|
};
|
||||||
|
};
|
||||||
|
let descend_sort = function(key) {
|
||||||
|
return function(a, b) {
|
||||||
|
return b.key - a.key;
|
||||||
|
};
|
||||||
|
};
|
||||||
|
if (sortOrder === order) {
|
||||||
|
// 切换为未排序状态
|
||||||
|
order = "";
|
||||||
|
}
|
||||||
|
if (!oldData) {
|
||||||
|
oldData = data.concat();
|
||||||
|
}
|
||||||
|
if (order === "ascend") {
|
||||||
|
data = data.sort(function(a, b) {
|
||||||
|
return column.sorter(a, b);
|
||||||
|
});
|
||||||
|
} else if (order === "descend") {
|
||||||
|
data = data.sort(function(a, b) {
|
||||||
|
return column.sorter(b, a);
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
data = oldData.concat();
|
||||||
|
}
|
||||||
|
this.setState({
|
||||||
|
sortOrder: order,
|
||||||
|
data: data,
|
||||||
|
oldData: oldData
|
||||||
|
});
|
||||||
|
}
|
||||||
|
renderColumnsDropdown(columns) {
|
||||||
|
const { sortOrder } = this.state;
|
||||||
|
const { prefixCls } = this.props;
|
||||||
|
|
||||||
|
return columns.map(originColumn => {
|
||||||
|
let column = Object.assign({}, originColumn);
|
||||||
|
let sortButton;
|
||||||
|
if (column.sorter) {
|
||||||
|
const isAscend = sortOrder === "ascend";
|
||||||
|
const isDescend = sortOrder === "descend";
|
||||||
|
sortButton = (
|
||||||
|
<div className={`${prefixCls}-column-sorter`}>
|
||||||
|
<span
|
||||||
|
className={`${prefixCls}-column-sorter-up ${isAscend
|
||||||
|
? "on"
|
||||||
|
: "off"}`}
|
||||||
|
title="↑"
|
||||||
|
onClick={() => this.toggleSortOrder("ascend", column)}
|
||||||
|
>
|
||||||
|
<Icon type="uf-triangle-up" />
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
className={`${prefixCls}-column-sorter-down ${isDescend
|
||||||
|
? "on"
|
||||||
|
: "off"}`}
|
||||||
|
title="↓"
|
||||||
|
onClick={() => this.toggleSortOrder("descend", column)}
|
||||||
|
>
|
||||||
|
<Icon type="uf-triangle-down" />
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
column.title = (
|
||||||
|
<span>
|
||||||
|
{column.title}
|
||||||
|
{sortButton}
|
||||||
|
</span>
|
||||||
|
);
|
||||||
|
return column;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
render() {
|
||||||
|
let columns = this.renderColumnsDropdown(columns11);
|
||||||
|
return <Table columns={columns} data={this.state.data} />;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
Demo11.defaultProps = defaultProps11;
|
||||||
|
|
||||||
|
|
||||||
|
export default Demo11;
|
||||||
|
|
@ -0,0 +1,168 @@
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* @title 全选功能
|
||||||
|
* @description 全选功能
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
import React, { Component } from 'react';
|
||||||
|
import Table from '../../src';
|
||||||
|
import Checkbox from "bee-checkbox";
|
||||||
|
|
||||||
|
const columns12 = [
|
||||||
|
{
|
||||||
|
title: "名字",
|
||||||
|
dataIndex: "a",
|
||||||
|
key: "a",
|
||||||
|
width: 100
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "性别",
|
||||||
|
dataIndex: "b",
|
||||||
|
key: "b",
|
||||||
|
width: 100
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "年龄",
|
||||||
|
dataIndex: "c",
|
||||||
|
key: "c",
|
||||||
|
width: 200,
|
||||||
|
sorter: (a, b) => a.c - b.c
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "操作",
|
||||||
|
dataIndex: "",
|
||||||
|
key: "d",
|
||||||
|
render() {
|
||||||
|
return <a href="#">一些操作</a>;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
const data12 = [
|
||||||
|
{ a: "杨过", b: "男", c: 30, key: "2" },
|
||||||
|
{ a: "令狐冲", b: "男", c: 41, key: "1" },
|
||||||
|
{ a: "郭靖", b: "男", c: 25, key: "3" }
|
||||||
|
];
|
||||||
|
|
||||||
|
const defaultProps12 = {
|
||||||
|
prefixCls: "bee-table",
|
||||||
|
multiSelect: {
|
||||||
|
type: "checkbox",
|
||||||
|
param: "key"
|
||||||
|
}
|
||||||
|
};
|
||||||
|
class Demo12 extends Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
this.state = {
|
||||||
|
checkedAll:false,
|
||||||
|
checkedArray: [
|
||||||
|
false,
|
||||||
|
false,
|
||||||
|
false,
|
||||||
|
],
|
||||||
|
data: data12
|
||||||
|
};
|
||||||
|
}
|
||||||
|
onAllCheckChange = () => {
|
||||||
|
let self = this;
|
||||||
|
let checkedArray = [];
|
||||||
|
let listData = self.state.data.concat();
|
||||||
|
let selIds = [];
|
||||||
|
// let id = self.props.multiSelect.param;
|
||||||
|
for (var i = 0; i < self.state.checkedArray.length; i++) {
|
||||||
|
checkedArray[i] = !self.state.checkedAll;
|
||||||
|
}
|
||||||
|
// if (self.state.checkedAll) {
|
||||||
|
// selIds = [];
|
||||||
|
// } else {
|
||||||
|
// for (var i = 0; i < listData.length; i++) {
|
||||||
|
// selIds[i] = listData[i][id];
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
self.setState({
|
||||||
|
checkedAll: !self.state.checkedAll,
|
||||||
|
checkedArray: checkedArray,
|
||||||
|
// selIds: selIds
|
||||||
|
});
|
||||||
|
// self.props.onSelIds(selIds);
|
||||||
|
};
|
||||||
|
onCheckboxChange = (text, record, index) => {
|
||||||
|
let self = this;
|
||||||
|
let allFlag = false;
|
||||||
|
// let selIds = self.state.selIds;
|
||||||
|
// let id = self.props.postId;
|
||||||
|
let checkedArray = self.state.checkedArray.concat();
|
||||||
|
// if (self.state.checkedArray[index]) {
|
||||||
|
// selIds.remove(record[id]);
|
||||||
|
// } else {
|
||||||
|
// selIds.push(record[id]);
|
||||||
|
// }
|
||||||
|
checkedArray[index] = !self.state.checkedArray[index];
|
||||||
|
for (var i = 0; i < self.state.checkedArray.length; i++) {
|
||||||
|
if (!checkedArray[i]) {
|
||||||
|
allFlag = false;
|
||||||
|
break;
|
||||||
|
} else {
|
||||||
|
allFlag = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
self.setState({
|
||||||
|
checkedAll: allFlag,
|
||||||
|
checkedArray: checkedArray,
|
||||||
|
// selIds: selIds
|
||||||
|
});
|
||||||
|
// self.props.onSelIds(selIds);
|
||||||
|
};
|
||||||
|
renderColumnsMultiSelect(columns) {
|
||||||
|
const { data,checkedArray } = this.state;
|
||||||
|
const { multiSelect } = this.props;
|
||||||
|
let select_column = {};
|
||||||
|
let indeterminate_bool = false;
|
||||||
|
// let indeterminate_bool1 = true;
|
||||||
|
if (multiSelect && multiSelect.type === "checkbox") {
|
||||||
|
let i = checkedArray.length;
|
||||||
|
while(i--){
|
||||||
|
if(checkedArray[i]){
|
||||||
|
indeterminate_bool = true;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
let defaultColumns = [
|
||||||
|
{
|
||||||
|
title: (
|
||||||
|
<Checkbox
|
||||||
|
className="table-checkbox"
|
||||||
|
checked={this.state.checkedAll}
|
||||||
|
indeterminate={indeterminate_bool&&!this.state.checkedAll}
|
||||||
|
onChange={this.onAllCheckChange}
|
||||||
|
/>
|
||||||
|
),
|
||||||
|
key: "checkbox",
|
||||||
|
dataIndex: "checkbox",
|
||||||
|
width: "5%",
|
||||||
|
render: (text, record, index) => {
|
||||||
|
return (
|
||||||
|
<Checkbox
|
||||||
|
className="table-checkbox"
|
||||||
|
checked={this.state.checkedArray[index]}
|
||||||
|
onChange={this.onCheckboxChange.bind(this, text, record, index)}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
];
|
||||||
|
columns = defaultColumns.concat(columns);
|
||||||
|
}
|
||||||
|
return columns;
|
||||||
|
}
|
||||||
|
render() {
|
||||||
|
let columns = this.renderColumnsMultiSelect(columns12);
|
||||||
|
return <Table columns={columns} data={data12} />;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
Demo12.defaultProps = defaultProps12;
|
||||||
|
|
||||||
|
export default Demo12;
|
||||||
|
|
@ -0,0 +1,72 @@
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* @title 列排序、全选功能、合计
|
||||||
|
* @description 列排序、全选功能、合计
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
|
||||||
|
import React, { Component } from "react";
|
||||||
|
import Table from "../../src";
|
||||||
|
import Checkbox from "bee-checkbox";
|
||||||
|
import multiSelect from "../../src/lib/multiSelect.js";
|
||||||
|
import sort from "../../src/lib/sort.js";
|
||||||
|
import sum from "../../src/lib/sum.js";
|
||||||
|
|
||||||
|
const columns13 = [
|
||||||
|
{
|
||||||
|
title: "名字",
|
||||||
|
dataIndex: "a",
|
||||||
|
key: "a",
|
||||||
|
width: 100
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "性别",
|
||||||
|
dataIndex: "b",
|
||||||
|
key: "b",
|
||||||
|
width: 100
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "年龄",
|
||||||
|
dataIndex: "c",
|
||||||
|
key: "c",
|
||||||
|
width: 200,
|
||||||
|
sumCol:true,
|
||||||
|
sorter: (a, b) => a.c - b.c
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "操作",
|
||||||
|
dataIndex: "",
|
||||||
|
key: "d",
|
||||||
|
render() {
|
||||||
|
return <a href="#">一些操作</a>;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
const data13 = [
|
||||||
|
{ a: "杨过", b: "男", c: 30, key: "2" },
|
||||||
|
{ a: "令狐冲", b: "男", c: 41, key: "1" },
|
||||||
|
{ a: "郭靖", b: "男", c: 25, key: "3" }
|
||||||
|
];
|
||||||
|
class Demo13 extends Component {
|
||||||
|
getSelectedDataFunc = (data) =>{
|
||||||
|
console.log(data)
|
||||||
|
}
|
||||||
|
render() {
|
||||||
|
let multiObj = {
|
||||||
|
type: "checkbox",
|
||||||
|
};
|
||||||
|
let ComplexTable = multiSelect(sum(sort(Table)));
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<ComplexTable
|
||||||
|
columns={columns13}
|
||||||
|
data={data13}
|
||||||
|
multiSelect={multiObj}
|
||||||
|
getSelectedDataFunc={this.getSelectedDataFunc}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
export default Demo13;
|
||||||
|
|
@ -0,0 +1,258 @@
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* @title edittype表格
|
||||||
|
* @description 这是带有增删改功能的表格
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
|
||||||
|
import Button from "bee-button";
|
||||||
|
import React, { Component } from "react";
|
||||||
|
import Table from "../../src";
|
||||||
|
import Animate from "bee-animate";
|
||||||
|
import Icon from "bee-icon";
|
||||||
|
import Input from "bee-form-control";
|
||||||
|
import Checkbox from "bee-checkbox";
|
||||||
|
import Select from "bee-select";
|
||||||
|
import Popconfirm from "bee-popconfirm";
|
||||||
|
import InputRender from "../../src/render/InputRender.js";
|
||||||
|
import DateRender from "../../src/render/DateRender.js";
|
||||||
|
import SelectRender from "../../src/render/SelectRender.js";
|
||||||
|
|
||||||
|
//日期控件引入
|
||||||
|
import DatePicker from "bee-datepicker";
|
||||||
|
import MonthPicker, { WeekPicker, RangePicker } from "bee-datepicker";
|
||||||
|
|
||||||
|
const format = "YYYY-MM-DD";
|
||||||
|
const format2 = "YYYY-MM";
|
||||||
|
const format3 = "YYYY-MM-DD HH:mm:ss";
|
||||||
|
|
||||||
|
const dateInputPlaceholder = "选择日期";
|
||||||
|
const dateInputPlaceholder2 = "选择年月";
|
||||||
|
|
||||||
|
class Demo14 extends React.Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
this.state = {
|
||||||
|
dataSource: [
|
||||||
|
{
|
||||||
|
key: "0",
|
||||||
|
name: "沉鱼",
|
||||||
|
age: "y",
|
||||||
|
address: "96, 77, 89",
|
||||||
|
datepicker: "2017-06-12",
|
||||||
|
MonthPicker: "2017-02",
|
||||||
|
TimePicker: "2017-09-14 14:24:48"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: "1",
|
||||||
|
name: "落雁",
|
||||||
|
age: "y",
|
||||||
|
address: "90, 70, 80",
|
||||||
|
datepicker: "2017-06-12",
|
||||||
|
MonthPicker: "2017-02",
|
||||||
|
TimePicker: "2017-09-14 14:24:48"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: "2",
|
||||||
|
name: "闭月",
|
||||||
|
age: "n",
|
||||||
|
address: "80, 60, 80",
|
||||||
|
datepicker: "2017-06-12",
|
||||||
|
MonthPicker: "2017-02",
|
||||||
|
TimePicker: "2017-09-14 14:24:48"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: "3",
|
||||||
|
name: "羞花",
|
||||||
|
age: "y",
|
||||||
|
address: "120, 60, 90",
|
||||||
|
datepicker: "2017-06-12",
|
||||||
|
MonthPicker: "2017-02",
|
||||||
|
TimePicker: "2017-09-14 14:24:48"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
count: 4
|
||||||
|
};
|
||||||
|
this.columns = [
|
||||||
|
{
|
||||||
|
title: "姓名",
|
||||||
|
dataIndex: "name",
|
||||||
|
key: "name",
|
||||||
|
width: "100px",
|
||||||
|
render: (text, record, index) => (
|
||||||
|
<InputRender
|
||||||
|
value={text}
|
||||||
|
isclickTrigger={true}
|
||||||
|
onChange={this.onInputChange(index, "name")}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "年龄",
|
||||||
|
dataIndex: "age",
|
||||||
|
key: "age",
|
||||||
|
width: "100px",
|
||||||
|
render: (text, record, index) => (
|
||||||
|
<Checkbox
|
||||||
|
checked={record.age}
|
||||||
|
onChange={this.onCheckChange(index, "age")}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "你懂的",
|
||||||
|
dataIndex: "address",
|
||||||
|
key: "address",
|
||||||
|
width: "200px",
|
||||||
|
render: (text, record, index) => {
|
||||||
|
return (
|
||||||
|
<SelectRender
|
||||||
|
isclickTrigger={true}
|
||||||
|
value="lucy"
|
||||||
|
onChange={this.onSelectChange}
|
||||||
|
>
|
||||||
|
<Option value="jack">boyuzhou</Option>
|
||||||
|
<Option value="lucy">renhualiu</Option>
|
||||||
|
<Option value="disabled" disabled>
|
||||||
|
Disabled
|
||||||
|
</Option>
|
||||||
|
<Option value="yiminghe">yuzhao</Option>
|
||||||
|
</SelectRender>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "年月日",
|
||||||
|
dataIndex: "datepicker",
|
||||||
|
key: "datepicker",
|
||||||
|
width: "200px",
|
||||||
|
render: (text, record, index) => {
|
||||||
|
return (
|
||||||
|
<DateRender
|
||||||
|
value={text}
|
||||||
|
isclickTrigger={true}
|
||||||
|
format={format}
|
||||||
|
onSelect={this.onDateSelect}
|
||||||
|
onChange={this.onDateChange}
|
||||||
|
placeholder={dateInputPlaceholder}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "年月",
|
||||||
|
dataIndex: "MonthPicker",
|
||||||
|
key: "MonthPicker",
|
||||||
|
width: "200px",
|
||||||
|
render: (text, record, index) => {
|
||||||
|
return (
|
||||||
|
<DateRender
|
||||||
|
value={text}
|
||||||
|
isclickTrigger={true}
|
||||||
|
format={format2}
|
||||||
|
onSelect={this.onSelect}
|
||||||
|
onChange={this.onChange}
|
||||||
|
placeholder={dateInputPlaceholder2}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "日期",
|
||||||
|
dataIndex: "TimePicker",
|
||||||
|
key: "TimePicker",
|
||||||
|
render: (text, record, index) => {
|
||||||
|
return (
|
||||||
|
<DateRender
|
||||||
|
value={text}
|
||||||
|
format={format3}
|
||||||
|
isclickTrigger={true}
|
||||||
|
onSelect={this.onDateSelect}
|
||||||
|
onChange={this.onDateChange}
|
||||||
|
placeholder={dateInputPlaceholder}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
];
|
||||||
|
}
|
||||||
|
|
||||||
|
onInputChange = (index, key) => {
|
||||||
|
return value => {
|
||||||
|
const dataSource = [...this.state.dataSource];
|
||||||
|
dataSource[index][key] = value;
|
||||||
|
this.setState({ dataSource });
|
||||||
|
};
|
||||||
|
};
|
||||||
|
onCheckChange = (index, key) => {
|
||||||
|
return value => {
|
||||||
|
const dataSource = [...this.state.dataSource];
|
||||||
|
dataSource[index][key] = value;
|
||||||
|
this.setState({ dataSource });
|
||||||
|
};
|
||||||
|
};
|
||||||
|
onSelectChange = value => {
|
||||||
|
console.log(`selected ${value}`);
|
||||||
|
};
|
||||||
|
onDateChange = d => {
|
||||||
|
console.log(d);
|
||||||
|
};
|
||||||
|
onDateSelect = d => {
|
||||||
|
console.log(d);
|
||||||
|
};
|
||||||
|
onDelete = index => {
|
||||||
|
return () => {
|
||||||
|
const dataSource = [...this.state.dataSource];
|
||||||
|
dataSource.splice(index, 1);
|
||||||
|
this.setState({ dataSource });
|
||||||
|
};
|
||||||
|
};
|
||||||
|
handleAdd = () => {
|
||||||
|
const { count, dataSource } = this.state;
|
||||||
|
const newData = {
|
||||||
|
key: count,
|
||||||
|
name: `凤姐 ${count}`,
|
||||||
|
age: 32,
|
||||||
|
address: `100 100 100`
|
||||||
|
};
|
||||||
|
this.setState({
|
||||||
|
dataSource: [...dataSource, newData],
|
||||||
|
count: count + 1
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
getBodyWrapper = body => {
|
||||||
|
return (
|
||||||
|
<Animate
|
||||||
|
transitionName="move"
|
||||||
|
component="tbody"
|
||||||
|
className={body.props.className}
|
||||||
|
>
|
||||||
|
{body.props.children}
|
||||||
|
</Animate>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
render() {
|
||||||
|
const { dataSource } = this.state;
|
||||||
|
const columns = this.columns;
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<Button
|
||||||
|
className="editable-add-btn"
|
||||||
|
type="ghost"
|
||||||
|
onClick={this.handleAdd}
|
||||||
|
>
|
||||||
|
添加
|
||||||
|
</Button>
|
||||||
|
<Table
|
||||||
|
bordered
|
||||||
|
data={dataSource}
|
||||||
|
columns={columns}
|
||||||
|
getBodyWrapper={this.getBodyWrapper}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Demo14;
|
||||||
|
|
@ -5,176 +5,200 @@
|
||||||
*
|
*
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import React, { Component } from 'react';
|
import Button from "bee-button";
|
||||||
import Button from 'bee-button';
|
import React, { Component } from "react";
|
||||||
import Table from '../../src';
|
import Table from "../../src";
|
||||||
import Animate from 'bee-animate';
|
import Animate from "bee-animate";
|
||||||
import Icon from "bee-icon";
|
import Icon from "bee-icon";
|
||||||
import Input from 'bee-form-control';
|
import Input from "bee-form-control";
|
||||||
import Popconfirm from 'bee-popconfirm';
|
import Popconfirm from "bee-popconfirm";
|
||||||
|
|
||||||
class EditableCell extends React.Component {
|
class EditableCell extends React.Component {
|
||||||
state = {
|
state = {
|
||||||
value: this.props.value,
|
value: this.props.value,
|
||||||
editable: false,
|
editable: false
|
||||||
}
|
};
|
||||||
handleChange = (e) => {
|
handleChange = e => {
|
||||||
const value = e.target.value;
|
const value = e.target.value;
|
||||||
this.setState({ value });
|
this.setState({ value });
|
||||||
}
|
};
|
||||||
check = () => {
|
check = () => {
|
||||||
this.setState({ editable: false });
|
this.setState({ editable: false });
|
||||||
if (this.props.onChange) {
|
if (this.props.onChange) {
|
||||||
this.props.onChange(this.state.value);
|
this.props.onChange(this.state.value);
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
edit = () => {
|
edit = () => {
|
||||||
this.setState({ editable: true });
|
this.setState({ editable: true });
|
||||||
}
|
};
|
||||||
handleKeydown = (event) => {
|
handleKeydown = event => {
|
||||||
console.log(event.keyCode);
|
console.log(event.keyCode);
|
||||||
if(event.keyCode == 13){
|
if (event.keyCode == 13) {
|
||||||
this.check();
|
this.check();
|
||||||
}
|
}
|
||||||
|
};
|
||||||
}
|
|
||||||
render() {
|
render() {
|
||||||
const { value, editable } = this.state;
|
const { value, editable } = this.state;
|
||||||
return (<div className="editable-cell">
|
return (
|
||||||
{
|
<div className="editable-cell">
|
||||||
editable ?
|
{editable ? (
|
||||||
<div className="editable-cell-input-wrapper">
|
<div className="editable-cell-input-wrapper">
|
||||||
<Input
|
<Input
|
||||||
value={value}
|
value={value}
|
||||||
onChange={this.handleChange}
|
onChange={this.handleChange}
|
||||||
onKeyDown = {this.handleKeydown}
|
onKeyDown={this.handleKeydown}
|
||||||
/>
|
/>
|
||||||
<Icon
|
<Icon
|
||||||
type="uf-correct"
|
type="uf-correct"
|
||||||
className="editable-cell-icon-check"
|
className="editable-cell-icon-check"
|
||||||
onClick={this.check}
|
onClick={this.check}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
:
|
) : (
|
||||||
<div className="editable-cell-text-wrapper">
|
<div className="editable-cell-text-wrapper">
|
||||||
{value || ' '}
|
{value || " "}
|
||||||
<Icon
|
<Icon
|
||||||
type="uf-pencil"
|
type="uf-pencil"
|
||||||
className="editable-cell-icon"
|
className="editable-cell-icon"
|
||||||
onClick={this.edit}
|
onClick={this.edit}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
}
|
)}
|
||||||
</div>);
|
</div>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export default class Demo2 extends React.Component {
|
class Demo2 extends React.Component {
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
super(props);
|
super(props);
|
||||||
this.columns = [{
|
this.columns = [
|
||||||
title: '姓名',
|
{
|
||||||
dataIndex: 'name',
|
title: "姓名",
|
||||||
key:'name',
|
dataIndex: "name",
|
||||||
width: '30%',
|
key: "name",
|
||||||
render: (text, record, index) => (
|
width: "30%",
|
||||||
<EditableCell
|
render: (text, record, index) => (
|
||||||
value={text}
|
<EditableCell
|
||||||
onChange={this.onCellChange(index, 'name')}
|
value={text}
|
||||||
/>
|
onChange={this.onCellChange(index, "name")}
|
||||||
),
|
/>
|
||||||
}, {
|
)
|
||||||
title: '年龄',
|
|
||||||
dataIndex: 'age',
|
|
||||||
key:'age',
|
|
||||||
}, {
|
|
||||||
title: '你懂的',
|
|
||||||
dataIndex: 'address',
|
|
||||||
key:'address',
|
|
||||||
}, {
|
|
||||||
title: '操作',
|
|
||||||
dataIndex: 'operation',
|
|
||||||
key: 'operation',
|
|
||||||
render: (text, record, index) => {
|
|
||||||
return (
|
|
||||||
this.state.dataSource.length > 1 ?
|
|
||||||
(
|
|
||||||
<Popconfirm content="确认删除?" id='aa' onClose={this.onDelete(index)}>
|
|
||||||
<Icon type="uf-del"></Icon>
|
|
||||||
</Popconfirm>
|
|
||||||
) : null
|
|
||||||
);
|
|
||||||
},
|
},
|
||||||
}];
|
{
|
||||||
|
title: "年龄",
|
||||||
|
dataIndex: "age",
|
||||||
|
key: "age"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "你懂的",
|
||||||
|
dataIndex: "address",
|
||||||
|
key: "address"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "操作",
|
||||||
|
dataIndex: "operation",
|
||||||
|
key: "operation",
|
||||||
|
render: (text, record, index) => {
|
||||||
|
return this.state.dataSource.length > 1 ? (
|
||||||
|
<Popconfirm content="确认删除?" id="aa" onClose={this.onDelete(index)}>
|
||||||
|
<Icon type="uf-del" />
|
||||||
|
</Popconfirm>
|
||||||
|
) : null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
this.state = {
|
this.state = {
|
||||||
dataSource: [{
|
dataSource: [
|
||||||
key: '0',
|
{
|
||||||
name: '沉鱼',
|
key: "0",
|
||||||
age: '18',
|
name: "沉鱼",
|
||||||
address: '96, 77, 89',
|
age: "18",
|
||||||
}, {
|
address: "96, 77, 89"
|
||||||
key: '1',
|
},
|
||||||
name: '落雁',
|
{
|
||||||
age: '16',
|
key: "1",
|
||||||
address: '90, 70, 80',
|
name: "落雁",
|
||||||
}, {
|
age: "16",
|
||||||
key: '2',
|
address: "90, 70, 80"
|
||||||
name: '闭月',
|
},
|
||||||
age: '17',
|
{
|
||||||
address: '80, 60, 80',
|
key: "2",
|
||||||
}, {
|
name: "闭月",
|
||||||
key: '3',
|
age: "17",
|
||||||
name: '羞花',
|
address: "80, 60, 80"
|
||||||
age: '20',
|
},
|
||||||
address: '120, 60, 90',
|
{
|
||||||
}],
|
key: "3",
|
||||||
count: 4,
|
name: "羞花",
|
||||||
|
age: "20",
|
||||||
|
address: "120, 60, 90"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
count: 4
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
onCellChange = (index, key) => {
|
onCellChange = (index, key) => {
|
||||||
return (value) => {
|
return value => {
|
||||||
const dataSource = [...this.state.dataSource];
|
const dataSource = [...this.state.dataSource];
|
||||||
dataSource[index][key] = value;
|
dataSource[index][key] = value;
|
||||||
this.setState({ dataSource });
|
this.setState({ dataSource });
|
||||||
};
|
};
|
||||||
}
|
};
|
||||||
onDelete = (index) => {
|
onDelete = index => {
|
||||||
return () => {
|
return () => {
|
||||||
const dataSource = [...this.state.dataSource];
|
const dataSource = [...this.state.dataSource];
|
||||||
dataSource.splice(index, 1);
|
dataSource.splice(index, 1);
|
||||||
this.setState({ dataSource });
|
this.setState({ dataSource });
|
||||||
};
|
};
|
||||||
}
|
};
|
||||||
handleAdd = () => {
|
handleAdd = () => {
|
||||||
const { count, dataSource } = this.state;
|
const { count, dataSource } = this.state;
|
||||||
const newData = {
|
const newData = {
|
||||||
key: count,
|
key: count,
|
||||||
name: `凤姐 ${count}`,
|
name: `凤姐 ${count}`,
|
||||||
age: 32,
|
age: 32,
|
||||||
address: `100 100 100`,
|
address: `100 100 100`
|
||||||
};
|
};
|
||||||
this.setState({
|
this.setState({
|
||||||
dataSource: [...dataSource, newData],
|
dataSource: [...dataSource, newData],
|
||||||
count: count + 1,
|
count: count + 1
|
||||||
});
|
});
|
||||||
}
|
};
|
||||||
|
|
||||||
getBodyWrapper = (body) => {
|
getBodyWrapper = body => {
|
||||||
return (
|
return (
|
||||||
<Animate transitionName="move" component="tbody" className={body.props.className}>
|
<Animate
|
||||||
|
transitionName="move"
|
||||||
|
component="tbody"
|
||||||
|
className={body.props.className}
|
||||||
|
>
|
||||||
{body.props.children}
|
{body.props.children}
|
||||||
</Animate>
|
</Animate>
|
||||||
);
|
);
|
||||||
}
|
};
|
||||||
render() {
|
render() {
|
||||||
const { dataSource } = this.state;
|
const { dataSource } = this.state;
|
||||||
const columns = this.columns;
|
const columns = this.columns;
|
||||||
return (<div>
|
return (
|
||||||
<Button className="editable-add-btn" type="ghost" onClick={this.handleAdd}>添加</Button>
|
<div>
|
||||||
<Table bordered data={dataSource} columns={columns} getBodyWrapper={this.getBodyWrapper} />
|
<Button
|
||||||
</div>);
|
className="editable-add-btn"
|
||||||
|
type="ghost"
|
||||||
|
onClick={this.handleAdd}
|
||||||
|
>
|
||||||
|
添加
|
||||||
|
</Button>
|
||||||
|
<Table
|
||||||
|
bordered
|
||||||
|
data={dataSource}
|
||||||
|
columns={columns}
|
||||||
|
getBodyWrapper={this.getBodyWrapper}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export default Demo2;
|
||||||
|
|
|
||||||
|
|
@ -5,13 +5,10 @@
|
||||||
*
|
*
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import React, { Component } from 'react';
|
|
||||||
import Button from 'bee-button';
|
import Button from 'bee-button';
|
||||||
|
import React, { Component } from 'react';
|
||||||
import Table from '../../src';
|
import Table from '../../src';
|
||||||
import Animate from 'bee-animate';
|
|
||||||
import Icon from "bee-icon";
|
|
||||||
import Input from 'bee-form-control';
|
|
||||||
import Popconfirm from 'bee-popconfirm';
|
|
||||||
|
|
||||||
const { ColumnGroup, Column } = Table;
|
const { ColumnGroup, Column } = Table;
|
||||||
|
|
||||||
|
|
@ -60,4 +57,4 @@ class Demo3 extends Component {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export default Demo3;
|
export default Demo3;
|
||||||
|
|
@ -5,11 +5,11 @@
|
||||||
*
|
*
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
|
||||||
import React, { Component } from 'react';
|
import React, { Component } from 'react';
|
||||||
import Table from '../../src';
|
import Table from '../../src';
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const columns4 = [
|
const columns4 = [
|
||||||
{
|
{
|
||||||
title: "Name",
|
title: "Name",
|
||||||
|
|
@ -100,4 +100,5 @@ class Demo4 extends Component {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export default Demo4;
|
|
||||||
|
export default Demo4;
|
||||||
|
|
@ -5,6 +5,8 @@
|
||||||
*
|
*
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
import React, { Component } from 'react';
|
import React, { Component } from 'react';
|
||||||
import Table from '../../src';
|
import Table from '../../src';
|
||||||
|
|
||||||
|
|
@ -62,4 +64,4 @@ class Demo5 extends Component {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export default Demo5;
|
export default Demo5;
|
||||||
|
|
@ -5,11 +5,11 @@
|
||||||
*
|
*
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
|
||||||
import React, { Component } from 'react';
|
import React, { Component } from 'react';
|
||||||
import Table from '../../src';
|
import Table from '../../src';
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const columns6 = [
|
const columns6 = [
|
||||||
{
|
{
|
||||||
title: "Full Name",
|
title: "Full Name",
|
||||||
|
|
|
||||||
|
|
@ -5,6 +5,7 @@
|
||||||
*
|
*
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
|
||||||
import React, {Component} from 'react';
|
import React, {Component} from 'react';
|
||||||
import Table from '../../src';
|
import Table from '../../src';
|
||||||
|
|
||||||
|
|
@ -24,6 +25,7 @@ const columns7 = [
|
||||||
];
|
];
|
||||||
|
|
||||||
const data7 = [
|
const data7 = [
|
||||||
|
|
||||||
{a: "02级一班", b: "2", c: "欧阳锋", key: "1"},
|
{a: "02级一班", b: "2", c: "欧阳锋", key: "1"},
|
||||||
{a: "03级二班", b: "3", c: "归海一刀", key: "2"},
|
{a: "03级二班", b: "3", c: "归海一刀", key: "2"},
|
||||||
{a: "05级三班", b: "1", c: "一拳超人", key: "3"}
|
{a: "05级三班", b: "1", c: "一拳超人", key: "3"}
|
||||||
|
|
@ -79,7 +81,7 @@ class Demo7 extends Component {
|
||||||
title={currentData => <div>标题: 我是主表</div>}
|
title={currentData => <div>标题: 我是主表</div>}
|
||||||
/>
|
/>
|
||||||
<Table
|
<Table
|
||||||
style={{ marginTop: 40 }}
|
style={{marginTop: 40}}
|
||||||
columns={columns7_1}
|
columns={columns7_1}
|
||||||
data={this.state.children_data}
|
data={this.state.children_data}
|
||||||
title={currentData => <div>标题: 我是子表</div>}
|
title={currentData => <div>标题: 我是子表</div>}
|
||||||
|
|
@ -89,5 +91,5 @@ class Demo7 extends Component {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export default Demo7;
|
|
||||||
|
|
||||||
|
export default Demo7;
|
||||||
|
|
|
||||||
|
|
@ -6,9 +6,11 @@
|
||||||
*import {Table} from 'tinper-bee';
|
*import {Table} from 'tinper-bee';
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
|
||||||
import React, {Component} from 'react';
|
import React, {Component} from 'react';
|
||||||
|
|
||||||
import Table from '../../src';
|
import Table from '../../src';
|
||||||
import Pagination from 'bee-pagination';
|
import Pagination from "bee-pagination";
|
||||||
|
|
||||||
|
|
||||||
const columns8 = [
|
const columns8 = [
|
||||||
|
|
@ -73,5 +75,4 @@ class Demo8 extends Component {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export default Demo8;
|
export default Demo8;
|
||||||
|
|
@ -8,6 +8,7 @@
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import React, {Component} from 'react';
|
import React, {Component} from 'react';
|
||||||
|
|
||||||
import Table from '../../src';
|
import Table from '../../src';
|
||||||
import Icon from "bee-icon";
|
import Icon from "bee-icon";
|
||||||
import InputGroup from 'bee-input-group';
|
import InputGroup from 'bee-input-group';
|
||||||
|
|
@ -166,5 +167,4 @@ class Demo9 extends Component {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export default Demo9;
|
export default Demo9;
|
||||||
|
|
||||||
|
|
@ -4,14 +4,7 @@ import { Panel } from 'bee-panel';
|
||||||
import Button from 'bee-button';
|
import Button from 'bee-button';
|
||||||
import React, { Component } from 'react';
|
import React, { Component } from 'react';
|
||||||
import ReactDOM from 'react-dom';
|
import ReactDOM from 'react-dom';
|
||||||
import Table from '../src';
|
|
||||||
import Animate from 'bee-animate';
|
|
||||||
import Pagination from "bee-pagination";
|
|
||||||
import Icon from "bee-icon";
|
|
||||||
import InputGroup from 'bee-input-group';
|
|
||||||
import FormControl from 'bee-form-control';
|
|
||||||
import Input from 'bee-form-control';
|
|
||||||
import Popconfirm from 'bee-popconfirm';
|
|
||||||
|
|
||||||
const CARET = <i className="uf uf-arrow-down"></i>;
|
const CARET = <i className="uf uf-arrow-down"></i>;
|
||||||
|
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -50,3 +50,9 @@
|
||||||
|fixed| 当表水平滚动时，此列将被固定：true或'left'或'right'| true/'left'/'right'|-|
|
|fixed| 当表水平滚动时，此列将被固定：true或'left'或'right'| true/'left'/'right'|-|
|
||||||
|render|cell的render函数有三个参数：这个单元格的文本，这行的记录，这行的索引，它返回一个对象：{children：value，props：{colSpan：1，rowSpan：1}} ==>'children'是这个单元格的文本，props是这个单元格的一些设置|-|
|
|render|cell的render函数有三个参数：这个单元格的文本，这行的记录，这行的索引，它返回一个对象：{children：value，props：{colSpan：1，rowSpan：1}} ==>'children'是这个单元格的文本，props是这个单元格的一些设置|-|
|
||||||
|onCellClick|单击列的单元格时调用|Function(row, event)|-|
|
|onCellClick|单击列的单元格时调用|Function(row, event)|-|
|
||||||
|
|
||||||
|
|
||||||
|
{% include "mixin.md"%}
|
||||||
|
|
||||||
|
|
||||||
|
{% include "rendertype.md"%}
|
||||||
|
|
@ -0,0 +1,44 @@
|
||||||
|
## mixin
|
||||||
|
|
||||||
|
Table拓展功能方法
|
||||||
|
|
||||||
|
|
||||||
|
### multiSelect
|
||||||
|
|
||||||
|
全选功能
|
||||||
|
|
||||||
|
#### Table新增参数
|
||||||
|
|
||||||
|
| 参数 | 说明 | 类型 | 默认值 |
|
||||||
|
| ------------------- | -------------------------- | -------- | -------- |
|
||||||
|
| multiSelect | 全选功能的配置对象，属性参见下面 | obj | {} |
|
||||||
|
| multiSelect.type | 全选功能的类型，多选或单选（暂时只支持多选） | string | checkbox |
|
||||||
|
| multiSelect.param | 通过设置该参数来设计获取的数据数组，默认返还所有数据 | string | '' |
|
||||||
|
| getSelectedDataFunc | 返回当前选中的数据数组 | Function | 无 |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### sort
|
||||||
|
|
||||||
|
排序功能
|
||||||
|
|
||||||
|
#### Column新增参数
|
||||||
|
|
||||||
|
| 参数 | 说明 | 类型 | 默认值 |
|
||||||
|
| ------ | ---------- | -------- | ---- |
|
||||||
|
| sorter | 排序函数，可以自定义 | Function | 无 |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### sum
|
||||||
|
|
||||||
|
排序功能
|
||||||
|
|
||||||
|
#### Column新增参数
|
||||||
|
|
||||||
|
| 参数 | 说明 | 类型 | 默认值 |
|
||||||
|
| ------ | ---------- | -------- | ---- |
|
||||||
|
| sumCol | 该列设置为合计列，合计行中会显示合计数据 | boolean | false |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -0,0 +1,5 @@
|
||||||
|
## Table
|
||||||
|
## Code display
|
||||||
|
## API
|
||||||
|
|Property|Description|Type|Default|
|
||||||
|
|:---|:-----|:----|:------|
|
||||||
|
|
@ -0,0 +1,13 @@
|
||||||
|
## rendertype
|
||||||
|
在表格中提供了多种rendertype可以供选择，比如下拉框，单选框，复选框，日期等
|
||||||
|
|
||||||
|
### InputRender
|
||||||
|
输入框类型render
|
||||||
|
|
||||||
|
#### 配置
|
||||||
|
| 参数 | 说明 | 类型 | 默认值 |
|
||||||
|
| -------------- | -------------- | -------- | ----- |
|
||||||
|
| value | render的值 | string | 无 |
|
||||||
|
| isclickTrigger | 是否使用点击触发编辑状态 | boolean | false |
|
||||||
|
| onChange | 当值发生改变的时候触发的方法 | Function | 无 |
|
||||||
|
|
||||||
|
|
@ -0,0 +1,5 @@
|
||||||
|
## Table
|
||||||
|
## Code display
|
||||||
|
## API
|
||||||
|
|Property|Description|Type|Default|
|
||||||
|
|:---|:-----|:----|:------|
|
||||||
|
|
@ -17,6 +17,7 @@
|
||||||
<script src="./node_modules/es5-shim/es5-sham.min.js"></script>
|
<script src="./node_modules/es5-shim/es5-sham.min.js"></script>
|
||||||
<script src="./node_modules/react/dist/react-with-addons.js"></script>
|
<script src="./node_modules/react/dist/react-with-addons.js"></script>
|
||||||
<script src="./node_modules/react-dom/dist/react-dom.js"></script>
|
<script src="./node_modules/react-dom/dist/react-dom.js"></script>
|
||||||
|
<script src="//design.yonyoucloud.com/static/prop-types/15.6.0/prop-types.min.js"></script>
|
||||||
<script src="./dist/demo.js"></script>
|
<script src="./dist/demo.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -34,14 +34,17 @@
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"classnames": "^2.2.5",
|
"classnames": "^2.2.5",
|
||||||
|
"lodash.clonedeep": "^4.5.0",
|
||||||
"object-path": "^0.11.3",
|
"object-path": "^0.11.3",
|
||||||
"shallowequal": "^0.2.2",
|
"shallowequal": "^0.2.2",
|
||||||
"tinper-bee-core": "latest",
|
"tinper-bee-core": "^0.1.6",
|
||||||
"warning": "^3.0.0"
|
"warning": "^3.0.0"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"bee-animate": "latest",
|
"bee-animate": "latest",
|
||||||
"bee-button": "latest",
|
"bee-button": "latest",
|
||||||
|
"bee-checkbox": "^0.2.4",
|
||||||
|
"bee-datepicker": "^0.1.7",
|
||||||
"bee-form-control": "^0.1.8",
|
"bee-form-control": "^0.1.8",
|
||||||
"bee-icon": "0.0.5",
|
"bee-icon": "0.0.5",
|
||||||
"bee-input-group": "^0.1.12",
|
"bee-input-group": "^0.1.12",
|
||||||
|
|
@ -49,6 +52,8 @@
|
||||||
"bee-pagination": "^0.1.7",
|
"bee-pagination": "^0.1.7",
|
||||||
"bee-panel": "latest",
|
"bee-panel": "latest",
|
||||||
"bee-popconfirm": "^0.2.2",
|
"bee-popconfirm": "^0.2.2",
|
||||||
|
"bee-select": "^0.1.6",
|
||||||
|
"bee-tools": "^0.3.2",
|
||||||
"chai": "^3.5.0",
|
"chai": "^3.5.0",
|
||||||
"console-polyfill": "~0.2.1",
|
"console-polyfill": "~0.2.1",
|
||||||
"enzyme": "^2.4.1",
|
"enzyme": "^2.4.1",
|
||||||
|
|
|
||||||
|
|
@ -96,6 +96,9 @@ $table-move-in-color: $bg-color-base;
|
||||||
padding: $vertical-padding $horizontal-padding;
|
padding: $vertical-padding $horizontal-padding;
|
||||||
border-bottom: 1px solid $table-border-color;
|
border-bottom: 1px solid $table-border-color;
|
||||||
}
|
}
|
||||||
|
&-footer &{
|
||||||
|
margin: (-$vertical-padding) (-$horizontal-padding);
|
||||||
|
}
|
||||||
|
|
||||||
&-placeholder {
|
&-placeholder {
|
||||||
padding: 16px 8px;
|
padding: 16px 8px;
|
||||||
|
|
@ -112,6 +115,7 @@ $table-move-in-color: $bg-color-base;
|
||||||
&-expand-icon {
|
&-expand-icon {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
margin-right: 10px;
|
||||||
width: 16px;
|
width: 16px;
|
||||||
height: 16px;
|
height: 16px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,153 @@
|
||||||
|
import React, { Component } from "react";
|
||||||
|
import Checkbox from "bee-checkbox";
|
||||||
|
/**
|
||||||
|
* multiSelect={
|
||||||
|
* type--默认值为checkbox
|
||||||
|
* param--可以设置返回的选中的数据属性；默认值：null；
|
||||||
|
* }
|
||||||
|
* getSelectedDataFunc--function，能获取到选中的数据
|
||||||
|
* 使用全选时得注意，data中的key值一定要是唯一值
|
||||||
|
*/
|
||||||
|
module.exports = function multiSelect(Table) {
|
||||||
|
Array.prototype.indexOf = function(val) {
|
||||||
|
for (var i = 0; i < this.length; i++) {
|
||||||
|
if (this[i] == val) return i;
|
||||||
|
}
|
||||||
|
return -1;
|
||||||
|
};
|
||||||
|
Array.prototype.remove = function(val) {
|
||||||
|
var index = this.indexOf(val);
|
||||||
|
if (index > -1) {
|
||||||
|
this.splice(index, 1);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
return class BookLoader extends Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
this.state = {
|
||||||
|
checkedAll: false,
|
||||||
|
checkedObj: {},
|
||||||
|
selIds: [],
|
||||||
|
data: this.props.data
|
||||||
|
};
|
||||||
|
}
|
||||||
|
onAllCheckChange = () => {
|
||||||
|
let self = this;
|
||||||
|
let listData = self.state.data.concat();
|
||||||
|
let checkedObj = Object.assign({}, self.state.checkedObj);
|
||||||
|
let data = self.props.data;
|
||||||
|
let selIds = [];
|
||||||
|
let id = self.props.multiSelect.param;
|
||||||
|
for (var i = 0; i < data.length; i++) {
|
||||||
|
checkedObj[data[i]["key"]] = !self.state.checkedAll;
|
||||||
|
}
|
||||||
|
if (self.state.checkedAll) {
|
||||||
|
selIds = [];
|
||||||
|
} else {
|
||||||
|
for (var i = 0; i < listData.length; i++) {
|
||||||
|
if (id) {
|
||||||
|
selIds[i] = listData[i][id];
|
||||||
|
} else {
|
||||||
|
selIds[i] = listData[i];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
self.setState({
|
||||||
|
checkedAll: !self.state.checkedAll,
|
||||||
|
checkedObj: checkedObj,
|
||||||
|
selIds: selIds
|
||||||
|
});
|
||||||
|
self.props.getSelectedDataFunc(selIds);
|
||||||
|
};
|
||||||
|
onCheckboxChange = (text, record, index) => {
|
||||||
|
let self = this;
|
||||||
|
let allFlag = false;
|
||||||
|
let selIds = self.state.selIds;
|
||||||
|
let id = self.props.multiSelect
|
||||||
|
? self.props.multiSelect.param
|
||||||
|
? record[self.props.multiSelect.param]
|
||||||
|
: record
|
||||||
|
: record;
|
||||||
|
let checkedObj = Object.assign({}, self.state.checkedObj);
|
||||||
|
let checkedArray = Object.keys(checkedObj);
|
||||||
|
let { getSelectedDataFunc } = self.props;
|
||||||
|
if (checkedObj[record["key"]]) {
|
||||||
|
selIds.remove(id);
|
||||||
|
} else {
|
||||||
|
selIds.push(id);
|
||||||
|
}
|
||||||
|
checkedObj[record["key"]] = !checkedObj[record["key"]];
|
||||||
|
for (var i = 0; i < checkedArray.length; i++) {
|
||||||
|
if (!checkedObj[checkedArray[i]]) {
|
||||||
|
allFlag = false;
|
||||||
|
break;
|
||||||
|
} else {
|
||||||
|
allFlag = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
self.setState({
|
||||||
|
checkedAll: allFlag,
|
||||||
|
checkedObj: checkedObj,
|
||||||
|
selIds: selIds
|
||||||
|
});
|
||||||
|
if(typeof getSelectedDataFunc === 'function'){
|
||||||
|
getSelectedDataFunc(selIds);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
renderColumnsMultiSelect(columns) {
|
||||||
|
const { data } = this.state;
|
||||||
|
let checkedObj = Object.assign({}, this.state.checkedObj);
|
||||||
|
let checkedArray = Object.keys(checkedObj);
|
||||||
|
let { multiSelect } = this.props;
|
||||||
|
let select_column = {};
|
||||||
|
let indeterminate_bool = false;
|
||||||
|
if (!multiSelect || !multiSelect.type) {
|
||||||
|
multiSelect = Object.assign({}, multiSelect, { type: "checkbox" });
|
||||||
|
}
|
||||||
|
if (multiSelect && multiSelect.type === "checkbox") {
|
||||||
|
let i = checkedArray.length;
|
||||||
|
while (i--) {
|
||||||
|
if (checkedObj[checkedArray[i]]) {
|
||||||
|
indeterminate_bool = true;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
let defaultColumns = [
|
||||||
|
{
|
||||||
|
title: (
|
||||||
|
<Checkbox
|
||||||
|
className="table-checkbox"
|
||||||
|
checked={this.state.checkedAll}
|
||||||
|
indeterminate={indeterminate_bool && !this.state.checkedAll}
|
||||||
|
onChange={this.onAllCheckChange}
|
||||||
|
/>
|
||||||
|
),
|
||||||
|
key: "checkbox",
|
||||||
|
dataIndex: "checkbox",
|
||||||
|
width: "5%",
|
||||||
|
render: (text, record, index) => {
|
||||||
|
return (
|
||||||
|
<Checkbox
|
||||||
|
className="table-checkbox"
|
||||||
|
checked={checkedObj[record.key]}
|
||||||
|
onChange={this.onCheckboxChange.bind(
|
||||||
|
this,
|
||||||
|
text,
|
||||||
|
record,
|
||||||
|
index
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
];
|
||||||
|
columns = defaultColumns.concat(columns);
|
||||||
|
}
|
||||||
|
return columns;
|
||||||
|
}
|
||||||
|
render() {
|
||||||
|
let columns = this.renderColumnsMultiSelect(this.props.columns).concat();
|
||||||
|
return <Table {...this.props} columns={columns} />;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,99 @@
|
||||||
|
import React, { Component } from "react";
|
||||||
|
import Icon from "bee-icon";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 参数：prefixCls，默认bee-table,用于设置图标的样式
|
||||||
|
* @param {*} Table
|
||||||
|
*/
|
||||||
|
export default function sort(Table) {
|
||||||
|
return class Demo11 extends Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
this.state = {
|
||||||
|
sortOrder: "",
|
||||||
|
data: this.props.data
|
||||||
|
};
|
||||||
|
}
|
||||||
|
toggleSortOrder = (order, column) => {
|
||||||
|
let { sortOrder, data, oldData } = this.state;
|
||||||
|
let ascend_sort = function(key) {
|
||||||
|
return function(a, b) {
|
||||||
|
return a.key - b.key;
|
||||||
|
};
|
||||||
|
};
|
||||||
|
let descend_sort = function(key) {
|
||||||
|
return function(a, b) {
|
||||||
|
return b.key - a.key;
|
||||||
|
};
|
||||||
|
};
|
||||||
|
if (sortOrder === order) {
|
||||||
|
// 切换为未排序状态
|
||||||
|
order = "";
|
||||||
|
}
|
||||||
|
if (!oldData) {
|
||||||
|
oldData = data.concat();
|
||||||
|
}
|
||||||
|
if (order === "ascend") {
|
||||||
|
data = data.sort(function(a, b) {
|
||||||
|
return column.sorter(a, b);
|
||||||
|
});
|
||||||
|
} else if (order === "descend") {
|
||||||
|
data = data.sort(function(a, b) {
|
||||||
|
return column.sorter(b, a);
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
data = oldData.concat();
|
||||||
|
}
|
||||||
|
this.setState({
|
||||||
|
sortOrder: order,
|
||||||
|
data: data,
|
||||||
|
oldData: oldData
|
||||||
|
});
|
||||||
|
};
|
||||||
|
renderColumnsDropdown(columns) {
|
||||||
|
const { sortOrder } = this.state;
|
||||||
|
const prefixCls = this.props.prefixCls || "bee-table";
|
||||||
|
return columns.map(originColumn => {
|
||||||
|
let column = Object.assign({}, originColumn);
|
||||||
|
let sortButton;
|
||||||
|
if (column.sorter) {
|
||||||
|
const isAscend = sortOrder === "ascend";
|
||||||
|
const isDescend = sortOrder === "descend";
|
||||||
|
sortButton = (
|
||||||
|
<div className={`${prefixCls}-column-sorter`}>
|
||||||
|
<span
|
||||||
|
className={`${prefixCls}-column-sorter-up ${isAscend
|
||||||
|
? "on"
|
||||||
|
: "off"}`}
|
||||||
|
title="↑"
|
||||||
|
onClick={() => this.toggleSortOrder("ascend", column)}
|
||||||
|
>
|
||||||
|
<Icon type="uf-triangle-up" />
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
className={`${prefixCls}-column-sorter-down ${isDescend
|
||||||
|
? "on"
|
||||||
|
: "off"}`}
|
||||||
|
title="↓"
|
||||||
|
onClick={() => this.toggleSortOrder("descend", column)}
|
||||||
|
>
|
||||||
|
<Icon type="uf-triangle-down" />
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
column.title = (
|
||||||
|
<span>
|
||||||
|
{column.title}
|
||||||
|
{sortButton}
|
||||||
|
</span>
|
||||||
|
);
|
||||||
|
return column;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
render() {
|
||||||
|
let columns = this.renderColumnsDropdown(this.props.columns.concat());
|
||||||
|
return <Table {...this.props} columns={columns} data={this.state.data} />;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,71 @@
|
||||||
|
import React from "react";
|
||||||
|
import clonedeep from "lodash.clonedeep";
|
||||||
|
|
||||||
|
//创建新列存放 “合计” 字段
|
||||||
|
let columns2 = {
|
||||||
|
title: "合计",
|
||||||
|
key: "showSum",
|
||||||
|
dataIndex: "showSum"
|
||||||
|
};
|
||||||
|
|
||||||
|
let sum = Table => {
|
||||||
|
return class SumTable extends React.Component {
|
||||||
|
//无状态
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
}
|
||||||
|
//合计数字列,并将计算所得数据存储到一个obj对象中
|
||||||
|
currentFooter = () => {
|
||||||
|
let data_2 = this.props.data;
|
||||||
|
let columns_sum = clonedeep(this.props.columns);
|
||||||
|
let sumCol_index;
|
||||||
|
//用一个对象存储合计数据，这里合计对象的属性对应每列字段
|
||||||
|
for (let i = 0; i < columns_sum.length; i++) {
|
||||||
|
if (columns_sum[i].sumCol) {
|
||||||
|
sumCol_index = columns_sum[i].dataIndex;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
debugger;
|
||||||
|
let obj = {};
|
||||||
|
obj[sumCol_index] = 0;
|
||||||
|
if (Array.isArray(data_2)) {
|
||||||
|
for (let i = 0; i < data_2.length; i++) {
|
||||||
|
if (typeof data_2[i][sumCol_index] == "number") {
|
||||||
|
obj[sumCol_index] += data_2[i][sumCol_index];
|
||||||
|
} else {
|
||||||
|
obj[sumCol_index] = "";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
obj.key = "sumData";
|
||||||
|
obj.showSum = "合计";
|
||||||
|
obj = [obj];
|
||||||
|
//将设置的和用户传入的合并属性
|
||||||
|
// if (columns_sum[0].dataIndex === "checkbox") {
|
||||||
|
// columns_sum[1] = Object.assign({}, columns_sum[1], columns2);
|
||||||
|
// } else {
|
||||||
|
columns_sum[0] = Object.assign({}, columns_sum[0], columns2);
|
||||||
|
// }
|
||||||
|
//除去列为特殊渲染的，避免像a标签这种html代码写入到合计中
|
||||||
|
columns_sum.map((item, index) => {
|
||||||
|
if (typeof item.render == "function") {
|
||||||
|
item.render = "";
|
||||||
|
}
|
||||||
|
return item;
|
||||||
|
});
|
||||||
|
return <Table showHeader={false} columns={columns_sum} data={obj} />;
|
||||||
|
};
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<Table
|
||||||
|
columns={this.props.columns}
|
||||||
|
data={this.props.data}
|
||||||
|
footer={this.currentFooter}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
export default sum;
|
||||||
|
|
@ -0,0 +1,59 @@
|
||||||
|
import React, { Component } from "react";
|
||||||
|
import Icon from "bee-icon";
|
||||||
|
import Checkbox from "bee-checkbox";
|
||||||
|
|
||||||
|
export default class CheckboxRender extends Component {
|
||||||
|
state = {
|
||||||
|
value: this.props.value,
|
||||||
|
editable: false
|
||||||
|
};
|
||||||
|
handleChange = e => {
|
||||||
|
const value = e.target.value;
|
||||||
|
this.setState({ value });
|
||||||
|
};
|
||||||
|
check = () => {
|
||||||
|
this.setState({ editable: false });
|
||||||
|
if (this.props.onChange) {
|
||||||
|
this.props.onChange(this.state.value);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
edit = () => {
|
||||||
|
this.setState({ editable: true });
|
||||||
|
};
|
||||||
|
handleKeydown = event => {
|
||||||
|
console.log(event.keyCode);
|
||||||
|
if (event.keyCode == 13) {
|
||||||
|
this.check();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
render() {
|
||||||
|
const { value, editable } = this.state;
|
||||||
|
let { isclickTrigger } = this.props;
|
||||||
|
let cellContent = "";
|
||||||
|
if (editable) {
|
||||||
|
cellContent = (
|
||||||
|
<div className="editable-cell-input-wrapper">
|
||||||
|
<Checkbox
|
||||||
|
onChange={this.handleChange}
|
||||||
|
onKeyDown={this.handleKeydown}
|
||||||
|
onBlur={this.check}
|
||||||
|
autoFocus
|
||||||
|
value={value}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
cellContent = (
|
||||||
|
<div className="editable-cell-text-wrapper">
|
||||||
|
{value || " "}
|
||||||
|
<Icon
|
||||||
|
type="uf-pencil"
|
||||||
|
className="editable-cell-icon"
|
||||||
|
onClick={this.edit}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
return <div className="editable-cell">{cellContent}</div>;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,88 @@
|
||||||
|
import React, { Component } from "react";
|
||||||
|
import Icon from "bee-icon";
|
||||||
|
import DatePicker from "bee-datepicker";
|
||||||
|
import moment from "moment";
|
||||||
|
|
||||||
|
export default class DateRender extends Component {
|
||||||
|
state = {
|
||||||
|
value: this.props.value,
|
||||||
|
editable: false
|
||||||
|
};
|
||||||
|
handleChange = e => {
|
||||||
|
let { format } = this.props || "YYYY-MM-DD";
|
||||||
|
const value = e.format(format);
|
||||||
|
this.setState({ value });
|
||||||
|
if (this.props.onChange) {
|
||||||
|
this.props.onChange(value);
|
||||||
|
}
|
||||||
|
setTimeout(() => {
|
||||||
|
this.setState({ editable: false });
|
||||||
|
}, 0);
|
||||||
|
};
|
||||||
|
check = () => {
|
||||||
|
this.setState({ editable: false });
|
||||||
|
if (this.props.onChange) {
|
||||||
|
this.props.onChange(this.state.value);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
edit = () => {
|
||||||
|
this.setState({ editable: true });
|
||||||
|
};
|
||||||
|
handleKeydown = event => {
|
||||||
|
console.log(event.keyCode);
|
||||||
|
if (event.keyCode == 13) {
|
||||||
|
this.check();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
render() {
|
||||||
|
const { value, editable } = this.state;
|
||||||
|
let { isclickTrigger } = this.props;
|
||||||
|
let cellContent = "";
|
||||||
|
let date_value = moment(value);
|
||||||
|
if (editable) {
|
||||||
|
cellContent = isclickTrigger ? (
|
||||||
|
<div className="editable-cell-input-wrapper">
|
||||||
|
<DatePicker
|
||||||
|
{...this.props}
|
||||||
|
value={date_value}
|
||||||
|
onChange={this.handleChange}
|
||||||
|
/>
|
||||||
|
<Icon
|
||||||
|
type="uf-correct"
|
||||||
|
className="editable-cell-icon-check"
|
||||||
|
onClick={this.check}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="editable-cell-input-wrapper">
|
||||||
|
<DatePicker
|
||||||
|
{...this.props}
|
||||||
|
value={date_value}
|
||||||
|
onChange={this.handleChange}
|
||||||
|
/>
|
||||||
|
<Icon
|
||||||
|
type="uf-correct"
|
||||||
|
className="editable-cell-icon-check"
|
||||||
|
onClick={this.check}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
cellContent = isclickTrigger ? (
|
||||||
|
<div className="editable-cell-text-wrapper" onClick={this.edit}>
|
||||||
|
{value || " "}
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="editable-cell-text-wrapper">
|
||||||
|
{value || " "}
|
||||||
|
<Icon
|
||||||
|
type="uf-pencil"
|
||||||
|
className="editable-cell-icon"
|
||||||
|
onClick={this.edit}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
return <div className="editable-cell">{cellContent}</div>;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,75 @@
|
||||||
|
import React, { Component } from "react";
|
||||||
|
import Icon from "bee-icon";
|
||||||
|
import Input from "bee-form-control";
|
||||||
|
|
||||||
|
export default class InputRender extends Component {
|
||||||
|
state = {
|
||||||
|
value: this.props.value,
|
||||||
|
editable: false
|
||||||
|
};
|
||||||
|
handleChange = e => {
|
||||||
|
const value = e;
|
||||||
|
this.setState({ value });
|
||||||
|
};
|
||||||
|
check = () => {
|
||||||
|
this.setState({ editable: false });
|
||||||
|
if (this.props.onChange) {
|
||||||
|
this.props.onChange(this.state.value);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
edit = () => {
|
||||||
|
this.setState({ editable: true });
|
||||||
|
};
|
||||||
|
handleKeydown = event => {
|
||||||
|
if (event.keyCode == 13) {
|
||||||
|
this.check();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
render() {
|
||||||
|
const { value, editable } = this.state;
|
||||||
|
let { isclickTrigger } = this.props;
|
||||||
|
let cellContent = "";
|
||||||
|
if (editable) {
|
||||||
|
cellContent = isclickTrigger ? (
|
||||||
|
<div className="editable-cell-input-wrapper">
|
||||||
|
<Input
|
||||||
|
onChange={this.handleChange}
|
||||||
|
onKeyDown={this.handleKeydown}
|
||||||
|
onBlur={this.check}
|
||||||
|
autoFocus
|
||||||
|
value={value}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="editable-cell-input-wrapper">
|
||||||
|
<Input
|
||||||
|
value={value}
|
||||||
|
onChange={this.handleChange}
|
||||||
|
onKeyDown={this.handleKeydown}
|
||||||
|
/>
|
||||||
|
<Icon
|
||||||
|
type="uf-correct"
|
||||||
|
className="editable-cell-icon-check"
|
||||||
|
onClick={this.check}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
cellContent = isclickTrigger ? (
|
||||||
|
<div className="editable-cell-text-wrapper" onClick={this.edit}>
|
||||||
|
{value || " "}
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="editable-cell-text-wrapper">
|
||||||
|
{value || " "}
|
||||||
|
<Icon
|
||||||
|
type="uf-pencil"
|
||||||
|
className="editable-cell-icon"
|
||||||
|
onClick={this.edit}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
return <div className="editable-cell">{cellContent}</div>;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,83 @@
|
||||||
|
import React, { Component } from "react";
|
||||||
|
import Icon from "bee-icon";
|
||||||
|
import Select from "bee-select";
|
||||||
|
|
||||||
|
export default class SelectRender extends Component {
|
||||||
|
state = {
|
||||||
|
value: this.props.value,
|
||||||
|
editable: false
|
||||||
|
};
|
||||||
|
handleChange = e => {
|
||||||
|
const value = e;
|
||||||
|
if (this.props.onChange) {
|
||||||
|
this.props.onChange(value);
|
||||||
|
}
|
||||||
|
this.setState({ value: value });
|
||||||
|
setTimeout(()=> {
|
||||||
|
this.setState({ editable: false });
|
||||||
|
}, 0);
|
||||||
|
};
|
||||||
|
check = () => {
|
||||||
|
this.setState({ editable: false });
|
||||||
|
if (this.props.onChange) {
|
||||||
|
this.props.onChange(this.state.value);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
edit = () => {
|
||||||
|
this.setState({ editable: true });
|
||||||
|
};
|
||||||
|
render() {
|
||||||
|
const { value, editable } = this.state;
|
||||||
|
let { isclickTrigger } = this.props;
|
||||||
|
let cellContent = "";
|
||||||
|
if (editable) {
|
||||||
|
cellContent = isclickTrigger ? (
|
||||||
|
<div className="editable-cell-input-wrapper">
|
||||||
|
<Select
|
||||||
|
{...this.props}
|
||||||
|
value={this.state.value}
|
||||||
|
onChange={this.handleChange}
|
||||||
|
>
|
||||||
|
{this.props.children}
|
||||||
|
</Select>
|
||||||
|
<Icon
|
||||||
|
type="uf-correct"
|
||||||
|
className="editable-cell-icon-check"
|
||||||
|
onClick={this.check}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="editable-cell-input-wrapper">
|
||||||
|
<Select
|
||||||
|
{...this.props}
|
||||||
|
value={this.state.value}
|
||||||
|
onChange={this.handleChange}
|
||||||
|
>
|
||||||
|
{this.props.children}
|
||||||
|
</Select>
|
||||||
|
<Icon
|
||||||
|
type="uf-correct"
|
||||||
|
className="editable-cell-icon-check"
|
||||||
|
onClick={this.check}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
cellContent = isclickTrigger ? (
|
||||||
|
<div className="editable-cell-text-wrapper" onClick={this.edit}>
|
||||||
|
{value || " "}
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="editable-cell-text-wrapper">
|
||||||
|
{value || " "}
|
||||||
|
<Icon
|
||||||
|
type="uf-pencil"
|
||||||
|
className="editable-cell-icon"
|
||||||
|
onClick={this.edit}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
return <div className="editable-cell">{cellContent}</div>;
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue