Skip to content

Commit b0bc5b8

Browse files
mikechabotmikechabot
committed
Extract inline styles to css classing
1 parent 33b551f commit b0bc5b8

31 files changed

+737
-422
lines changed

‎build-css.js‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,17 @@ const FILENAME = 'styles';
88
const RELATIVE_OUTPUT = '/dist/css';
99
const INPUT_PATH = path.join(__dirname, `/src/sass/${FILENAME}.scss`);
1010
const PREFIX = '.__rjfe__';
11-
const EXCLUDED_SELECTORS = ['*', '*::before', '*::after', 'html', 'body', 'a', 'a:hover'];
11+
12+
const EXCLUDED_SELECTORS = [
13+
'*',
14+
'*::before',
15+
'*::after',
16+
'html',
17+
'body',
18+
'a',
19+
'a:hover',
20+
'.rjfe-form-consumer'
21+
];
1222

1323
const outputs = [
1424
{ filepath: path.join(__dirname, `${RELATIVE_OUTPUT}/${FILENAME}.css`), style: 'nested' },

‎dist/components/form/FormConsumer.js‎

Lines changed: 8 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -25,10 +25,6 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
2525

2626
function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
2727

28-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }
29-
30-
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
31-
3228
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
3329

3430
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
@@ -45,12 +41,6 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
4541

4642
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
4743

