change demo
This commit is contained in:
BoyuZhou
commit
2646517633
|
|
@ -2,14 +2,50 @@
|
|||
<project version="4">
|
||||
<component name="ChangeListManager">
|
||||
<list default="true" id="fc6f46f1-46b7-479d-a1be-6709765e93ca" name="Default" comment="">
|
||||
<change type="NEW" beforePath="" afterPath="$PROJECT_DIR$/.idea/vcs.xml" />
|
||||
<change type="MODIFICATION" beforePath="$PROJECT_DIR$/build/Table.js" afterPath="$PROJECT_DIR$/build/Table.js" />
|
||||
<change type="NEW" beforePath="" afterPath="$PROJECT_DIR$/build/lib/multiSelect.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/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/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/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$/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$/src/Table.scss" afterPath="$PROJECT_DIR$/src/Table.scss" />
|
||||
</list>
|
||||
<ignored path="$PROJECT_DIR$/.tmp/" />
|
||||
<ignored path="$PROJECT_DIR$/temp/" />
|
||||
|
|
@ -23,25 +59,74 @@
|
|||
</component>
|
||||
<component name="ExecutionTargetManager" SELECTED_TARGET="default_target" />
|
||||
<component name="FileEditorManager">
|
||||
<leaf>
|
||||
<leaf SIDE_TABS_SIZE_LIMIT_KEY="300">
|
||||
<file leaf-file-name="Demo7.js" pinned="false" current-in-tab="false">
|
||||
<entry file="file://$PROJECT_DIR$/demo/demolist/Demo7.js">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state relative-caret-position="456">
|
||||
<caret line="81" column="41" lean-forward="false" selection-start-line="81" selection-start-column="41" selection-end-line="81" selection-end-column="41" />
|
||||
<state relative-caret-position="2340">
|
||||
<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>
|
||||
<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>
|
||||
</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">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state relative-caret-position="560">
|
||||
<caret line="41" column="22" lean-forward="false" selection-start-line="41" selection-start-column="22" selection-end-line="41" selection-end-column="22" />
|
||||
<state relative-caret-position="1430">
|
||||
<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>
|
||||
|
|
@ -56,10 +141,12 @@
|
|||
<option name="CHANGED_PATHS">
|
||||
<list>
|
||||
<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/Demo8.js" />
|
||||
<option value="$PROJECT_DIR$/demo/demolist/Demo9.js" />
|
||||
<option value="$PROJECT_DIR$/package.json" />
|
||||
<option value="$PROJECT_DIR$/demo/index.js" />
|
||||
<option value="$PROJECT_DIR$/index.html" />
|
||||
</list>
|
||||
</option>
|
||||
</component>
|
||||
|
|
@ -97,7 +184,6 @@
|
|||
<foldersAlwaysOnTop value="true" />
|
||||
</navigator>
|
||||
<panes>
|
||||
<pane id="Scope" />
|
||||
<pane id="Scratches" />
|
||||
<pane id="ProjectPane">
|
||||
<subPane>
|
||||
|
|
@ -145,6 +231,7 @@
|
|||
</PATH>
|
||||
</subPane>
|
||||
</pane>
|
||||
<pane id="Scope" />
|
||||
</panes>
|
||||
</component>
|
||||
<component name="PropertiesComponent">
|
||||
|
|
@ -152,7 +239,7 @@
|
|||
<property name="JavaScriptPreferStrict" value="false" />
|
||||
<property name="JavaScriptWeakerCompletionTypeGuess" value="true" />
|
||||
<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="nodejs_interpreter_path" value="C:/Program Files/nodejs/node" />
|
||||
</component>
|
||||
|
|
@ -184,32 +271,33 @@
|
|||
<option name="presentableId" value="Default" />
|
||||
<updated>1504076174885</updated>
|
||||
<workItem from="1504076176405" duration="2701000" />
|
||||
<workItem from="1506672272278" duration="1284000" />
|
||||
</task>
|
||||
<servers />
|
||||
</component>
|
||||
<component name="TimeTrackingManager">
|
||||
<option name="totallyTimeSpent" value="2701000" />
|
||||
<option name="totallyTimeSpent" value="3985000" />
|
||||
</component>
|
||||
<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" />
|
||||
<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="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="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="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="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="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="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="Hierarchy" active="false" anchor="right" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.25" sideWeight="0.5" order="2" side_tool="false" content_ui="combo" />
|
||||
<window_info id="Find" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="1" side_tool="false" content_ui="tabs" />
|
||||
<window_info id="Ant Build" active="false" anchor="right" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.25" sideWeight="0.5" order="1" side_tool="false" content_ui="tabs" />
|
||||
</layout>
|
||||
</component>
|
||||
|
|
@ -224,24 +312,22 @@
|
|||
<watches-manager />
|
||||
</component>
|
||||
<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">
|
||||
<state relative-caret-position="-910">
|
||||
<caret line="28" column="23" lean-forward="true" selection-start-line="28" selection-start-column="23" selection-end-line="28" selection-end-column="23" />
|
||||
<state relative-caret-position="2106">
|
||||
<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>
|
||||
<element signature="n#!!doc" expanded="true" />
|
||||
<element signature="e#55#94#0" expanded="true" />
|
||||
</folding>
|
||||
</state>
|
||||
</provider>
|
||||
</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">
|
||||
<state relative-caret-position="298">
|
||||
<caret line="47" column="10" lean-forward="true" selection-start-line="47" selection-start-column="10" selection-end-line="47" selection-end-column="10" />
|
||||
<folding>
|
||||
<element signature="n#!!doc" expanded="true" />
|
||||
<element signature="e#92#131#0" expanded="true" />
|
||||
</folding>
|
||||
<state relative-caret-position="1066">
|
||||
<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 />
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
|
|
@ -249,27 +335,65 @@
|
|||
<provider selected="true" editor-type-id="text-editor">
|
||||
<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" />
|
||||
<folding>
|
||||
<element signature="e#91#132#0" expanded="true" />
|
||||
</folding>
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
<entry file="file://$PROJECT_DIR$/demo/demolist/Demo7.js">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state relative-caret-position="456">
|
||||
<caret line="81" column="41" lean-forward="false" selection-start-line="81" selection-start-column="41" selection-end-line="81" selection-end-column="41" />
|
||||
<state relative-caret-position="2340">
|
||||
<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>
|
||||
<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>
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
<entry file="file://$PROJECT_DIR$/package.json">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state relative-caret-position="560">
|
||||
<caret line="41" column="22" lean-forward="false" selection-start-line="41" selection-start-column="22" selection-end-line="41" selection-end-column="22" />
|
||||
<state relative-caret-position="1430">
|
||||
<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 />
|
||||
</state>
|
||||
</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-form-control/src/FormControl.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 {
|
||||
position: relative;
|
||||
|
|
@ -19,11 +24,13 @@
|
|||
|
||||
.editable-cell-text-wrapper {
|
||||
padding: 5px 24px 5px 5px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.editable-cell-icon,
|
||||
.editable-cell-icon-check {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 20px;
|
||||
cursor: pointer;
|
||||
|
|
@ -76,3 +83,47 @@
|
|||
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 ReactDOM from 'react-dom';
|
||||
import Table from '../../src';
|
||||
|
||||
|
||||
|
|
@ -40,5 +39,5 @@ class Demo1 extends Component {
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
export default Demo1;
|
||||
|
||||
|
|
|
|||
|
|
@ -6,9 +6,11 @@
|
|||
* import {Table} from 'tinper-bee';
|
||||
*/
|
||||
|
||||
|
||||
import React, { Component } from 'react';
|
||||
import Table from '../../src';
|
||||
|
||||
|
||||
const columns10 = [
|
||||
{
|
||||
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,49 +5,48 @@
|
|||
*
|
||||
*/
|
||||
|
||||
import React, { Component } from 'react';
|
||||
import Button from 'bee-button';
|
||||
import Table from '../../src';
|
||||
import Animate from 'bee-animate';
|
||||
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 Popconfirm from 'bee-popconfirm';
|
||||
import Input from "bee-form-control";
|
||||
import Popconfirm from "bee-popconfirm";
|
||||
|
||||
class EditableCell extends React.Component {
|
||||
state = {
|
||||
value: this.props.value,
|
||||
editable: false,
|
||||
}
|
||||
handleChange = (e) => {
|
||||
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) => {
|
||||
};
|
||||
handleKeydown = event => {
|
||||
console.log(event.keyCode);
|
||||
if(event.keyCode == 13){
|
||||
if (event.keyCode == 13) {
|
||||
this.check();
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
render() {
|
||||
const { value, editable } = this.state;
|
||||
return (<div className="editable-cell">
|
||||
{
|
||||
editable ?
|
||||
return (
|
||||
<div className="editable-cell">
|
||||
{editable ? (
|
||||
<div className="editable-cell-input-wrapper">
|
||||
<Input
|
||||
value={value}
|
||||
onChange={this.handleChange}
|
||||
onKeyDown = {this.handleKeydown}
|
||||
onKeyDown={this.handleKeydown}
|
||||
/>
|
||||
<Icon
|
||||
type="uf-correct"
|
||||
|
|
@ -55,126 +54,151 @@ class EditableCell extends React.Component {
|
|||
onClick={this.check}
|
||||
/>
|
||||
</div>
|
||||
:
|
||||
) : (
|
||||
<div className="editable-cell-text-wrapper">
|
||||
{value || ' '}
|
||||
{value || " "}
|
||||
<Icon
|
||||
type="uf-pencil"
|
||||
className="editable-cell-icon"
|
||||
onClick={this.edit}
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
</div>);
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default class Demo2 extends React.Component {
|
||||
class Demo2 extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.columns = [{
|
||||
title: '姓名',
|
||||
dataIndex: 'name',
|
||||
key:'name',
|
||||
width: '30%',
|
||||
this.columns = [
|
||||
{
|
||||
title: "姓名",
|
||||
dataIndex: "name",
|
||||
key: "name",
|
||||
width: "30%",
|
||||
render: (text, record, index) => (
|
||||
<EditableCell
|
||||
value={text}
|
||||
onChange={this.onCellChange(index, 'name')}
|
||||
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 = {
|
||||
dataSource: [{
|
||||
key: '0',
|
||||
name: '沉鱼',
|
||||
age: '18',
|
||||
address: '96, 77, 89',
|
||||
}, {
|
||||
key: '1',
|
||||
name: '落雁',
|
||||
age: '16',
|
||||
address: '90, 70, 80',
|
||||
}, {
|
||||
key: '2',
|
||||
name: '闭月',
|
||||
age: '17',
|
||||
address: '80, 60, 80',
|
||||
}, {
|
||||
key: '3',
|
||||
name: '羞花',
|
||||
age: '20',
|
||||
address: '120, 60, 90',
|
||||
}],
|
||||
count: 4,
|
||||
dataSource: [
|
||||
{
|
||||
key: "0",
|
||||
name: "沉鱼",
|
||||
age: "18",
|
||||
address: "96, 77, 89"
|
||||
},
|
||||
{
|
||||
key: "1",
|
||||
name: "落雁",
|
||||
age: "16",
|
||||
address: "90, 70, 80"
|
||||
},
|
||||
{
|
||||
key: "2",
|
||||
name: "闭月",
|
||||
age: "17",
|
||||
address: "80, 60, 80"
|
||||
},
|
||||
{
|
||||
key: "3",
|
||||
name: "羞花",
|
||||
age: "20",
|
||||
address: "120, 60, 90"
|
||||
}
|
||||
],
|
||||
count: 4
|
||||
};
|
||||
}
|
||||
onCellChange = (index, key) => {
|
||||
return (value) => {
|
||||
return value => {
|
||||
const dataSource = [...this.state.dataSource];
|
||||
dataSource[index][key] = value;
|
||||
this.setState({ dataSource });
|
||||
};
|
||||
}
|
||||
onDelete = (index) => {
|
||||
};
|
||||
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`,
|
||||
address: `100 100 100`
|
||||
};
|
||||
this.setState({
|
||||
dataSource: [...dataSource, newData],
|
||||
count: count + 1,
|
||||
count: count + 1
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
getBodyWrapper = (body) => {
|
||||
getBodyWrapper = body => {
|
||||
return (
|
||||
<Animate transitionName="move" component="tbody" className={body.props.className}>
|
||||
<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>);
|
||||
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 Demo2;
|
||||
|
|
|
|||
|
|
@ -5,13 +5,10 @@
|
|||
*
|
||||
*/
|
||||
|
||||
import React, { Component } from 'react';
|
||||
|
||||
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 Popconfirm from 'bee-popconfirm';
|
||||
|
||||
const { ColumnGroup, Column } = Table;
|
||||
|
||||
|
|
|
|||
|
|
@ -5,11 +5,11 @@
|
|||
*
|
||||
*/
|
||||
|
||||
|
||||
import React, { Component } from 'react';
|
||||
import Table from '../../src';
|
||||
|
||||
|
||||
|
||||
const columns4 = [
|
||||
{
|
||||
title: "Name",
|
||||
|
|
@ -100,4 +100,5 @@ class Demo4 extends Component {
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
export default Demo4;
|
||||
|
|
@ -5,6 +5,8 @@
|
|||
*
|
||||
*/
|
||||
|
||||
|
||||
|
||||
import React, { Component } from 'react';
|
||||
import Table from '../../src';
|
||||
|
||||
|
|
|
|||
|
|
@ -5,11 +5,11 @@
|
|||
*
|
||||
*/
|
||||
|
||||
|
||||
import React, { Component } from 'react';
|
||||
import Table from '../../src';
|
||||
|
||||
|
||||
|
||||
const columns6 = [
|
||||
{
|
||||
title: "Full Name",
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@
|
|||
*
|
||||
*/
|
||||
|
||||
|
||||
import React, {Component} from 'react';
|
||||
import Table from '../../src';
|
||||
|
||||
|
|
@ -24,6 +25,7 @@ const columns7 = [
|
|||
];
|
||||
|
||||
const data7 = [
|
||||
|
||||
{a: "02级一班", b: "2", c: "欧阳锋", key: "1"},
|
||||
{a: "03级二班", b: "3", c: "归海一刀", key: "2"},
|
||||
{a: "05级三班", b: "1", c: "一拳超人", key: "3"}
|
||||
|
|
@ -79,7 +81,7 @@ class Demo7 extends Component {
|
|||
title={currentData => <div>标题: 我是主表</div>}
|
||||
/>
|
||||
<Table
|
||||
style={{ marginTop: 40 }}
|
||||
style={{marginTop: 40}}
|
||||
columns={columns7_1}
|
||||
data={this.state.children_data}
|
||||
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 React, {Component} from 'react';
|
||||
|
||||
import Table from '../../src';
|
||||
import Pagination from 'bee-pagination';
|
||||
import Pagination from "bee-pagination";
|
||||
|
||||
|
||||
const columns8 = [
|
||||
|
|
@ -73,5 +75,4 @@ class Demo8 extends Component {
|
|||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo8;
|
||||
|
|
@ -8,6 +8,7 @@
|
|||
*/
|
||||
|
||||
import React, {Component} from 'react';
|
||||
|
||||
import Table from '../../src';
|
||||
import Icon from "bee-icon";
|
||||
import InputGroup from 'bee-input-group';
|
||||
|
|
@ -167,4 +168,3 @@ class Demo9 extends Component {
|
|||
}
|
||||
|
||||
export default Demo9;
|
||||
|
||||
|
|
|
|||
|
|
@ -4,14 +4,7 @@ import { Panel } from 'bee-panel';
|
|||
import Button from 'bee-button';
|
||||
import React, { Component } from 'react';
|
||||
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>;
|
||||
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -50,3 +50,9 @@
|
|||
|fixed| 当表水平滚动时，此列将被固定：true或'left'或'right'| true/'left'/'right'|-|
|
||||
|render|cell的render函数有三个参数：这个单元格的文本，这行的记录，这行的索引，它返回一个对象：{children：value，props：{colSpan：1，rowSpan：1}} ==>'children'是这个单元格的文本，props是这个单元格的一些设置|-|
|
||||
|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/react/dist/react-with-addons.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>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -34,14 +34,17 @@
|
|||
},
|
||||
"dependencies": {
|
||||
"classnames": "^2.2.5",
|
||||
"lodash.clonedeep": "^4.5.0",
|
||||
"object-path": "^0.11.3",
|
||||
"shallowequal": "^0.2.2",
|
||||
"tinper-bee-core": "latest",
|
||||
"tinper-bee-core": "^0.1.6",
|
||||
"warning": "^3.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"bee-animate": "latest",
|
||||
"bee-button": "latest",
|
||||
"bee-checkbox": "^0.2.4",
|
||||
"bee-datepicker": "^0.1.7",
|
||||
"bee-form-control": "^0.1.8",
|
||||
"bee-icon": "0.0.5",
|
||||
"bee-input-group": "^0.1.12",
|
||||
|
|
@ -49,6 +52,8 @@
|
|||
"bee-pagination": "^0.1.7",
|
||||
"bee-panel": "latest",
|
||||
"bee-popconfirm": "^0.2.2",
|
||||
"bee-select": "^0.1.6",
|
||||
"bee-tools": "^0.3.2",
|
||||
"chai": "^3.5.0",
|
||||
"console-polyfill": "~0.2.1",
|
||||
"enzyme": "^2.4.1",
|
||||
|
|
|
|||
|
|
@ -96,6 +96,9 @@ $table-move-in-color: $bg-color-base;
|
|||
padding: $vertical-padding $horizontal-padding;
|
||||
border-bottom: 1px solid $table-border-color;
|
||||
}
|
||||
&-footer &{
|
||||
margin: (-$vertical-padding) (-$horizontal-padding);
|
||||
}
|
||||
|
||||
&-placeholder {
|
||||
padding: 16px 8px;
|
||||
|
|
@ -112,6 +115,7 @@ $table-move-in-color: $bg-color-base;
|
|||
&-expand-icon {
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
margin-right: 10px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
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