Ability to have nulls/blanks

[chathuraa]

There are instances that the value should be a null with a place holder. I cant seems to find a way to do this. Any help will be greatly appreciated.

Thanks,
Chat.

[benjaminwy]

I was running into this issue too. Making blank inputs work is simple enough if you do two things:

First, ensure you pass a blank string in as the value and not null:

<RIEInput
  value={this.state.text || ''}
  className='display'
  change={this.handleChange}
  propName='title' />

Then style the <span> that holds the normal (non-editing state) text to give it some clickable height and width. Something like this:

span.display {
    display: block;
    width: 100%;
    min-height: 32px;
}

As for displaying placeholder text, that'll be a little trickier. I went ahead and built a little component that does the trick:

import React from 'react';
import ReactDOM from 'react-dom';
import { RIEInput as RIEStatefulBase } from 'riek';

export default class EditableInput extends RIEStatefulBase {
    keyDown = (event) => {
        if (event.keyCode === 13) { this.finishEditing() }          // Enter
        else if (event.keyCode === 27) { this.cancelEditing() }     // Escape
    };

    finishEditing = () => {
        if (this.props.beforeFinish) this.props.beforeFinish();
        let newValue = ReactDOM.findDOMNode(this.refs.input).value;
        const result = this.doValidations(newValue);
        if(result && this.props.value !== newValue) {
            this.commit(newValue);
        }
        if(!result && this.props.handleValidationFail) {
            this.props.handleValidationFail(result, newValue, () => this.cancelEditing());
        } else {
            this.cancelEditing();
        }
        if (this.props.afterFinish) this.props.afterFinish();

        // Make sure the cursor doesn't remain blinking inside the element after you're done editing
        ReactDOM.findDOMNode(this.refs.input).blur();
    };

    renderNormalComponent = () => {
        return <input
            type="text"
            placeholder={this.props.editProps.placeholder}
            defaultValue={this.state.newValue || this.props.value}
            tabIndex="0"
            className={this.makeClassString()}
            onFocus={this.startEditing}
            onClick={this.startEditing}
            {...this.props.defaultProps} />;
    };
}

This is how I call it:

<EditableInput
    value={this.state.title || ''}
    propName="title"
    change={this.handleChange}
    className="display"
    classEditing="editing"
    classLoading="loading"
    classInvalid="invalid"
    editProps={{
        autoComplete: 'off',
        placeholder: 'This is a placeholder'
    }}
/>

And my styles:

.display, .editing, .loading {
    width: 100%;
    display: block;
    font-size: 36px;
    height: auto;
    line-height: normal;
    margin: 0;
    box-shadow: none;
    border-radius: 0;
    border: 0;
    border-bottom: 2px solid;
    outline: 0;
}

.display {
    cursor: pointer;
    border-bottom-color: transparent;
    background-color: transparent;
    padding: 15px 0;
}

.editing, .loading, .invalid {
    cursor: text;
    background-color: #fff;
    border-bottom-color: #dedede;
    padding: 15px;
}

.editing:focus, .loading:focus, .invalid:focus, .display:focus {
    outline: 0;
}

.loading {
    cursor: default;
    opacity: 0.5;
}

.invalid {
    border-bottom-color: #cd0000;
}