From 8bef9c0be116fe011dfd1977f3d202edd302c9d6 Mon Sep 17 00:00:00 2001 From: Daniel Nitsikopoulos Date: Fri, 25 May 2018 18:20:21 +1000 Subject: [PATCH 1/3] Add disabled option to text field components --- src/components/fields/text-field/index.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/components/fields/text-field/index.js b/src/components/fields/text-field/index.js index 73220b54..0b1a6c38 100644 --- a/src/components/fields/text-field/index.js +++ b/src/components/fields/text-field/index.js @@ -26,6 +26,7 @@ class TextField extends React.Component { inline: PropTypes.bool, code: PropTypes.bool, password: PropTypes.bool, + disabled: PropTypes.bool, }), hint: PropTypes.string, label: PropTypes.string, @@ -59,6 +60,7 @@ class TextField extends React.Component { let { attributes, errors, hint, label, name, value } = this.props let hasErrors = (errors.count() > 0) let type = (attributes.password) ? 'password' : 'text' + let disabled = (attributes.disabled) ? 'disabled' : '' // Set up field classes let fieldClassNames = classNames( @@ -86,6 +88,7 @@ class TextField extends React.Component { className={inputClassNames} placeholder={attributes.placeholder} defaultValue={value} + disabled={disabled} onChange={this.onChange} /> {(hasErrors) ? : null} From b6dc7a8aa6f8417ae79cc46e7ae374a7a3310a33 Mon Sep 17 00:00:00 2001 From: Daniel Nitsikopoulos Date: Tue, 29 May 2018 17:44:00 +1000 Subject: [PATCH 2/3] Add disabled option to text-field --- lib/components/fields/check-box/index.js | 14 ++-- lib/components/fields/common/header/index.js | 8 +-- lib/components/fields/container.js | 37 +++++----- lib/components/fields/date-field/index.js | 14 ++-- .../fields/date-time-field/index.js | 14 ++-- .../fields/multi-selection-field/index.js | 47 ++++++------- .../fields/multi-upload-field/index.js | 64 ++++++++--------- lib/components/fields/number-field/index.js | 14 ++-- lib/components/fields/radio-buttons/index.js | 14 ++-- lib/components/fields/rich-text-area/index.js | 14 ++-- .../search-multi-selection-field/index.js | 69 ++++++++++--------- .../fields/search-selection-field/index.js | 67 +++++++++--------- lib/components/fields/select-box/index.js | 14 ++-- .../fields/selection-field/index.js | 47 ++++++------- lib/components/fields/tags-field/index.js | 64 ++++++++--------- .../fields/tags-field/search-list.js | 27 ++++---- lib/components/fields/text-area/index.js | 14 ++-- lib/components/fields/text-field/index.js | 19 ++--- lib/components/group.js | 6 +- lib/components/many.js | 53 +++++++------- lib/components/ui/checkbox/index.js | 10 +-- lib/components/ui/date-picker/index.js | 10 +-- lib/components/ui/date-time-picker/index.js | 8 +-- lib/components/ui/dropzone/index.js | 22 +++--- lib/components/ui/file-input/index.js | 8 +-- lib/components/ui/modal/index.js | 6 +- lib/components/ui/popout/index.js | 12 ++-- lib/components/ui/popunder/index.js | 16 ++--- lib/components/ui/radio-button/index.js | 12 ++-- .../block-toolbar-plugin/block-items/index.js | 6 +- .../block-toolbar-plugin/blocks/atomic.js | 12 ++-- .../block-toolbar-plugin/form-items/index.js | 8 +-- .../block-toolbar-plugin/index.js | 35 +++++----- .../block-toolbar-plugin/toolbar.js | 18 ++--- lib/components/ui/rich-text-editor/index.js | 36 +++++----- .../inline-toolbar-plugin/entities/link.js | 17 ++--- .../inline-toolbar-plugin/index.js | 31 +++++---- .../inline-toolbar-plugin/items/index.js | 18 ++--- .../inline-toolbar-plugin/toolbar.js | 45 ++++++------ lib/components/ui/search-selector/index.js | 59 ++++++++-------- .../ui/search-selector/pagination/index.js | 22 +++--- lib/components/ui/select/index.js | 16 ++--- lib/components/ui/sortable/index.js | 16 ++--- lib/components/ui/sortable/item.js | 24 +++---- lib/components/ui/time-picker/index.js | 58 +++++++++------- 45 files changed, 590 insertions(+), 555 deletions(-) diff --git a/lib/components/fields/check-box/index.js b/lib/components/fields/check-box/index.js index 2be889a2..07b1b9f5 100644 --- a/lib/components/fields/check-box/index.js +++ b/lib/components/fields/check-box/index.js @@ -93,13 +93,13 @@ var CheckBox = function (_React$Component) { _createClass(CheckBox, [{ key: 'render', value: function render() { - var _props = this.props, - attributes = _props.attributes, - errors = _props.errors, - hint = _props.hint, - label = _props.label, - name = _props.name, - value = _props.value; + var _props = this.props; + var attributes = _props.attributes; + var errors = _props.errors; + var hint = _props.hint; + var label = _props.label; + var name = _props.name; + var value = _props.value; var hasErrors = errors.count() > 0; diff --git a/lib/components/fields/common/header/index.js b/lib/components/fields/common/header/index.js index 2e201ca6..b6e18022 100644 --- a/lib/components/fields/common/header/index.js +++ b/lib/components/fields/common/header/index.js @@ -61,10 +61,10 @@ var FieldHeader = function (_React$Component) { }, { key: 'render', value: function render() { - var _props = this.props, - id = _props.id, - label = _props.label, - hint = _props.hint; + var _props = this.props; + var id = _props.id; + var label = _props.label; + var hint = _props.hint; if (!label && !hint) { return null; diff --git a/lib/components/fields/container.js b/lib/components/fields/container.js index c6df8913..72b2ae07 100644 --- a/lib/components/fields/container.js +++ b/lib/components/fields/container.js @@ -44,9 +44,9 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen 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) : subClass.__proto__ = superClass; } -var deleteField = _formalistCompose.actions.deleteField, - editField = _formalistCompose.actions.editField, - validateField = _formalistCompose.actions.validateField; +var deleteField = _formalistCompose.actions.deleteField; +var editField = _formalistCompose.actions.editField; +var validateField = _formalistCompose.actions.validateField; /** * Container class for fields. @@ -88,17 +88,17 @@ var FieldContainer = function (_React$Component) { }, { key: 'render', value: function render() { - var _props = this.props, - attributes = _props.attributes, - bus = _props.bus, - config = _props.config, - errors = _props.errors, - field = _props.field, - name = _props.name, - path = _props.path, - rules = _props.rules, - store = _props.store, - value = _props.value; + var _props = this.props; + var attributes = _props.attributes; + var bus = _props.bus; + var config = _props.config; + var errors = _props.errors; + var field = _props.field; + var name = _props.name; + var path = _props.path; + var rules = _props.rules; + var store = _props.store; + var value = _props.value; var Field = field; @@ -107,8 +107,8 @@ var FieldContainer = function (_React$Component) { // Extract a few things from attributes var label = attributes.label || this.props.name.replace(/_/g, ' '); - var _attributes = attributes, - hint = _attributes.hint; + var _attributes = attributes; + var hint = _attributes.hint; // Curry with the form validation schema @@ -129,9 +129,10 @@ var FieldContainer = function (_React$Component) { } return store.batchDispatch([editField(path, val), validateField(path, validate(editedValue))]); } + }; - // Set up standard classNames - };var containerClassNames = (0, _classnames2.default)(_container2.default.base, _defineProperty({}, '' + _container2.default.errors, errors.count() > 0)); + // Set up standard classNames + var containerClassNames = (0, _classnames2.default)(_container2.default.base, _defineProperty({}, '' + _container2.default.errors, errors.count() > 0)); return ( // *Explicitly* pass all the props we care about down to the field diff --git a/lib/components/fields/date-field/index.js b/lib/components/fields/date-field/index.js index dbe7947c..59569dbe 100644 --- a/lib/components/fields/date-field/index.js +++ b/lib/components/fields/date-field/index.js @@ -105,13 +105,13 @@ var DateField = function (_React$Component) { value: function render() { var _this2 = this; - var _props = this.props, - attributes = _props.attributes, - errors = _props.errors, - hint = _props.hint, - label = _props.label, - name = _props.name, - value = _props.value; + var _props = this.props; + var attributes = _props.attributes; + var errors = _props.errors; + var hint = _props.hint; + var label = _props.label; + var name = _props.name; + var value = _props.value; var hasErrors = errors.count() > 0; diff --git a/lib/components/fields/date-time-field/index.js b/lib/components/fields/date-time-field/index.js index 0413b58d..a9f27d28 100644 --- a/lib/components/fields/date-time-field/index.js +++ b/lib/components/fields/date-time-field/index.js @@ -105,13 +105,13 @@ var DateTimeField = function (_React$Component) { value: function render() { var _this2 = this; - var _props = this.props, - attributes = _props.attributes, - errors = _props.errors, - hint = _props.hint, - label = _props.label, - name = _props.name, - value = _props.value; + var _props = this.props; + var attributes = _props.attributes; + var errors = _props.errors; + var hint = _props.hint; + var label = _props.label; + var name = _props.name; + var value = _props.value; var hasErrors = errors.count() > 0; diff --git a/lib/components/fields/multi-selection-field/index.js b/lib/components/fields/multi-selection-field/index.js index 23b06fed..451122fa 100644 --- a/lib/components/fields/multi-selection-field/index.js +++ b/lib/components/fields/multi-selection-field/index.js @@ -93,14 +93,15 @@ SelectDefault.propTypes = { option: _propTypes2.default.shape({ label: _propTypes2.default.string }) - - /** - * Selection field - * - * Handles a singular select of a set of pre-supplied options. - * - */ }; + +/** + * Selection field + * + * Handles a singular select of a set of pre-supplied options. + * + */ + var SelectionField = function (_React$Component) { _inherits(SelectionField, _React$Component); @@ -269,22 +270,22 @@ var SelectionField = function (_React$Component) { value: function render() { var _this2 = this; - var _props = this.props, - attributes = _props.attributes, - config = _props.config, - errors = _props.errors, - hint = _props.hint, - label = _props.label, - name = _props.name, - value = _props.value; - var _state = this.state, - search = _state.search, - searchFocus = _state.searchFocus; - var options = attributes.options, - placeholder = attributes.placeholder, - selector_label = attributes.selector_label, - render_selection_as = attributes.render_selection_as, - render_option_as = attributes.render_option_as; + var _props = this.props; + var attributes = _props.attributes; + var config = _props.config; + var errors = _props.errors; + var hint = _props.hint; + var label = _props.label; + var name = _props.name; + var value = _props.value; + var _state = this.state; + var search = _state.search; + var searchFocus = _state.searchFocus; + var options = attributes.options; + var placeholder = attributes.placeholder; + var selector_label = attributes.selector_label; + var render_selection_as = attributes.render_selection_as; + var render_option_as = attributes.render_option_as; var hasErrors = errors.count() > 0; diff --git a/lib/components/fields/multi-upload-field/index.js b/lib/components/fields/multi-upload-field/index.js index e80bd384..1a408d67 100644 --- a/lib/components/fields/multi-upload-field/index.js +++ b/lib/components/fields/multi-upload-field/index.js @@ -462,22 +462,22 @@ var MultiUploadField = function (_React$Component) { */ value: function render() { - var _props = this.props, - attributes = _props.attributes, - hint = _props.hint, - label = _props.label, - name = _props.name, - errors = _props.errors; - var upload_prompt = attributes.upload_prompt, - upload_action_label = attributes.upload_action_label; + var _props = this.props; + var attributes = _props.attributes; + var hint = _props.hint; + var label = _props.label; + var name = _props.name; + var errors = _props.errors; + var upload_prompt = attributes.upload_prompt; + var upload_action_label = attributes.upload_action_label; var hasErrors = errors.count() > 0; - var _state = this.state, - XHRErrorMessages = _state.XHRErrorMessages, - files = _state.files, - invalidFiles = _state.invalidFiles; + var _state = this.state; + var XHRErrorMessages = _state.XHRErrorMessages; + var files = _state.files; + var invalidFiles = _state.invalidFiles; // Set up field classes @@ -560,11 +560,11 @@ var _initialiseProps = function _initialiseProps() { this.createFileObjects = function (val) { // format the object function formatObject(file) { - var name = file.name, - size = file.size, - type = file.type, - lastModifiedDate = file.lastModifiedDate, - lastModified = file.lastModified; + var name = file.name; + var size = file.size; + var type = file.type; + var lastModifiedDate = file.lastModifiedDate; + var lastModified = file.lastModified; var lastModifiedAsString = lastModifiedDate ? lastModifiedDate.toString() : lastModified.toString(); return { @@ -760,10 +760,10 @@ var _initialiseProps = function _initialiseProps() { _this2.removeFile(0); } - var permitted_file_type_regex = attributes.permitted_file_type_regex, - permitted_file_type_message = attributes.permitted_file_type_message, - max_file_size = attributes.max_file_size, - max_file_size_message = attributes.max_file_size_message; + var permitted_file_type_regex = attributes.permitted_file_type_regex; + var permitted_file_type_message = attributes.permitted_file_type_message; + var max_file_size = attributes.max_file_size; + var max_file_size_message = attributes.max_file_size_message; var status = void 0; @@ -910,8 +910,8 @@ var _initialiseProps = function _initialiseProps() { }; this.renderInvalidFile = function (errorObject, index) { - var message = errorObject.message, - file = errorObject.file; + var message = errorObject.message; + var file = errorObject.file; var name = file.name; @@ -996,9 +996,9 @@ var _initialiseProps = function _initialiseProps() { }; this.renderPreviewItem = function (fileObject, index) { - var progress = fileObject.progress, - file = fileObject.file, - fileAttributes = fileObject.fileAttributes; + var progress = fileObject.progress; + var file = fileObject.file; + var fileAttributes = fileObject.fileAttributes; var file_name = fileAttributes.file_name; var preview = file.preview; @@ -1039,9 +1039,9 @@ var _initialiseProps = function _initialiseProps() { this.renderDefaultTemplate = function (fileObject, index) { var fileAttributes = fileObject.fileAttributes; - var file_name = fileAttributes.file_name, - thumbnail_url = fileAttributes.thumbnail_url, - original_url = fileAttributes.original_url; + var file_name = fileAttributes.file_name; + var thumbnail_url = fileAttributes.thumbnail_url; + var original_url = fileAttributes.original_url; var hasThumbnail = thumbnail_url != null || (0, _utils.hasImageFormatType)(file_name); var thumbnailImage = hasThumbnail ? _this2.renderThumbnail(thumbnail_url, file_name) : null; @@ -1103,9 +1103,9 @@ var _initialiseProps = function _initialiseProps() { this.renderFiles = function (files) { var isSortable = _this2.state.uploadQueue.length === 0; - var _props2 = _this2.props, - config = _props2.config, - attributes = _props2.attributes; + var _props2 = _this2.props; + var config = _props2.config; + var attributes = _props2.attributes; var render_uploaded_as = attributes.render_uploaded_as; diff --git a/lib/components/fields/number-field/index.js b/lib/components/fields/number-field/index.js index 8499f52a..09bb503c 100644 --- a/lib/components/fields/number-field/index.js +++ b/lib/components/fields/number-field/index.js @@ -103,13 +103,13 @@ var NumberField = function (_React$Component) { _createClass(NumberField, [{ key: 'render', value: function render() { - var _props = this.props, - attributes = _props.attributes, - errors = _props.errors, - hint = _props.hint, - label = _props.label, - name = _props.name, - value = _props.value; + var _props = this.props; + var attributes = _props.attributes; + var errors = _props.errors; + var hint = _props.hint; + var label = _props.label; + var name = _props.name; + var value = _props.value; var hasErrors = errors.count() > 0; diff --git a/lib/components/fields/radio-buttons/index.js b/lib/components/fields/radio-buttons/index.js index 7b7e57e7..25b11f08 100644 --- a/lib/components/fields/radio-buttons/index.js +++ b/lib/components/fields/radio-buttons/index.js @@ -101,13 +101,13 @@ var RadioButtons = function (_React$Component) { value: function render() { var _this2 = this; - var _props = this.props, - attributes = _props.attributes, - errors = _props.errors, - hint = _props.hint, - label = _props.label, - name = _props.name, - value = _props.value; + var _props = this.props; + var attributes = _props.attributes; + var errors = _props.errors; + var hint = _props.hint; + var label = _props.label; + var name = _props.name; + var value = _props.value; var hasErrors = errors.count() > 0; diff --git a/lib/components/fields/rich-text-area/index.js b/lib/components/fields/rich-text-area/index.js index 75353443..85cc1bff 100644 --- a/lib/components/fields/rich-text-area/index.js +++ b/lib/components/fields/rich-text-area/index.js @@ -103,13 +103,13 @@ var RichTextArea = function (_React$Component) { _createClass(RichTextArea, [{ key: 'render', value: function render() { - var _props = this.props, - attributes = _props.attributes, - config = _props.config, - errors = _props.errors, - hint = _props.hint, - label = _props.label, - name = _props.name; + var _props = this.props; + var attributes = _props.attributes; + var config = _props.config; + var errors = _props.errors; + var hint = _props.hint; + var label = _props.label; + var name = _props.name; var editorState = this.state.editorState; var hasErrors = errors.count() > 0; diff --git a/lib/components/fields/search-multi-selection-field/index.js b/lib/components/fields/search-multi-selection-field/index.js index 65aa0871..79f5bacc 100644 --- a/lib/components/fields/search-multi-selection-field/index.js +++ b/lib/components/fields/search-multi-selection-field/index.js @@ -93,14 +93,15 @@ SelectDefault.propTypes = { option: _propTypes2.default.shape({ label: _propTypes2.default.string }) - - /** - * Search Selection field - * - * Handles the singular select of a - * - */ }; + +/** + * Search Selection field + * + * Handles the singular select of a + * + */ + var SearchMultiSelectionField = function (_Component) { _inherits(SearchMultiSelectionField, _Component); @@ -122,9 +123,10 @@ var SearchMultiSelectionField = function (_Component) { selections: _this.cachedSelections, selectorFocus: false, selectorQuery: null + }; - // Bindings - };_this.onChange = _this.onChange.bind(_this); + // Bindings + _this.onChange = _this.onChange.bind(_this); _this.onChooseClick = _this.onChooseClick.bind(_this); _this.onSelection = _this.onSelection.bind(_this); _this.onRemove = _this.onRemove.bind(_this); @@ -157,9 +159,9 @@ var SearchMultiSelectionField = function (_Component) { var _this2 = this; // Do an XHR request for the additional selection data - var _props = this.props, - attributes = _props.attributes, - value = _props.value; + var _props = this.props; + var attributes = _props.attributes; + var value = _props.value; if (value && value.count() > 0) { var search_url = attributes.search_url; @@ -345,22 +347,22 @@ var SearchMultiSelectionField = function (_Component) { value: function render() { var _this3 = this; - var _props2 = this.props, - attributes = _props2.attributes, - config = _props2.config, - errors = _props2.errors, - hint = _props2.hint, - label = _props2.label, - name = _props2.name, - value = _props2.value; - var placeholder = attributes.placeholder, - selector_label = attributes.selector_label, - render_option_as = attributes.render_option_as, - render_selection_as = attributes.render_selection_as; - var _state = this.state, - selections = _state.selections, - selectorFocus = _state.selectorFocus, - selectorQuery = _state.selectorQuery; + var _props2 = this.props; + var attributes = _props2.attributes; + var config = _props2.config; + var errors = _props2.errors; + var hint = _props2.hint; + var label = _props2.label; + var name = _props2.name; + var value = _props2.value; + var placeholder = attributes.placeholder; + var selector_label = attributes.selector_label; + var render_option_as = attributes.render_option_as; + var render_selection_as = attributes.render_selection_as; + var _state = this.state; + var selections = _state.selections; + var selectorFocus = _state.selectorFocus; + var selectorQuery = _state.selectorQuery; var hasErrors = errors.count() > 0; @@ -466,12 +468,13 @@ var SearchMultiSelectionField = function (_Component) { SearchMultiSelectionField.contextTypes = { globalConfig: _propTypes2.default.object +}; - /** - * PropTypes - * @type {Object} - */ -};SearchMultiSelectionField.propTypes = { +/** + * PropTypes + * @type {Object} + */ +SearchMultiSelectionField.propTypes = { actions: _propTypes2.default.object, name: _propTypes2.default.string, config: _propTypes2.default.object, diff --git a/lib/components/fields/search-selection-field/index.js b/lib/components/fields/search-selection-field/index.js index d8b6e465..0528f2c5 100644 --- a/lib/components/fields/search-selection-field/index.js +++ b/lib/components/fields/search-selection-field/index.js @@ -87,14 +87,15 @@ SelectDefault.propTypes = { option: _propTypes2.default.shape({ label: _propTypes2.default.string }) - - /** - * Search Selection field - * - * Handles the singular select of a - * - */ }; + +/** + * Search Selection field + * + * Handles the singular select of a + * + */ + var SearchSelectionField = function (_Component) { _inherits(SearchSelectionField, _Component); @@ -107,9 +108,10 @@ var SearchSelectionField = function (_Component) { _this.state = { selectorFocus: false, selectorQuery: null + }; - // Bindings - };_this.onChange = _this.onChange.bind(_this); + // Bindings + _this.onChange = _this.onChange.bind(_this); _this.onChooseClick = _this.onChooseClick.bind(_this); _this.onRemoveClick = _this.onRemoveClick.bind(_this); _this.onSelection = _this.onSelection.bind(_this); @@ -136,9 +138,9 @@ var SearchSelectionField = function (_Component) { var _this2 = this; // Do an XHR request for the additional selection data - var _props = this.props, - attributes = _props.attributes, - value = _props.value; + var _props = this.props; + var attributes = _props.attributes; + var value = _props.value; if (value) { var search_url = attributes.search_url; @@ -293,21 +295,21 @@ var SearchSelectionField = function (_Component) { value: function render() { var _this3 = this; - var _props2 = this.props, - attributes = _props2.attributes, - config = _props2.config, - errors = _props2.errors, - hint = _props2.hint, - label = _props2.label, - name = _props2.name; - var placeholder = attributes.placeholder, - selector_label = attributes.selector_label, - render_option_as = attributes.render_option_as, - render_selection_as = attributes.render_selection_as; - var _state = this.state, - selection = _state.selection, - selectorFocus = _state.selectorFocus, - selectorQuery = _state.selectorQuery; + var _props2 = this.props; + var attributes = _props2.attributes; + var config = _props2.config; + var errors = _props2.errors; + var hint = _props2.hint; + var label = _props2.label; + var name = _props2.name; + var placeholder = attributes.placeholder; + var selector_label = attributes.selector_label; + var render_option_as = attributes.render_option_as; + var render_selection_as = attributes.render_selection_as; + var _state = this.state; + var selection = _state.selection; + var selectorFocus = _state.selectorFocus; + var selectorQuery = _state.selectorQuery; var hasErrors = errors.count() > 0; @@ -418,12 +420,13 @@ var SearchSelectionField = function (_Component) { SearchSelectionField.contextTypes = { globalConfig: _propTypes2.default.object +}; - /** - * PropTypes - * @type {Object} - */ -};SearchSelectionField.propTypes = { +/** + * PropTypes + * @type {Object} + */ +SearchSelectionField.propTypes = { actions: _propTypes2.default.object, name: _propTypes2.default.string, config: _propTypes2.default.object, diff --git a/lib/components/fields/select-box/index.js b/lib/components/fields/select-box/index.js index 74a70fbb..fdb65320 100644 --- a/lib/components/fields/select-box/index.js +++ b/lib/components/fields/select-box/index.js @@ -92,13 +92,13 @@ var SelectBox = function (_React$Component) { _createClass(SelectBox, [{ key: 'render', value: function render() { - var _props = this.props, - attributes = _props.attributes, - errors = _props.errors, - hint = _props.hint, - label = _props.label, - name = _props.name, - value = _props.value; + var _props = this.props; + var attributes = _props.attributes; + var errors = _props.errors; + var hint = _props.hint; + var label = _props.label; + var name = _props.name; + var value = _props.value; var hasErrors = errors.count() > 0; diff --git a/lib/components/fields/selection-field/index.js b/lib/components/fields/selection-field/index.js index a3d4336b..d402b015 100644 --- a/lib/components/fields/selection-field/index.js +++ b/lib/components/fields/selection-field/index.js @@ -87,14 +87,15 @@ SelectDefault.propTypes = { option: _propTypes2.default.shape({ label: _propTypes2.default.string }) - - /** - * Selection field - * - * Handles a singular select of a set of pre-supplied options. - * - */ }; + +/** + * Selection field + * + * Handles a singular select of a set of pre-supplied options. + * + */ + var SelectionField = function (_React$Component) { _inherits(SelectionField, _React$Component); @@ -245,22 +246,22 @@ var SelectionField = function (_React$Component) { value: function render() { var _this2 = this; - var _props = this.props, - attributes = _props.attributes, - config = _props.config, - errors = _props.errors, - hint = _props.hint, - label = _props.label, - name = _props.name, - value = _props.value; - var _state = this.state, - search = _state.search, - searchFocus = _state.searchFocus; - var options = attributes.options, - placeholder = attributes.placeholder, - selector_label = attributes.selector_label, - render_option_as = attributes.render_option_as, - render_selection_as = attributes.render_selection_as; + var _props = this.props; + var attributes = _props.attributes; + var config = _props.config; + var errors = _props.errors; + var hint = _props.hint; + var label = _props.label; + var name = _props.name; + var value = _props.value; + var _state = this.state; + var search = _state.search; + var searchFocus = _state.searchFocus; + var options = attributes.options; + var placeholder = attributes.placeholder; + var selector_label = attributes.selector_label; + var render_option_as = attributes.render_option_as; + var render_selection_as = attributes.render_selection_as; var hasErrors = errors.count() > 0; diff --git a/lib/components/fields/tags-field/index.js b/lib/components/fields/tags-field/index.js index f747b992..a2bf6901 100644 --- a/lib/components/fields/tags-field/index.js +++ b/lib/components/fields/tags-field/index.js @@ -80,8 +80,8 @@ var TagsField = function (_Component) { var _this = _possibleConstructorReturn(this, (TagsField.__proto__ || Object.getPrototypeOf(TagsField)).call(this, props)); var attributes = props.attributes; - var search_url = attributes.search_url, - search_threshold = attributes.search_threshold; + var search_url = attributes.search_url; + var search_threshold = attributes.search_threshold; // Initial state @@ -91,9 +91,10 @@ var TagsField = function (_Component) { tagsLoading: false, canSearch: search_url != null, searchThreshold: search_threshold || 1 + }; - // Bindings - };_this.onChange = _this.onChange.bind(_this); + // Bindings + _this.onChange = _this.onChange.bind(_this); _this.onInputBlur = _this.onInputBlur.bind(_this); _this.onInputChange = _this.onInputChange.bind(_this); _this.onInputFocus = _this.onInputFocus.bind(_this); @@ -125,10 +126,10 @@ var TagsField = function (_Component) { }, { key: 'onInputFocus', value: function onInputFocus(e) { - var _state = this.state, - canSearch = _state.canSearch, - inputQuery = _state.inputQuery, - searchThreshold = _state.searchThreshold; + var _state = this.state; + var canSearch = _state.canSearch; + var inputQuery = _state.inputQuery; + var searchThreshold = _state.searchThreshold; this.setState({ inputFocus: true @@ -161,9 +162,9 @@ var TagsField = function (_Component) { }, { key: 'onInputChange', value: function onInputChange(e) { - var _state2 = this.state, - canSearch = _state2.canSearch, - searchThreshold = _state2.searchThreshold; + var _state2 = this.state; + var canSearch = _state2.canSearch; + var searchThreshold = _state2.searchThreshold; var inputQuery = e.target.value; this.setState({ @@ -305,21 +306,21 @@ var TagsField = function (_Component) { value: function render() { var _this3 = this; - var _props = this.props, - attributes = _props.attributes, - errors = _props.errors, - hint = _props.hint, - label = _props.label, - name = _props.name; - var placeholder = attributes.placeholder, - search_url = attributes.search_url, - search_params = attributes.search_params; - var _state3 = this.state, - canSearch = _state3.canSearch, - inputFocus = _state3.inputFocus, - inputQuery = _state3.inputQuery, - searchThreshold = _state3.searchThreshold, - tagsLoading = _state3.tagsLoading; + var _props = this.props; + var attributes = _props.attributes; + var errors = _props.errors; + var hint = _props.hint; + var label = _props.label; + var name = _props.name; + var placeholder = attributes.placeholder; + var search_url = attributes.search_url; + var search_params = attributes.search_params; + var _state3 = this.state; + var canSearch = _state3.canSearch; + var inputFocus = _state3.inputFocus; + var inputQuery = _state3.inputQuery; + var searchThreshold = _state3.searchThreshold; + var tagsLoading = _state3.tagsLoading; var hasErrors = errors.count() > 0; @@ -431,12 +432,13 @@ var TagsField = function (_Component) { TagsField.contextTypes = { globalConfig: _propTypes2.default.object +}; - /** - * PropTypes - * @type {Object} - */ -};TagsField.propTypes = { +/** + * PropTypes + * @type {Object} + */ +TagsField.propTypes = { actions: _propTypes2.default.object, name: _propTypes2.default.string, config: _propTypes2.default.object, diff --git a/lib/components/fields/tags-field/search-list.js b/lib/components/fields/tags-field/search-list.js index fa603875..65c3938f 100644 --- a/lib/components/fields/tags-field/search-list.js +++ b/lib/components/fields/tags-field/search-list.js @@ -78,9 +78,10 @@ var SearchList = function (_Component) { _this.state = { results: [], selectedIndex: -1 + }; - // Bindings - };_this.onSearchSuccess = _this.onSearchSuccess.bind(_this); + // Bindings + _this.onSearchSuccess = _this.onSearchSuccess.bind(_this); _this.onKeyDown = _this.onKeyDown.bind(_this); return _this; } @@ -132,9 +133,9 @@ var SearchList = function (_Component) { }, { key: 'onKeyDown', value: function onKeyDown(e) { - var _state = this.state, - selectedIndex = _state.selectedIndex, - results = _state.results; + var _state = this.state; + var selectedIndex = _state.selectedIndex; + var results = _state.results; if (e.keyCode === _keyCodes2.default.DOWN) { // Move focus down @@ -173,11 +174,11 @@ var SearchList = function (_Component) { }, { key: 'doSearch', value: function doSearch() { - var _props = this.props, - query = _props.query, - params = _props.params, - threshold = _props.threshold, - url = _props.url; + var _props = this.props; + var query = _props.query; + var params = _props.params; + var threshold = _props.threshold; + var url = _props.url; // Abort any existing requests abortCurrentSearch(this.currentRequest); @@ -250,9 +251,9 @@ var SearchList = function (_Component) { key: 'render', value: function render() { var onSelect = this.props.onSelect; - var _state2 = this.state, - results = _state2.results, - selectedIndex = _state2.selectedIndex; + var _state2 = this.state; + var results = _state2.results; + var selectedIndex = _state2.selectedIndex; var hasResults = results.length > 0; if (hasResults) { diff --git a/lib/components/fields/text-area/index.js b/lib/components/fields/text-area/index.js index 300d8873..e0143bc5 100644 --- a/lib/components/fields/text-area/index.js +++ b/lib/components/fields/text-area/index.js @@ -93,13 +93,13 @@ var TextArea = function (_React$Component) { _createClass(TextArea, [{ key: 'render', value: function render() { - var _props = this.props, - attributes = _props.attributes, - errors = _props.errors, - hint = _props.hint, - label = _props.label, - name = _props.name, - value = _props.value; + var _props = this.props; + var attributes = _props.attributes; + var errors = _props.errors; + var hint = _props.hint; + var label = _props.label; + var name = _props.name; + var value = _props.value; var hasErrors = errors.count() > 0; diff --git a/lib/components/fields/text-field/index.js b/lib/components/fields/text-field/index.js index 418b78ec..d45cb86e 100644 --- a/lib/components/fields/text-field/index.js +++ b/lib/components/fields/text-field/index.js @@ -92,16 +92,17 @@ var TextField = function (_React$Component) { _createClass(TextField, [{ key: 'render', value: function render() { - var _props = this.props, - attributes = _props.attributes, - errors = _props.errors, - hint = _props.hint, - label = _props.label, - name = _props.name, - value = _props.value; + var _props = this.props; + var attributes = _props.attributes; + var errors = _props.errors; + var hint = _props.hint; + var label = _props.label; + var name = _props.name; + var value = _props.value; var hasErrors = errors.count() > 0; var type = attributes.password ? 'password' : 'text'; + var disabled = attributes.disabled ? 'disabled' : ''; // Set up field classes var fieldClassNames = (0, _classnames2.default)(_textField2.default.base, _defineProperty({}, '' + _textField2.default.baseInline, attributes.inline)); @@ -127,6 +128,7 @@ var TextField = function (_React$Component) { className: inputClassNames, placeholder: attributes.placeholder, defaultValue: value, + disabled: disabled, onChange: this.onChange }), hasErrors ? _react2.default.createElement(_errors2.default, { errors: errors }) : null ) @@ -147,7 +149,8 @@ TextField.propTypes = { placeholder: _propTypes2.default.string, inline: _propTypes2.default.bool, code: _propTypes2.default.bool, - password: _propTypes2.default.bool + password: _propTypes2.default.bool, + disabled: _propTypes2.default.bool }), hint: _propTypes2.default.string, label: _propTypes2.default.string, diff --git a/lib/components/group.js b/lib/components/group.js index 6877a3fc..1058656c 100644 --- a/lib/components/group.js +++ b/lib/components/group.js @@ -52,9 +52,9 @@ var Group = function (_React$Component) { }, { key: 'render', value: function render() { - var _props = this.props, - attributes = _props.attributes, - children = _props.children; + var _props = this.props; + var attributes = _props.attributes; + var children = _props.children; var label = attributes.get('label'); diff --git a/lib/components/many.js b/lib/components/many.js index 0b0afef3..6ea8acad 100644 --- a/lib/components/many.js +++ b/lib/components/many.js @@ -51,10 +51,10 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen 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) : subClass.__proto__ = superClass; } -var addManyContent = _formalistCompose.actions.addManyContent, - deleteManyContent = _formalistCompose.actions.deleteManyContent, - reorderManyContents = _formalistCompose.actions.reorderManyContents, - validateMany = _formalistCompose.actions.validateMany; +var addManyContent = _formalistCompose.actions.addManyContent; +var deleteManyContent = _formalistCompose.actions.deleteManyContent; +var reorderManyContents = _formalistCompose.actions.reorderManyContents; +var validateMany = _formalistCompose.actions.validateMany; // Components @@ -110,21 +110,21 @@ var Many = function (_React$Component2) { }); }, _this2.addChild = function (e) { e.preventDefault(); - var _this2$props = _this2.props, - attributes = _this2$props.attributes, - store = _this2$props.store, - path = _this2$props.path; + var _this2$props = _this2.props; + var attributes = _this2$props.attributes; + var store = _this2$props.store; + var path = _this2$props.path; var validationRules = attributes.get('validation') ? attributes.get('validation').toJS() : null; store.batchDispatch([addManyContent(path), validateMany(path, (0, _formalistValidation2.default)(validationRules))]); _this2.updateContentsKey(); }, _this2.onRemove = function (index) { - var _this2$props2 = _this2.props, - attributes = _this2$props2.attributes, - store = _this2$props2.store, - contentsPath = _this2$props2.contentsPath, - path = _this2$props2.path; + var _this2$props2 = _this2.props; + var attributes = _this2$props2.attributes; + var store = _this2$props2.store; + var contentsPath = _this2$props2.contentsPath; + var path = _this2$props2.path; var childPath = contentsPath.push(index); var validationRules = attributes.get('validation') ? attributes.get('validation').toJS() : null; @@ -132,10 +132,10 @@ var Many = function (_React$Component2) { store.batchDispatch([deleteManyContent(childPath), validateMany(path, (0, _formalistValidation2.default)(validationRules))]); _this2.updateContentsKey(); }, _this2.onDrop = function (newOrder) { - var _this2$props3 = _this2.props, - attributes = _this2$props3.attributes, - store = _this2$props3.store, - path = _this2$props3.path; + var _this2$props3 = _this2.props; + var attributes = _this2$props3.attributes; + var store = _this2$props3.store; + var path = _this2$props3.path; var validationRules = attributes.get('validation') ? attributes.get('validation').toJS() : null; @@ -193,21 +193,22 @@ var Many = function (_React$Component2) { }, { key: 'render', value: function render() { - var _props = this.props, - attributes = _props.attributes, - children = _props.children, - errors = _props.errors, - name = _props.name; + var _props = this.props; + var attributes = _props.attributes; + var children = _props.children; + var errors = _props.errors; + var name = _props.name; var hasErrors = errors.count() > 0; var contentsKey = this.state.contentsKey; // Extract attributes from Immutable.Map - var _attributes$toJS = attributes.toJS(), - label = _attributes$toJS.label, - action_label = _attributes$toJS.action_label, - placeholder = _attributes$toJS.placeholder; + var _attributes$toJS = attributes.toJS(); + + var label = _attributes$toJS.label; + var action_label = _attributes$toJS.action_label; + var placeholder = _attributes$toJS.placeholder; label = label || name.replace(/_/, ' '); diff --git a/lib/components/ui/checkbox/index.js b/lib/components/ui/checkbox/index.js index 823a4347..446f1782 100644 --- a/lib/components/ui/checkbox/index.js +++ b/lib/components/ui/checkbox/index.js @@ -80,11 +80,11 @@ var Checkbox = function (_React$Component) { value: function render() { var _classNames; - var _props = this.props, - defaultChecked = _props.defaultChecked, - label = _props.label, - name = _props.name, - value = _props.value; + var _props = this.props; + var defaultChecked = _props.defaultChecked; + var label = _props.label; + var name = _props.name; + var value = _props.value; var labelClassNames = (0, _classnames2.default)(_checkbox2.default.label, (_classNames = {}, _defineProperty(_classNames, '' + _checkbox2.default.error, this.props.error), _defineProperty(_classNames, '' + _checkbox2.default.focus, this.state.focus), _classNames)); diff --git a/lib/components/ui/date-picker/index.js b/lib/components/ui/date-picker/index.js index 26bdf3ea..5f733eb3 100644 --- a/lib/components/ui/date-picker/index.js +++ b/lib/components/ui/date-picker/index.js @@ -132,11 +132,11 @@ var DatePicker = function (_React$Component) { value: function render() { var _this2 = this; - var _props = this.props, - id = _props.id, - className = _props.className, - error = _props.error, - placeholder = _props.placeholder; + var _props = this.props; + var id = _props.id; + var className = _props.className; + var error = _props.error; + var placeholder = _props.placeholder; var value = this.state.value; var selectedDay = (0, _moment2.default)(this.state.value, 'l', true).toDate(); diff --git a/lib/components/ui/date-time-picker/index.js b/lib/components/ui/date-time-picker/index.js index cdf875ec..797b8371 100644 --- a/lib/components/ui/date-time-picker/index.js +++ b/lib/components/ui/date-time-picker/index.js @@ -141,10 +141,10 @@ var DateTimePicker = function (_React$Component) { }, { key: 'render', value: function render() { - var _props = this.props, - error = _props.error, - id = _props.id, - placeholder = _props.placeholder; + var _props = this.props; + var error = _props.error; + var id = _props.id; + var placeholder = _props.placeholder; var dateValue = this.state.date; diff --git a/lib/components/ui/dropzone/index.js b/lib/components/ui/dropzone/index.js index d5e04928..2c32edb2 100644 --- a/lib/components/ui/dropzone/index.js +++ b/lib/components/ui/dropzone/index.js @@ -213,17 +213,17 @@ var _class = function (_React$Component) { var _classNames, _this2 = this; - var _state = this.state, - files = _state.files, - isActive = _state.isActive; - var _props = this.props, - buttonText = _props.buttonText, - renderPreview = _props.renderPreview, - multiple = _props.multiple, - children = _props.children, - disableClick = _props.disableClick, - hideDropZoneBtn = _props.hideDropZoneBtn, - label = _props.label; + var _state = this.state; + var files = _state.files; + var isActive = _state.isActive; + var _props = this.props; + var buttonText = _props.buttonText; + var renderPreview = _props.renderPreview; + var multiple = _props.multiple; + var children = _props.children; + var disableClick = _props.disableClick; + var hideDropZoneBtn = _props.hideDropZoneBtn; + var label = _props.label; var dropZoneClassNames = (0, _classnames2.default)(_index2.default.dropzone, (_classNames = {}, _defineProperty(_classNames, '' + _index2.default.dropzone__empty, !children), _defineProperty(_classNames, '' + _index2.default.dropzone__disable_hover, children), _defineProperty(_classNames, '' + _index2.default.dropzone__drag_over, isActive), _classNames)); diff --git a/lib/components/ui/file-input/index.js b/lib/components/ui/file-input/index.js index 597b3894..8962409b 100644 --- a/lib/components/ui/file-input/index.js +++ b/lib/components/ui/file-input/index.js @@ -98,10 +98,10 @@ var _class = function (_React$Component) { }, { key: 'render', value: function render() { - var _props = this.props, - name = _props.name, - onChange = _props.onChange, - className = _props.className; + var _props = this.props; + var name = _props.name; + var onChange = _props.onChange; + var className = _props.className; return _react2.default.createElement( diff --git a/lib/components/ui/modal/index.js b/lib/components/ui/modal/index.js index 8c375bd0..ce2c5283 100644 --- a/lib/components/ui/modal/index.js +++ b/lib/components/ui/modal/index.js @@ -178,9 +178,9 @@ var Modal = function (_React$Component) { var _this2 = this; // Extract Portal props - var _props = this.props, - beforeClose = _props.beforeClose, - onUpdate = _props.onUpdate; + var _props = this.props; + var beforeClose = _props.beforeClose; + var onUpdate = _props.onUpdate; var isOpened = this.state.isOpened; diff --git a/lib/components/ui/popout/index.js b/lib/components/ui/popout/index.js index b8c603c3..164eaad8 100644 --- a/lib/components/ui/popout/index.js +++ b/lib/components/ui/popout/index.js @@ -281,13 +281,13 @@ var Popout = function (_React$Component) { var _this2 = this; // Extract Portal props - var _props = this.props, - beforeClose = _props.beforeClose, - onUpdate = _props.onUpdate; + var _props = this.props; + var beforeClose = _props.beforeClose; + var onUpdate = _props.onUpdate; var placement = this.props.placement; - var _state = this.state, - isOpened = _state.isOpened, - position = _state.position; + var _state = this.state; + var isOpened = _state.isOpened; + var position = _state.position; // Extract the reference element // AKA child.first diff --git a/lib/components/ui/popunder/index.js b/lib/components/ui/popunder/index.js index db872bae..d5bba6f1 100644 --- a/lib/components/ui/popunder/index.js +++ b/lib/components/ui/popunder/index.js @@ -232,14 +232,14 @@ var Popunder = function (_React$Component) { var _this2 = this; // Extract Portal props - var _props = this.props, - beforeClose = _props.beforeClose, - className = _props.className, - onUpdate = _props.onUpdate, - containerClassName = _props.containerClassName; - var _state = this.state, - isOpened = _state.isOpened, - position = _state.position; + var _props = this.props; + var beforeClose = _props.beforeClose; + var className = _props.className; + var onUpdate = _props.onUpdate; + var containerClassName = _props.containerClassName; + var _state = this.state; + var isOpened = _state.isOpened; + var position = _state.position; // Extract the reference element // AKA child.first diff --git a/lib/components/ui/radio-button/index.js b/lib/components/ui/radio-button/index.js index cd8d99a0..22db946c 100644 --- a/lib/components/ui/radio-button/index.js +++ b/lib/components/ui/radio-button/index.js @@ -79,12 +79,12 @@ var RadioButton = function (_React$Component) { var _classNames, _this2 = this; - var _props = this.props, - defaultChecked = _props.defaultChecked, - label = _props.label, - name = _props.name, - onChange = _props.onChange, - value = _props.value; + var _props = this.props; + var defaultChecked = _props.defaultChecked; + var label = _props.label; + var name = _props.name; + var onChange = _props.onChange; + var value = _props.value; var labelClassNames = (0, _classnames2.default)(_radioButton2.default.label, (_classNames = {}, _defineProperty(_classNames, '' + _radioButton2.default.error, this.props.error), _defineProperty(_classNames, '' + _radioButton2.default.focus, this.state.focus), _classNames)); diff --git a/lib/components/ui/rich-text-editor/block-toolbar-plugin/block-items/index.js b/lib/components/ui/rich-text-editor/block-toolbar-plugin/block-items/index.js index ebc9665a..d2178ca5 100644 --- a/lib/components/ui/rich-text-editor/block-toolbar-plugin/block-items/index.js +++ b/lib/components/ui/rich-text-editor/block-toolbar-plugin/block-items/index.js @@ -125,9 +125,9 @@ var BlockItems = function (_React$Component) { } return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = BlockItems.__proto__ || Object.getPrototypeOf(BlockItems)).call.apply(_ref, [this].concat(args))), _this), _this.toggleBlockType = function (blockType) { - var _this$props = _this.props, - editorState = _this$props.editorState, - onChange = _this$props.onChange; + var _this$props = _this.props; + var editorState = _this$props.editorState; + var onChange = _this$props.onChange; var editable = _this.props.editableBlockTypes.indexOf(blockType) > -1; if (editable) { diff --git a/lib/components/ui/rich-text-editor/block-toolbar-plugin/blocks/atomic.js b/lib/components/ui/rich-text-editor/block-toolbar-plugin/blocks/atomic.js index cd02bc1d..ba922ce3 100644 --- a/lib/components/ui/rich-text-editor/block-toolbar-plugin/blocks/atomic.js +++ b/lib/components/ui/rich-text-editor/block-toolbar-plugin/blocks/atomic.js @@ -98,9 +98,9 @@ var AtomicBlock = function (_React$Component) { var allowUndo = opts.allowUndo; allowUndo = !!allowUndo; - var _this$props = _this.props, - block = _this$props.block, - blockProps = _this$props.blockProps; + var _this$props = _this.props; + var block = _this$props.block; + var blockProps = _this$props.blockProps; _this.setReadOnly(false); blockProps.remove(block.getKey(), { allowUndo: allowUndo }); @@ -198,8 +198,10 @@ var AtomicBlock = function (_React$Component) { } var isSelected = this.state.isSelected; - var _entity$getData = this.entity.getData(), - label = _entity$getData.label; + var _entity$getData = this.entity.getData(); + + var label = _entity$getData.label; + var containerClassNames = (0, _classnames2.default)(_atomic2.default.container, _defineProperty({}, '' + _atomic2.default.containerSelected, isSelected)); diff --git a/lib/components/ui/rich-text-editor/block-toolbar-plugin/form-items/index.js b/lib/components/ui/rich-text-editor/block-toolbar-plugin/form-items/index.js index 715bafa8..0ff03575 100644 --- a/lib/components/ui/rich-text-editor/block-toolbar-plugin/form-items/index.js +++ b/lib/components/ui/rich-text-editor/block-toolbar-plugin/form-items/index.js @@ -50,10 +50,10 @@ var FormItems = function (_React$Component) { } return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = FormItems.__proto__ || Object.getPrototypeOf(FormItems)).call.apply(_ref, [this].concat(args))), _this), _this.insertAtomicBlock = function (formConfig) { - var _this$props = _this.props, - editorState = _this$props.editorState, - onChange = _this$props.onChange, - closeToolbar = _this$props.closeToolbar; + var _this$props = _this.props; + var editorState = _this$props.editorState; + var onChange = _this$props.onChange; + var closeToolbar = _this$props.closeToolbar; var entityKey = _draftJs.Entity.create('formalist', 'IMMUTABLE', { name: formConfig.name, diff --git a/lib/components/ui/rich-text-editor/block-toolbar-plugin/index.js b/lib/components/ui/rich-text-editor/block-toolbar-plugin/index.js index 1cbdbe1a..bf13153e 100644 --- a/lib/components/ui/rich-text-editor/block-toolbar-plugin/index.js +++ b/lib/components/ui/rich-text-editor/block-toolbar-plugin/index.js @@ -68,13 +68,14 @@ var defaults = { element: 'div' } } +}; - /** - * Reduce grouops and return a list of editable types - * @param {Array} groups - * @return {Array} - */ -};function getEditableBlockTypesFromGroups(groups) { +/** + * Reduce grouops and return a list of editable types + * @param {Array} groups + * @return {Array} + */ +function getEditableBlockTypesFromGroups(groups) { return groups.reduce(function (a, b) { return a.concat(b); }, []).filter(function (item) { @@ -127,13 +128,13 @@ function blockToolbarPlugin() { // Pull out the options options = (0, _mergeDefaults2.default)({}, defaults, options); - var _options = options, - blockFormatters = _options.blockFormatters, - blockRenderMap = _options.blockRenderMap, - blockSet = _options.blockSet, - editorEmitter = _options.editorEmitter, - embeddableForms = _options.embeddableForms, - setReadOnly = _options.setReadOnly; + var _options = options; + var blockFormatters = _options.blockFormatters; + var blockRenderMap = _options.blockRenderMap; + var blockSet = _options.blockSet; + var editorEmitter = _options.editorEmitter; + var embeddableForms = _options.embeddableForms; + var setReadOnly = _options.setReadOnly; // Filter out the un-allowed block-item types @@ -174,8 +175,8 @@ function blockToolbarPlugin() { * @return {Object} A compatible renderer object definition */ blockRendererFn: function blockRendererFn(contentBlock, _ref) { - var getEditorState = _ref.getEditorState, - setEditorState = _ref.setEditorState; + var getEditorState = _ref.getEditorState; + var setEditorState = _ref.setEditorState; var type = contentBlock.getType(); // Pull out the renderer from our `blockSet` object @@ -202,8 +203,8 @@ function blockToolbarPlugin() { * @return {Command} String command based on the keyboard event */ keyBindingFn: function keyBindingFn(e, _ref2) { - var getEditorState = _ref2.getEditorState, - setEditorState = _ref2.setEditorState; + var getEditorState = _ref2.getEditorState; + var setEditorState = _ref2.setEditorState; if (selectedAtomicBlockKey !== null) { // 46 = DELETE, 8 = BACKSPACE diff --git a/lib/components/ui/rich-text-editor/block-toolbar-plugin/toolbar.js b/lib/components/ui/rich-text-editor/block-toolbar-plugin/toolbar.js index dc9fb0bb..cd1a75e3 100644 --- a/lib/components/ui/rich-text-editor/block-toolbar-plugin/toolbar.js +++ b/lib/components/ui/rich-text-editor/block-toolbar-plugin/toolbar.js @@ -131,15 +131,15 @@ var BlockToolbar = function (_Component) { value: function render() { var _this3 = this; - var _props = this.props, - blockItemsGroups = _props.blockItemsGroups, - editableBlockTypes = _props.editableBlockTypes, - editorState = _props.editorState, - embeddableForms = _props.embeddableForms, - onChange = _props.onChange; - var _state = this.state, - open = _state.open, - positionStyle = _state.positionStyle; + var _props = this.props; + var blockItemsGroups = _props.blockItemsGroups; + var editableBlockTypes = _props.editableBlockTypes; + var editorState = _props.editorState; + var embeddableForms = _props.embeddableForms; + var onChange = _props.onChange; + var _state = this.state; + var open = _state.open; + var positionStyle = _state.positionStyle; var currentBlockType = _draftJs.RichUtils.getCurrentBlockType(editorState); diff --git a/lib/components/ui/rich-text-editor/index.js b/lib/components/ui/rich-text-editor/index.js index 2f03db20..b9513c10 100644 --- a/lib/components/ui/rich-text-editor/index.js +++ b/lib/components/ui/rich-text-editor/index.js @@ -95,17 +95,17 @@ var RichTextEditor = function (_React$Component) { someProp: Date.now(), hasFocus: false }, _this.configurePlugins = function () { - var _this$props = _this.props, - blockFormatters = _this$props.blockFormatters, - boxSize = _this$props.boxSize, - config = _this$props.config, - embeddableForms = _this$props.embeddableForms, - inlineFormatters = _this$props.inlineFormatters; + var _this$props = _this.props; + var blockFormatters = _this$props.blockFormatters; + var boxSize = _this$props.boxSize; + var config = _this$props.config; + var embeddableForms = _this$props.embeddableForms; + var inlineFormatters = _this$props.inlineFormatters; // Extract config for each type of toolbar - var block = config.block, - inline = config.inline; + var block = config.block; + var inline = config.inline; var autoListPlugin = (0, _draftJsAutolistPlugin2.default)(); @@ -215,16 +215,16 @@ var RichTextEditor = function (_React$Component) { value: function render() { var _this3 = this; - var _props = this.props, - boxSize = _props.boxSize, - blockFormatters = _props.blockFormatters, - editorState = _props.editorState, - placeholder = _props.placeholder; - var _state = this.state, - hasFocus = _state.hasFocus, - readOnly = _state.readOnly; - var BlockToolbar = this.BlockToolbar, - InlineToolbar = this.InlineToolbar; + var _props = this.props; + var boxSize = _props.boxSize; + var blockFormatters = _props.blockFormatters; + var editorState = _props.editorState; + var placeholder = _props.placeholder; + var _state = this.state; + var hasFocus = _state.hasFocus; + var readOnly = _state.readOnly; + var BlockToolbar = this.BlockToolbar; + var InlineToolbar = this.InlineToolbar; var placeholderBlockType = false; diff --git a/lib/components/ui/rich-text-editor/inline-toolbar-plugin/entities/link.js b/lib/components/ui/rich-text-editor/inline-toolbar-plugin/entities/link.js index 0df0b2c9..e2a4735b 100644 --- a/lib/components/ui/rich-text-editor/inline-toolbar-plugin/entities/link.js +++ b/lib/components/ui/rich-text-editor/inline-toolbar-plugin/entities/link.js @@ -60,8 +60,9 @@ var Link = function (_Component) { _createClass(Link, [{ key: 'render', value: function render() { - var _Entity$get$getData = _draftJs.Entity.get(this.props.entityKey).getData(), - url = _Entity$get$getData.url; + var _Entity$get$getData = _draftJs.Entity.get(this.props.entityKey).getData(); + + var url = _Entity$get$getData.url; return _react2.default.createElement( 'a', @@ -200,12 +201,12 @@ var ActionHandler = function (_Component2) { value: function render() { var _this3 = this; - var _props = this.props, - entityKey = _props.entityKey, - remove = _props.remove; - var _state = this.state, - editing = _state.editing, - id = _state.id; + var _props = this.props; + var entityKey = _props.entityKey; + var remove = _props.remove; + var _state = this.state; + var editing = _state.editing; + var id = _state.id; var entity = _draftJs.Entity.get(entityKey); var entityData = entity.getData(); diff --git a/lib/components/ui/rich-text-editor/inline-toolbar-plugin/index.js b/lib/components/ui/rich-text-editor/inline-toolbar-plugin/index.js index 9933716e..e599fcc2 100644 --- a/lib/components/ui/rich-text-editor/inline-toolbar-plugin/index.js +++ b/lib/components/ui/rich-text-editor/inline-toolbar-plugin/index.js @@ -80,26 +80,27 @@ var defaults = { }, additionalFormatters: [], additionalEntities: [] +}; - /** - * Plugin for the inline toolbar - - * @param {Array} options.allowedFormatters Optional list of inline commands to - * allow. Will default to defaults.allowedFormatters - * - * @return {Object} draft-js-editor-plugin compatible object - */ -};function inlineToolbarPlugin() { +/** + * Plugin for the inline toolbar + + * @param {Array} options.allowedFormatters Optional list of inline commands to + * allow. Will default to defaults.allowedFormatters + * + * @return {Object} draft-js-editor-plugin compatible object + */ +function inlineToolbarPlugin() { var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}; // Pull out the options options = (0, _mergeDefaults2.default)({}, options, defaults); - var _options = options, - allowedFormatters = _options.allowedFormatters, - allowedEntities = _options.allowedEntities, - additionalFormatters = _options.additionalFormatters, - additionalEntities = _options.additionalEntities, - customStyleMap = _options.customStyleMap; + var _options = options; + var allowedFormatters = _options.allowedFormatters; + var allowedEntities = _options.allowedEntities; + var additionalFormatters = _options.additionalFormatters; + var additionalEntities = _options.additionalEntities; + var customStyleMap = _options.customStyleMap; // FIXME // At the moment this means we override _all_ allowed formatters options here diff --git a/lib/components/ui/rich-text-editor/inline-toolbar-plugin/items/index.js b/lib/components/ui/rich-text-editor/inline-toolbar-plugin/items/index.js index 973aa600..dd971871 100644 --- a/lib/components/ui/rich-text-editor/inline-toolbar-plugin/items/index.js +++ b/lib/components/ui/rich-text-editor/inline-toolbar-plugin/items/index.js @@ -55,18 +55,18 @@ var InlineToolbarItems = function (_Component) { _createClass(InlineToolbarItems, [{ key: 'toggleFormat', value: function toggleFormat(style) { - var _props = this.props, - editorState = _props.editorState, - onChange = _props.onChange; + var _props = this.props; + var editorState = _props.editorState; + var onChange = _props.onChange; onChange(_draftJs.RichUtils.toggleInlineStyle(editorState, style)); } }, { key: 'toggleEntity', value: function toggleEntity(entity, active) { - var _props2 = this.props, - editorState = _props2.editorState, - onChange = _props2.onChange; + var _props2 = this.props; + var editorState = _props2.editorState; + var onChange = _props2.onChange; if (active) { var selection = editorState.getSelection(); @@ -140,9 +140,9 @@ var InlineToolbarItems = function (_Component) { }, { key: 'render', value: function render() { - var _props3 = this.props, - formatters = _props3.formatters, - entities = _props3.entities; + var _props3 = this.props; + var formatters = _props3.formatters; + var entities = _props3.entities; return _react2.default.createElement( 'div', diff --git a/lib/components/ui/rich-text-editor/inline-toolbar-plugin/toolbar.js b/lib/components/ui/rich-text-editor/inline-toolbar-plugin/toolbar.js index d580bb6a..b0c39f55 100644 --- a/lib/components/ui/rich-text-editor/inline-toolbar-plugin/toolbar.js +++ b/lib/components/ui/rich-text-editor/inline-toolbar-plugin/toolbar.js @@ -74,9 +74,9 @@ var Toolbar = function (_React$Component) { forceVisible: force }); }, _this.removeEntity = function (entityKey) { - var _this$props = _this.props, - editorState = _this$props.editorState, - onChange = _this$props.onChange; + var _this$props = _this.props; + var editorState = _this$props.editorState; + var onChange = _this$props.onChange; var selection = editorState.getSelection(); onChange(_draftJs.RichUtils.toggleLink(editorState, selection, null)); @@ -116,8 +116,8 @@ var Toolbar = function (_React$Component) { value: function componentWillReceiveProps(nextProps) { var _this2 = this; - var editorState = nextProps.editorState, - editorHasFocus = nextProps.editorHasFocus; + var editorState = nextProps.editorState; + var editorHasFocus = nextProps.editorHasFocus; var forceVisible = this.state.forceVisible; var selection = editorState.getSelection(); @@ -151,15 +151,15 @@ var Toolbar = function (_React$Component) { value: function render() { var _this3 = this; - var _props = this.props, - editorState = _props.editorState, - formatters = _props.formatters, - entities = _props.entities, - onChange = _props.onChange; - var _state = this.state, - visible = _state.visible, - forceVisible = _state.forceVisible, - positionStyle = _state.positionStyle; + var _props = this.props; + var editorState = _props.editorState; + var formatters = _props.formatters; + var entities = _props.entities; + var onChange = _props.onChange; + var _state = this.state; + var visible = _state.visible; + var forceVisible = _state.forceVisible; + var positionStyle = _state.positionStyle; var SelectedEntityHandler = null; var selectedEntity = void 0; @@ -168,15 +168,18 @@ var Toolbar = function (_React$Component) { // and pull out any handlers we have available var selectedEntityKey = (0, _utils.getSelectedEntityKey)(editorState); if (selectedEntityKey) { - selectedEntity = _draftJs.Entity.get(selectedEntityKey); - var selectedEntityType = selectedEntity.getType(); + (function () { + selectedEntity = _draftJs.Entity.get(selectedEntityKey); + var selectedEntityType = selectedEntity.getType(); - var _entities$find = entities.find(function (entity) { - return entity.type.toLowerCase() === selectedEntityType.toLowerCase(); - }), - handler = _entities$find.handler; + var _entities$find = entities.find(function (entity) { + return entity.type.toLowerCase() === selectedEntityType.toLowerCase(); + }); + + var handler = _entities$find.handler; - SelectedEntityHandler = handler; + SelectedEntityHandler = handler; + })(); } // Only display if we have some `formatters` configured diff --git a/lib/components/ui/search-selector/index.js b/lib/components/ui/search-selector/index.js index e12769dc..c495875e 100644 --- a/lib/components/ui/search-selector/index.js +++ b/lib/components/ui/search-selector/index.js @@ -80,9 +80,10 @@ var SearchSelector = function (_Component) { loading: false, results: [], pagination: {} + }; - // Bindings - };_this.doSearch = (0, _lodash2.default)(_this.doSearch.bind(_this), 250); + // Bindings + _this.doSearch = (0, _lodash2.default)(_this.doSearch.bind(_this), 250); _this.onSearchChange = _this.onSearchChange.bind(_this); _this.onSearchSuccess = _this.onSearchSuccess.bind(_this); _this.onSearchBlur = _this.onSearchBlur.bind(_this); @@ -94,9 +95,9 @@ var SearchSelector = function (_Component) { _createClass(SearchSelector, [{ key: 'componentWillMount', value: function componentWillMount() { - var _props = this.props, - threshold = _props.threshold, - query = _props.query; + var _props = this.props; + var threshold = _props.threshold; + var query = _props.query; // Do a search for nothing on load if threshold is 0 if (query && query.length >= threshold || threshold === 0) { @@ -111,11 +112,11 @@ var SearchSelector = function (_Component) { }, { key: 'doSearch', value: function doSearch(query) { - var _props2 = this.props, - params = _props2.params, - perPage = _props2.perPage, - threshold = _props2.threshold, - url = _props2.url; + var _props2 = this.props; + var params = _props2.params; + var perPage = _props2.perPage; + var threshold = _props2.threshold; + var url = _props2.url; this.query = query != null ? query : this.query; // Abort any existing requests @@ -196,15 +197,15 @@ var SearchSelector = function (_Component) { value: function render() { var _this2 = this; - var _props3 = this.props, - onSelection = _props3.onSelection, - optionComponent = _props3.optionComponent, - selectedIds = _props3.selectedIds; - var _state = this.state, - hasSearched = _state.hasSearched, - loading = _state.loading, - results = _state.results, - pagination = _state.pagination; + var _props3 = this.props; + var onSelection = _props3.onSelection; + var optionComponent = _props3.optionComponent; + var selectedIds = _props3.selectedIds; + var _state = this.state; + var hasSearched = _state.hasSearched; + var loading = _state.loading; + var results = _state.results; + var pagination = _state.pagination; // Has query? @@ -282,12 +283,13 @@ SearchSelector.defaultProps = { selectedIds: [], perPage: 20, threshold: 1 +}; - /** - * PropTypes - * @type {Object} - */ -};SearchSelector.propTypes = { +/** + * PropTypes + * @type {Object} + */ +SearchSelector.propTypes = { onBlur: _propTypes2.default.func, onFocus: _propTypes2.default.func, onQueryChange: _propTypes2.default.func, @@ -299,11 +301,12 @@ SearchSelector.defaultProps = { query: _propTypes2.default.string, threshold: _propTypes2.default.number, url: _propTypes2.default.string.isRequired +}; - /** - * Default Option Component for the search selector - */ -};function OptionComponent(_ref) { +/** + * Default Option Component for the search selector + */ +function OptionComponent(_ref) { var option = _ref.option; return _react2.default.createElement( diff --git a/lib/components/ui/search-selector/pagination/index.js b/lib/components/ui/search-selector/pagination/index.js index d16d4c9b..2922a723 100644 --- a/lib/components/ui/search-selector/pagination/index.js +++ b/lib/components/ui/search-selector/pagination/index.js @@ -38,10 +38,10 @@ var Pagination = function (_Component) { _createClass(Pagination, [{ key: 'nextPage', value: function nextPage() { - var _props = this.props, - currentPage = _props.currentPage, - goToPage = _props.goToPage, - totalPages = _props.totalPages; + var _props = this.props; + var currentPage = _props.currentPage; + var goToPage = _props.goToPage; + var totalPages = _props.totalPages; if (currentPage < totalPages) { goToPage(currentPage + 1); @@ -50,9 +50,9 @@ var Pagination = function (_Component) { }, { key: 'prevPage', value: function prevPage() { - var _props2 = this.props, - currentPage = _props2.currentPage, - goToPage = _props2.goToPage; + var _props2 = this.props; + var currentPage = _props2.currentPage; + var goToPage = _props2.goToPage; if (currentPage > 1) { goToPage(currentPage - 1); @@ -88,10 +88,10 @@ var Pagination = function (_Component) { value: function render() { var _this2 = this; - var _props3 = this.props, - currentPage = _props3.currentPage, - goToPage = _props3.goToPage, - totalPages = _props3.totalPages; + var _props3 = this.props; + var currentPage = _props3.currentPage; + var goToPage = _props3.goToPage; + var totalPages = _props3.totalPages; var jumpSelect = this.renderJumpSelect(currentPage, totalPages, goToPage); diff --git a/lib/components/ui/select/index.js b/lib/components/ui/select/index.js index 416e0ed4..5862ba43 100644 --- a/lib/components/ui/select/index.js +++ b/lib/components/ui/select/index.js @@ -81,14 +81,14 @@ var Select = function (_React$Component) { value: function render() { var _classNames, _classNames2; - var _props = this.props, - children = _props.children, - className = _props.className, - clearable = _props.clearable, - defaultValue = _props.defaultValue, - error = _props.error, - placeholder = _props.placeholder, - size = _props.size; + var _props = this.props; + var children = _props.children; + var className = _props.className; + var clearable = _props.clearable; + var defaultValue = _props.defaultValue; + var error = _props.error; + var placeholder = _props.placeholder; + var size = _props.size; var focus = this.state.focus; diff --git a/lib/components/ui/sortable/index.js b/lib/components/ui/sortable/index.js index bfe5d17e..b085cd30 100644 --- a/lib/components/ui/sortable/index.js +++ b/lib/components/ui/sortable/index.js @@ -142,14 +142,14 @@ var Sortable = function (_React$Component) { value: function render() { var _this2 = this; - var _state = this.state, - instanceKey = _state.instanceKey, - items = _state.items; - var _props = this.props, - canRemove = _props.canRemove, - onRemove = _props.onRemove, - verticalControls = _props.verticalControls, - canSort = _props.canSort; + var _state = this.state; + var instanceKey = _state.instanceKey; + var items = _state.items; + var _props = this.props; + var canRemove = _props.canRemove; + var onRemove = _props.onRemove; + var verticalControls = _props.verticalControls; + var canSort = _props.canSort; var isSortable = !(canSort === false || items.length <= 1); diff --git a/lib/components/ui/sortable/item.js b/lib/components/ui/sortable/item.js index 454df072..647d28f4 100644 --- a/lib/components/ui/sortable/item.js +++ b/lib/components/ui/sortable/item.js @@ -125,9 +125,9 @@ var Item = function (_React$Component) { return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Item.__proto__ || Object.getPrototypeOf(Item)).call.apply(_ref, [this].concat(args))), _this), _this.onRemoveClick = function (e) { e.preventDefault(); - var _this$props = _this.props, - canRemove = _this$props.canRemove, - onRemove = _this$props.onRemove; + var _this$props = _this.props; + var canRemove = _this$props.canRemove; + var onRemove = _this$props.onRemove; if (canRemove && onRemove) { onRemove(_this.props.index, e); @@ -152,15 +152,15 @@ var Item = function (_React$Component) { _createClass(Item, [{ key: 'render', value: function render() { - var _props = this.props, - canSort = _props.canSort, - canRemove = _props.canRemove, - children = _props.children, - connectDragPreview = _props.connectDragPreview, - connectDragSource = _props.connectDragSource, - connectDropTarget = _props.connectDropTarget, - isDragging = _props.isDragging, - verticalControls = _props.verticalControls; + var _props = this.props; + var canSort = _props.canSort; + var canRemove = _props.canRemove; + var children = _props.children; + var connectDragPreview = _props.connectDragPreview; + var connectDragSource = _props.connectDragSource; + var connectDropTarget = _props.connectDropTarget; + var isDragging = _props.isDragging; + var verticalControls = _props.verticalControls; var inline = { opacity: isDragging ? 0 : 1 diff --git a/lib/components/ui/time-picker/index.js b/lib/components/ui/time-picker/index.js index a4a3ce1d..5c3abdb0 100644 --- a/lib/components/ui/time-picker/index.js +++ b/lib/components/ui/time-picker/index.js @@ -4,6 +4,8 @@ Object.defineProperty(exports, "__esModule", { value: true }); +var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; + var _createClass = function () { 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); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); var _classnames = require('classnames'); @@ -102,29 +104,35 @@ var TimePicker = function (_React$Component) { _this.renderTimeItem = function (date, items, end, active) { if (end.diff(date) > 0) { - // Check if active. We only care about hours/minutes - var isActive = active && active.hours() === date.hours() && active.minutes() === date.minutes(); - var buttonClassNames = (0, _classnames2.default)(_timePicker2.default.button, _defineProperty({}, '' + _timePicker2.default.buttonActive, isActive)); - - var onClick = _this.onTimeClick.bind(_this, date.clone()); - var item = _react2.default.createElement( - 'li', - { key: date.format(), className: _timePicker2.default.item }, - _react2.default.createElement( - 'button', - { - ref: function ref(r) { - _this._buttonActive = isActive ? r : null; + var _ret = function () { + // Check if active. We only care about hours/minutes + var isActive = active && active.hours() === date.hours() && active.minutes() === date.minutes(); + var buttonClassNames = (0, _classnames2.default)(_timePicker2.default.button, _defineProperty({}, '' + _timePicker2.default.buttonActive, isActive)); + + var onClick = _this.onTimeClick.bind(_this, date.clone()); + var item = _react2.default.createElement( + 'li', + { key: date.format(), className: _timePicker2.default.item }, + _react2.default.createElement( + 'button', + { + ref: function ref(r) { + _this._buttonActive = isActive ? r : null; + }, + className: buttonClassNames, + onClick: onClick }, - className: buttonClassNames, - onClick: onClick - }, - date.format(dateFormats.humanTime) - ) - ); - items.push(item); - date = date.add(15, 'minutes'); - return _this.renderTimeItem(date, items, end, active); + date.format(dateFormats.humanTime) + ) + ); + items.push(item); + date = date.add(15, 'minutes'); + return { + v: _this.renderTimeItem(date, items, end, active) + }; + }(); + + if ((typeof _ret === 'undefined' ? 'undefined' : _typeof(_ret)) === "object") return _ret.v; } else { return items; } @@ -185,9 +193,9 @@ var TimePicker = function (_React$Component) { value: function render() { var _this2 = this; - var _props = this.props, - error = _props.error, - placeholder = _props.placeholder; + var _props = this.props; + var error = _props.error; + var placeholder = _props.placeholder; var inputValue = this.state.inputValue; From dd5b85199cfa564914158340c1afa4242f38c200 Mon Sep 17 00:00:00 2001 From: Daniel Nitsikopoulos Date: Sun, 3 Jun 2018 18:53:46 +1000 Subject: [PATCH 3/3] Style disabled text field Wanted to do `composes: greyMidColor normal sans from styles;`, but mcss is le confusing --- src/components/fields/text-field/text-field.mcss | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/components/fields/text-field/text-field.mcss b/src/components/fields/text-field/text-field.mcss index fcf34eb8..23892ddb 100644 --- a/src/components/fields/text-field/text-field.mcss +++ b/src/components/fields/text-field/text-field.mcss @@ -10,3 +10,8 @@ .code { composes: mono from styles; } + +:disabled { + cursor: default; + color: #aaa; +}