48-
var style = {
49-
display: 'flex',
50-
flexDirection: 'column',
51-
flex: 1,
52-
flexShrink: 0
53-
};
5444
var FormConsumer = (_dec = (0, _mobxReact.inject)('instance', 'hideFormTitle', 'hideFormBorder', 'hideSubsectionTitles', 'hideSubsectionSubtitles', 'submitButtonLabel'), _dec(_class = (0, _mobxReact.observer)(_class = (_temp = _class2 =
5545
/*#__PURE__*/
5646
function (_Component) {
@@ -76,9 +66,10 @@ function (_Component) {
7666
}, {
7767
key: "getDerivedStyles",
7868
value: function getDerivedStyles(hideFormBorder) {
79-
return _objectSpread({}, style, {
80-
border: hideFormBorder ? 'none' : '1px solid #dbdbdb'
81-
});
69+
return {
70+
border: hideFormBorder ? 'none' : '1px solid #dbdbdb',
71+
borderTop: 'none'
72+
};
8273
}
8374
}, {
8475
key: "render",
@@ -87,9 +78,11 @@ function (_Component) {
8778
instance = _this$props.instance,
8879
hideFormBorder = _this$props.hideFormBorder;
8980
return _react["default"].createElement("div", {
90-
className: "__rjfe__",
81+
className: "__rjfe__ rjfe-form-consumer"
82+
}, _react["default"].createElement(_FormTitle["default"], null), _react["default"].createElement("div", {
83+
className: "form-sections",
9184
style: this.getDerivedStyles(hideFormBorder)
92-
}, _react["default"].createElement(_FormTitle["default"], null), this.renderSections(instance.getSections()));
85+
}, this.renderSections(instance.getSections())));
9386
}
9487
}]);
9588

‎dist/components/form/FormField/FormChildren.js‎

Lines changed: 3 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -42,15 +42,6 @@ function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || func
4242
var _PROPERTY$FIELD = _formConst.PROPERTY.FIELD,
4343
FIELDS = _PROPERTY$FIELD.FIELDS,
4444
ID = _PROPERTY$FIELD.ID;
45-
var styles = {
46-
list: {
47-
marginTop: '0.50rem',
48-
marginBottom: '0.50rem',
49-
marginLeft: '0.25rem',
50-
paddingLeft: '0.75rem',
51-
borderLeft: '3px double #dbdbdb'
52-
}
53-
};
5445
var FormChildren = (_dec = (0, _mobxReact.inject)('instance'), _dec(_class = (0, _mobxReact.observer)(_class = (_temp = _class2 =
5546
/*#__PURE__*/
5647
function (_Component) {
@@ -63,17 +54,8 @@ function (_Component) {
6354
}
6455

6556
_createClass(FormChildren, [{
66-
key: "getListItemStyle",
67-
value: function getListItemStyle(index, length) {
68-
if (index === 0) return styles.firstListItem;
69-
if (index === length - 1) return styles.lastListItem;
70-
return styles.listItem;
71-
}
72-
}, {
7357
key: "render",
7458
value: function render() {
75-
var _this = this;
76-
7759
var _this$props = this.props,
7860
instance = _this$props.instance,
7961
field = _this$props.field;
@@ -84,14 +66,12 @@ function (_Component) {
8466
return null;
8567
}
8668

87-
var length = field[FIELDS].length;
8869
return _react["default"].createElement("ul", {
89-
style: styles.list
90-
}, field[FIELDS].map(function (child, index) {
70+
className: "form-children"
71+
}, field[FIELDS].map(function (child) {
9172
if (instance.isVisible(child)) {
9273
return _react["default"].createElement("li", {
93-
key: child[ID],
94-
style: _this.getListItemStyle(index, length)
74+
key: child[ID]
9575
}, _react["default"].createElement(_["default"], {
9676
field: child
9777
}));

‎dist/components/form/FormField/index.js‎

Lines changed: 29 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,8 @@ var _react = _interopRequireWildcard(require("react"));
99

1010
var _propTypes = _interopRequireDefault(require("prop-types"));
1111

12+
var _mobxReact = require("mobx-react");
13+
1214
var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
1315

1416
var _FormControl = _interopRequireDefault(require("./FormControl"));
@@ -17,6 +19,8 @@ var _FormChildren = _interopRequireDefault(require("./FormChildren"));
1719

1820
var _formConst = require("../../../form-engine/config/form-const");
1921

22+
var _dec, _class, _class2, _temp;
23+
2024
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
2125

2226
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj["default"] = obj; return newObj; } }
@@ -39,35 +43,10 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
3943

4044
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
4145

42-
var style = {
43-
display: 'flex',
44-
flexDirection: 'column'
45-
};
4646
var _PROPERTY$FIELD = _formConst.PROPERTY.FIELD,
4747
ID = _PROPERTY$FIELD.ID,
48-
FIELDS = _PROPERTY$FIELD.FIELDS,
49-
OPTIONS = _PROPERTY$FIELD.OPTIONS;
50-
/**
51-
* Check for child fields, or option fields with children
52-
* @param field
53-
* @returns {boolean}
54-
*/
55-
56-
function hasFieldChildren(field) {
57-
if (!(0, _isEmpty["default"])(field[FIELDS])) {
58-
return true;
59-
}
60-
61-
if (!(0, _isEmpty["default"])(field[OPTIONS])) {
62-
return field[OPTIONS].some(function (option) {
63-
return !(0, _isEmpty["default"])(option[FIELDS]);
64-
});
65-
}
66-
67-
return false;
68-
}
69-
70-
var FormField =
48+
FIELDS = _PROPERTY$FIELD.FIELDS;
49+
var FormField = (_dec = (0, _mobxReact.inject)('instance'), _dec(_class = (0, _mobxReact.observer)(_class = (_temp = _class2 =
7150
/*#__PURE__*/
7251
function (_Component) {
7352
_inherits(FormField, _Component);
@@ -79,27 +58,40 @@ function (_Component) {
7958
}
8059

8160
_createClass(FormField, [{
61+
key: "getDerivedStyles",
62+
value: function getDerivedStyles(hasVisibleChildren) {
63+
return {
64+
marginBottom: hasVisibleChildren ? 0 : '0.5rem'
65+
};
66+
}
67+
}, {
8268
key: "render",
8369
value: function render() {
84-
var field = this.props.field;
70+
var _this$props = this.props,
71+
field = _this$props.field,
72+
instance = _this$props.instance;
8573
if (!field) return null;
74+
var hasChildren = !(0, _isEmpty["default"])(field[FIELDS]);
75+
var hasVisibleChildren = hasChildren && field[FIELDS].some(function (c) {
76+
return instance.isVisible(c);
77+
});
8678
return _react["default"].createElement("div", {
87-
style: style,
79+
style: this.getDerivedStyles(hasVisibleChildren),
8880
className: "field",
8981
id: "field-".concat(field[ID])
9082
}, _react["default"].createElement(_FormControl["default"], {
83+
field: field,
84+
hasChildren: hasChildren
85+
}), _react["default"].createElement(_FormChildren["default"], {
9186
field: field
92-
}), hasFieldChildren(field) ? _react["default"].createElement(_FormChildren["default"], {
93-
field: field
94-
}) : null);
87+
}));
9588
}
9689
}]);
9790

9891
return FormField;
99-
}(_react.Component);
100-
101-
FormField.propTypes = {
102-
field: _propTypes["default"].object.isRequired
103-
};
92+
}(_react.Component), _class2.propTypes = {
93+
field: _propTypes["default"].instanceOf(Object).isRequired,
94+
instance: _propTypes["default"].instanceOf(Object).isRequired
95+
}, _temp)) || _class) || _class);
10496
var _default = FormField;
10597
exports["default"] = _default;

‎dist/components/form/FormSection/index.js‎

Lines changed: 4 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -35,16 +35,10 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
3535

3636
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
3737

38-
var style = {
39-
display: 'flex',
40-
height: '100%',
41-
flexShrink: 0
42-
};
43-
4438
var FormSection =
4539
/*#__PURE__*/
46-
function (_PureComponent) {
47-
_inherits(FormSection, _PureComponent);
40+
function (_Component) {
41+
_inherits(FormSection, _Component);
4842

4943
function FormSection() {
5044
_classCallCheck(this, FormSection);
@@ -58,7 +52,7 @@ function (_PureComponent) {
5852
var section = this.props.section;
5953
if (!section) return null;
6054
return _react["default"].createElement("div", {
61-
style: style
55+
className: "form-section"
6256
}, section.subsections.length > 1 ? _react["default"].createElement(_TabbedSubsections["default"], {
6357
section: section
6458
}) : _react["default"].createElement(_FormSubsection["default"], {
@@ -68,7 +62,7 @@ function (_PureComponent) {
6862
}]);
6963

7064
return FormSection;
71-
}(_react.PureComponent);
65+
}(_react.Component);
7266

7367
FormSection.propTypes = {
7468
section: _propTypes["default"].shape({

‎dist/components/form/FormSubsection/index.js‎

Lines changed: 4 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -41,25 +41,6 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
4141

4242
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
4343

44-
var styles = {
45-
container: {
46-
display: 'flex',
47-
flexDirection: 'column',
48-
flex: 1,
49-
flexShrink: 0,
50-
height: '100%'
51-
},
52-
fields: {
53-
width: '100%',
54-
height: '100%',
55-
padding: '.5em .75em'
56-
},
57-
submit: {
58-
border: 'none',
59-
display: 'flex',
60-
justifyContent: 'flex-end'
61-
}
62-
};
6344
var FormSubsection = (_dec = (0, _mobxReact.inject)('instance', 'hideFormTitle', 'hideSubsectionTitles', 'hideSubsectionSubtitles'), _dec(_class = (0, _mobxReact.observer)(_class = (_temp = _class2 =
6445
/*#__PURE__*/
6546
function (_Component) {
@@ -90,8 +71,7 @@ function (_Component) {
9071
value: function renderSubmit(hideFormTitle) {
9172
if (!hideFormTitle) return null;
9273
return _react["default"].createElement("div", {
93-
className: "panel-block",
94-
style: styles.submit
74+
className: "panel-block form-submit-button"
9575
}, _react["default"].createElement(_FormSubmitButton["default"], null));
9676
}
9777
}, {
@@ -102,13 +82,13 @@ function (_Component) {
10282
hideFormTitle = _this$props.hideFormTitle,
10383
isTabbed = _this$props.isTabbed;
10484
return _react["default"].createElement("div", {
105-
style: styles.container,
106-
className: "panel"
85+
className: "panel form-subsection",
86+
s: true
10787
}, _react["default"].createElement(_FormSubsectionTitle["default"], {
10888
subsection: subsection,
10989
isTabbed: isTabbed
11090
}), _react["default"].createElement("div", {
111-
style: styles.fields
91+
className: "form-subsection-fields"
11292
}, this.renderSubsectionFields(subsection.fields)), this.renderSubmit(hideFormTitle));
11393
}
11494
}]);

0 commit comments

Comments
 (0)