From e96916bf4fc96e43181d175b747f886697c4d620 Mon Sep 17 00:00:00 2001 From: Francesco Giordano <32357315+FrancescoGd@users.noreply.github.com> Date: Sun, 19 Jul 2020 07:48:28 +0200 Subject: [PATCH 1/2] Various text and code fixes (#1418) Fixed some typos, reworded some phrases and corrected a couple lines in example code --- .../react-bootstrap-table2-editor/README.md | 56 +++++++++---------- 1 file changed, 28 insertions(+), 28 deletions(-) diff --git a/packages/react-bootstrap-table2-editor/README.md b/packages/react-bootstrap-table2-editor/README.md index cda2e0a59..d529107d3 100644 --- a/packages/react-bootstrap-table2-editor/README.md +++ b/packages/react-bootstrap-table2-editor/README.md @@ -1,6 +1,6 @@ # react-bootstrap-table2-editor -`react-bootstrap-table2` separate the cell edit code base to [`react-bootstrap-table2-editor`](https://github.com/react-bootstrap-table/react-bootstrap-table2/tree/develop/packages/react-bootstrap-table2-editor), so there's a little bit different when you use cell edit than `react-bootstrap-table`. In the following, we are going to show you how to enable the cell edit +`react-bootstrap-table2` separates the cell editing code base to [`react-bootstrap-table2-editor`](https://github.com/react-bootstrap-table/react-bootstrap-table2/tree/develop/packages/react-bootstrap-table2-editor), so it's a little bit different from `react-bootstrap-table` on how you use cell editing. In the following sections, we are going to show you how to enable cell editing. **[Live Demo For Cell Edit](https://react-bootstrap-table.github.io/react-bootstrap-table2/storybook/index.html?selectedKind=Cell%20Editing)** @@ -16,12 +16,12 @@ $ npm install react-bootstrap-table2-editor --save ## How -We have [two ways](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/cell-edit-props.html#celleditmode-string) to trigger a editable cell as editing cell: +We have [two ways](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/cell-edit-props.html#celleditmode-string) to trigger a editable cell as the editing cell: * click * dbclick -That's look into how we enable the cell edit on tabe: +Here's how to enable cell editing on the table: ```js import cellEditFactory from 'react-bootstrap-table2-editor'; @@ -36,17 +36,17 @@ import cellEditFactory from 'react-bootstrap-table2-editor'; /> ``` -How user save their new editings? We offer two ways: +How does a user save their new edits? We offer two ways: -* Press ENTER(**default**) -* Blur from current editing cell(Need to enable the [cellEdit.blurToSave](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/cell-edit-props.html#celleditblurtosave-bool)) +* Press ENTER (**default**) +* Blur from current editing cell (you need to enable [cellEdit.blurToSave](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/cell-edit-props.html#celleditblurtosave-bool)) ## Editable Cell -`react-bootstrap-table2` support you to configure the cell editable on three level: +`react-bootstrap-table2` supports you to configure the editable cell on three levels: * Row Level ([cellEdit.nonEditableRows](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/cell-edit-props.html#celleditnoneditablerows-function)) -* Column Level (Configure [column.editable](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/column-props.html#columneditable-bool-function) as bool value) -* Cell Level (Configure [column.editable](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/column-props.html#columneditable-bool-function) as a callback function) +* Column Level (configure [column.editable](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/column-props.html#columneditable-bool-function) as bool value) +* Cell Level (configure [column.editable](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/column-props.html#columneditable-bool-function) as a callback function) ## Validation @@ -59,18 +59,18 @@ How user save their new editings? We offer two ways: ### Editor * Customize the editor style via [column.editorStyle](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/column-props.html#columneditorstyle-object-function) -* Customize the editor classname via [column.editoClasses](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/column-props.html#columneditorclasses-string-function) +* Customize the editor classname via [column.editorClasses](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/column-props.html#columneditorclasses-string-function) ## Rich Editors -`react-bootstrap-table2` have following predefined editor: +`react-bootstrap-table2` has the following predefined editors: -* Text(Default) +* Text (**default**) * Dropdown * Date * Textarea * Checkbox -In a nutshell, you just only give a [column.editor](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/column-props.html#columneditor-object) and define the `type`: +In a nutshell, you just set a [column.editor](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/column-props.html#columneditor-object) and define the `type`: ```js import { Type } from 'react-bootstrap-table2-editor'; @@ -80,19 +80,19 @@ const columns = [ text: 'Done', editor: { type: Type.SELECT | Type.TEXTAREA | Type.CHECKBOX | Type.DATE, - ... // The rest properties will be rendered into the editor's DOM element + ... // The rest of the properties will be rendered into the editor's DOM element } } ] ``` -In the following, we go though all the predefined editors: +In the following sections, we go though all the predefined editors: ### Dropdown Editor -Dropdown editor give a select menu to choose a data from a list. When use dropdown editor, either `editor.options` or `editor.getOptions` should be required prop. +Dropdown editor gives a select menu to choose data from a list. When using the dropdown editor, either `editor.options` or `editor.getOptions` are required prop. #### editor.options -This is most simple case for assign the dropdown options data directly. +This is the most simple way to assign the dropdown options data directly. ```js import { Type } from 'react-bootstrap-table2-editor'; @@ -123,12 +123,12 @@ const columns = [ ``` #### editor.getOptions -It is much flexible which accept a function and you can assign the dropdown options dynamically. +It is more flexible and accepts a function to assign the dropdown options dynamically. -There are two case for `getOptions`: +There are two cases for `getOptions`: -* *Synchronous*: Just return the options array in `getOptions` callback function -* *Asynchronous*: Call `setOptions` function argument when you get the options from remote. +* *Synchronous*: Just return the options array from `getOptions` callback function +* *Asynchronous*: Call `setOptions` function argument to get the options from remote. ```js @@ -163,7 +163,7 @@ const columns = [ [here](https://react-bootstrap-table.github.io/react-bootstrap-table2/storybook/index.html?selectedKind=Cell%20Editing&selectedStory=Dropdown%20Editor%20with%20Dynamic%20Options) is an online example. ### Date Editor -Date editor is use ``, the configuration is very simple: +Date editor uses ``, the configuration is very simple: ```js const columns = [ @@ -184,7 +184,7 @@ const columns = [ ``` ### Textarea Editor -Textarea editor is use ``, user can press `ENTER` to change line and in the `react-bootstrap-table2`, user allow to save result via press `SHIFT` + `ENTER`. +Textarea editor uses ``, the user can press `ENTER` to enter a newline and in the `react-bootstrap-table2`, the user can save results pressing `SHIFT` + `ENTER`. ```js const columns = [ @@ -197,7 +197,7 @@ const columns = [ }]; ``` ### Checkbox Editor -Checkbox editor allow you to have a pair value choice, the `editor.value` is required value to represent the actual value for check and uncheck. +Checkbox editor allows you to have a boolean value choice, the `editor.value` is required to represent the actual value for checked and unchecked. ```js const columns = [ @@ -212,7 +212,7 @@ const columns = [ ``` ## Customize Editor -If you feel above predefined editors are not satisfied to your requirement, you can certainly custom the editor via [column.editorRenderer](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/column-props.html#columneditorrenderer-function). It accept a function and pass following arguments when function called: +If you feel the above predefined editors are not enough for your requirements, you can customize the editor via [column.editorRenderer](https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/column-props.html#columneditorrenderer-function). It accepts a function and passes the following arguments to it: * `editorProps`: Some useful attributes you can use on DOM editor, like class, style etc. * `value`: Current cell value @@ -221,11 +221,11 @@ If you feel above predefined editors are not satisfied to your requirement, you * `rowIndex`: Current row index * `columnIndex`: Current column index -> Note when implement a custom React editor component, this component should have a **getValue** function which return current value on editor +> **Note** when you implement a custom React editor component, this component must have a **getValue** function that returns the inserted value -> Note when you want to save value, you can call **editorProps.onUpdate** function +> **Note** when you want to save the value, you can call the **editorProps.onUpdate** function -Following is a short example: +Here is a short example: ```js class QualityRanger extends React.Component { From 162cf328b75a8d8c483027e188ba84c16b57b6f5 Mon Sep 17 00:00:00 2001 From: Myron Apostolakis Date: Mon, 13 Dec 2021 01:43:38 +0200 Subject: [PATCH 2/2] Fix for issue #1669 --- packages/react-bootstrap-table2/src/utils.js | 19 ++++++++----------- 1 file changed, 8 insertions(+), 11 deletions(-) diff --git a/packages/react-bootstrap-table2/src/utils.js b/packages/react-bootstrap-table2/src/utils.js index 23d3cc21a..4c14ea260 100644 --- a/packages/react-bootstrap-table2/src/utils.js +++ b/packages/react-bootstrap-table2/src/utils.js @@ -4,11 +4,7 @@ import _ from 'underscore'; function splitNested(str) { - return [str] - .join('.') - .replace(/\[/g, '.') - .replace(/\]/g, '') - .split('.'); + return [str].join('.').replace(/\[/g, '.').replace(/\]/g, '').split('.'); } function contains(list, value) { @@ -20,14 +16,15 @@ function contains(list, value) { } function get(target, field) { - const directGet = target[field]; - if (directGet !== undefined && directGet !== null) { - return directGet; - } - - const pathArray = splitNested(field); let result; try { + const directGet = target[field]; + if (directGet !== undefined && directGet !== null) { + return directGet; + } + + const pathArray = splitNested(field); + result = pathArray.reduce((curr, path) => curr[path], target); } catch (e) {} return result;