Skip to content

inline form editing update #38

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
pjm17971 wants to merge 16 commits into
base: master
Choose a base branch
from
Open

inline form editing update #38

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
813c54e
Updating readme files
Jun 7, 2018
b4960cf
List editing
Jun 8, 2018
4badaa4
Fix for cursor jump on typing
Jun 12, 2018
df5809d
View style textedits can now be edited
Jun 14, 2018
0684973
TextArea improvements
Jun 17, 2018
b85e2b5
More work on inline editing changes
Jun 18, 2018
8b0aa4e
checkpoint
Oct 6, 2018
5ca6d8e
feat: Update controls for inline editing
Oct 22, 2018
5dc3744
chore: Refactored some of the common style stuff
Oct 23, 2018
ce711ae
fix: Auto selecting of control text was too aggressive
Oct 23, 2018
336524e
feat: Add AsyncChooser
Oct 25, 2018
99a8bcf
Add protective code to formList to handle stale missing count messages
Oct 30, 2018
e35f2ce
Merge remote-tracking branch 'origin/master' into form-change-indicat…
Oct 30, 2018
5a81ce8
fix: Style for done button was always set to disabled
Oct 30, 2018
eb995f4
Publish
Oct 30, 2018
9d0d092
Publish
Oct 31, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions packages/react-dynamic-forms/.storybook/addons.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
import "@storybook/addon-actions/register";
import "@storybook/addon-links/register";
import "@storybook/addon-knobs/register";
7 changes: 7 additions & 0 deletions packages/react-dynamic-forms/.storybook/config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import { configure } from '@storybook/react';

function loadStories() {
require('../src/stories');
}

configure(loadStories, module);
10 changes: 10 additions & 0 deletions packages/react-dynamic-forms/.storybook/preview-head.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7"
crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS"
crossorigin="anonymous"></script>

<style>
body {
margin-top: 10px
}
</style>
378 changes: 378 additions & 0 deletions packages/react-dynamic-forms/lib/components/AsyncChooser.js
View file
Open in desktop

Large diffs are not rendered by default.

161 changes: 137 additions & 24 deletions packages/react-dynamic-forms/lib/components/CheckBoxes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,12 @@ var _formGroup = require("../js/formGroup");

var _formGroup2 = _interopRequireDefault(_formGroup);

var _renderers = require("../js/renderers");

var _actions = require("../js/actions");

var _style = require("../js/style");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
Expand All @@ -45,10 +51,13 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
var CheckBoxes = function (_React$Component) {
_inherits(CheckBoxes, _React$Component);

function CheckBoxes() {
function CheckBoxes(props) {
_classCallCheck(this, CheckBoxes);

return _possibleConstructorReturn(this, (CheckBoxes.__proto__ || Object.getPrototypeOf(CheckBoxes)).apply(this, arguments));
var _this = _possibleConstructorReturn(this, (CheckBoxes.__proto__ || Object.getPrototypeOf(CheckBoxes)).call(this, props));

_this.state = { isFocused: false };
return _this;
}

_createClass(CheckBoxes, [{
Expand All @@ -61,6 +70,35 @@ var CheckBoxes = function (_React$Component) {
}
}
}
}, {
key: "handleMouseEnter",
value: function handleMouseEnter() {
this.setState({ hover: true });
}
}, {
key: "handleMouseLeave",
value: function handleMouseLeave() {
this.setState({ hover: false });
}
}, {
key: "handleFocus",
value: function handleFocus() {
if (!this.state.isFocused) {
this.setState({ isFocused: true, oldValue: this.props.value });
}
}
}, {
key: "handleKeyPress",
value: function handleKeyPress(e) {
if (e.key === "Enter") {
if (!e.shiftKey) {
this.handleDone();
}
}
if (e.keyCode === 27 /* ESC */) {
this.handleCancel();
}
}
}, {
key: "handleChange",
value: function handleChange(i) {
Expand All @@ -77,6 +115,29 @@ var CheckBoxes = function (_React$Component) {
this.props.onChange(this.props.name, value);
}
}
}, {
key: "handleEditItem",
value: function handleEditItem() {
this.props.onEditItem(this.props.name);
}
}, {
key: "handleDone",
value: function handleDone() {
if (this.props.onBlur) {
this.props.onBlur(this.props.name);
}
this.setState({ isFocused: false, hover: false, oldValue: null });
}
}, {
key: "handleCancel",
value: function handleCancel() {
if (this.props.onChange) {
var v = this.state.oldValue;
this.props.onChange(this.props.name, v);
}
this.props.onBlur(this.props.name);
this.setState({ isFocused: false, hover: false, oldValue: null });
}
}, {
key: "isEmpty",
value: function isEmpty(value) {
Expand All @@ -92,30 +153,28 @@ var CheckBoxes = function (_React$Component) {

return this.props.required && !this.props.disabled && this.isEmpty(value);
}
}, {
key: "inlineStyle",
value: function inlineStyle(hasError, isMissing) {
var color = "inherited";
var background = "inherited";
if (hasError) {
color = "#b94a48";
background = "#fff0f3";
} else if (isMissing) {
background = "floralwhite";
}
return {
color: color,
background: background,
width: "100%",
paddingLeft: 3
};
}

// border-style: solid;
// border-radius: 2px;
// border-width: 1px;
// padding: 5px;
// border-color: #ececec;

}, {
key: "render",
value: function render() {
var _this2 = this;

if (this.props.edit) {
var editStyle = {
borderStyle: "solid",
borderRadius: 2,
borderWidth: 1,
padding: 5,
borderColor: "#ececec",
marginBottom: 5
};

var items = [];
this.props.optionList.forEach(function (option, i) {
items.push(_react2.default.createElement(
Expand All @@ -138,14 +197,68 @@ var CheckBoxes = function (_React$Component) {

return _react2.default.createElement(
"div",
null,
items
{ style: { marginBottom: 5 } },
_react2.default.createElement(
"div",
{
style: editStyle,
onFocus: function onFocus(e) {
return _this2.handleFocus(e);
},
onKeyUp: function onKeyUp(e) {
return _this2.handleKeyPress(e);
}
},
items
),
this.props.selected ? _react2.default.createElement(
"span",
{ style: { marginTop: 5 } },
_react2.default.createElement(
"span",
{
style: (0, _style.inlineDoneButtonStyle)(0),
onClick: function onClick() {
return _this2.handleDone();
}
},
"DONE"
),
_react2.default.createElement(
"span",
{
style: (0, _style.inlineCancelButtonStyle)(),
onClick: function onClick() {
return _this2.handleCancel();
}
},
"CANCEL"
)
) : _react2.default.createElement("div", null)
);
} else {
var view = this.props.view || _renderers.textView;
var text = _react2.default.createElement(
"span",
{ style: { minHeight: 28 } },
view(this.props.value.join(", "))
);
var edit = (0, _actions.editAction)(this.state.hover && this.props.allowEdit, function () {
return _this2.handleEditItem();
});
return _react2.default.createElement(
"div",
{ style: this.inlineStyle(false, false) },
this.props.value.join(", ")
{
style: (0, _style.inlineStyle)(false, false),
onMouseEnter: function onMouseEnter() {
return _this2.handleMouseEnter();
},
onMouseLeave: function onMouseLeave() {
return _this2.handleMouseLeave();
}
},
text,
edit
);
}
}
Expand Down
Loading