JavaScript substyle defaultStyle Examples

Example #1

File: Suggestion.js Project: klacointe/react-mentions

    return display;
  }

  renderHighlightedDisplay(display) {
    const { query, style } = this.props;

    let i = display.toLowerCase().indexOf(query.toLowerCase());

    if(i === -1) {
      return <span { ...style("display") }>{ display }</span>;
    }

    return (
      <span { ...style("display") }>
        { display.substring(0, i) }
        <b { ...style("highlight") }>
          { display.substring(i, i+query.length) }
        </b>
        { display.substring(i+query.length) }
      </span>
    );
  }

}

const styled = defaultStyle({
  cursor: "pointer"
}, (props) => ({ "&focused": props.focused }))

export default styled(Suggestion);

Example #2

File: SuggestionsOverlay.js Project: cvent/react-mentions

    return <LoadingIndicator { ...substyle(this.props, "loadingIndicator") } />
  }

  handleMouseEnter(index, ev) {
    if(this.props.onMouseEnter) {
      this.props.onMouseEnter(index);
    }
  }

  select(suggestion, descriptor) {
    this.props.onSelect(suggestion, descriptor);
  }

};

export default Radium(SuggestionsOverlay);

const substyle = defaultStyle({
  position: "absolute",
  zIndex: 1,
  backgroundColor: "white",
  marginTop: 14,
  minWidth: 100,

  list: {
    margin: 0,
    padding: 0,
    listStyleType: "none",
  }
});

Example #3

File: MentionsInput.js Project: cvent/react-mentions

const substyle = defaultStyle({
  position: "relative",
  overflowY: "visible",

  input: {
    display: "block",
    position: "absolute",

    top: 0,

    boxSizing: "border-box",

    backgroundColor: "transparent",

    width: "inherit",
  },

  '&multiLine': {
    input: {
      width: "100%",
      height: "100%",
      bottom: 0,
      overflow: "hidden",
      resize: "none",

      // fix weird textarea padding in mobile Safari (see: http://stackoverflow.com/questions/6890149/remove-3-pixels-in-ios-webkit-textarea)
      ...(isMobileSafari ? {
        marginTop: 1,
        marginLeft: -3,
      } : null)
    }
  }
});

Example #4

File: Highlighter.js Project: jpstrikesback/react-mentions

      <span { ...this.props.style("caret") } ref="caret" key="caret">
        { children }
      </span>
    );
  }
}

const styled = defaultStyle({
  position: 'relative',
  width: 'inherit',
  color: 'transparent',
  margin: 0,
  overflow: 'hidden',

  whiteSpace: 'pre-wrap',
  wordWrap: 'break-word',

  '&singleLine': {
    whiteSpace: 'pre',
    wordWrap: null
  },

  substring: {
    visibility: 'hidden'
  }
}, (props) => ({
  '&singleLine': props.singleLine,
}));

export default styled(Highlighter);

Example #5

File: SuggestionsOverlay.js Project: jpstrikesback/react-mentions

  handleMouseEnter(index, ev) {
    if(this.props.onMouseEnter) {
      this.props.onMouseEnter(index);
    }
  }

  select(suggestion, descriptor) {
    this.props.onSelect(suggestion, descriptor);
  }

}

const styled = defaultStyle(({ position }) => ({
  position: "absolute",
  zIndex: 99,
  backgroundColor: "white",
  marginTop: 14,
  minWidth: 100,
  ...position,

  list: {
    margin: 0,
    padding: 0,
    listStyleType: "none",
  }
}));

export default styled(SuggestionsOverlay);

Example #6

File: Suggestion.js Project: effektif/react-mentions

    return display
  }

  renderHighlightedDisplay(display) {
    const { query, style } = this.props

    let i = display.toLowerCase().indexOf(query.toLowerCase())

    if (i === -1) {
      return <span {...style('display')}>{display}</span>
    }

    return (
      <span {...style('display')}>
        {display.substring(0, i)}
        <b {...style('highlight')}>{display.substring(i, i + query.length)}</b>
        {display.substring(i + query.length)}
      </span>
    )
  }
}

const styled = defaultStyle(
  {
    cursor: 'pointer',
  },
  props => ({ '&focused': props.focused })
)

export default styled(Suggestion)