NoamELB

@import "../../../../SASS/lib/core";
@import "../../Cards/Card/mixins";

.tabs {
  padding: 0;
  border: $constants-border;
  border-radius: 8px;

  .tabs_header {
    display: flex;

NoamELB

updateHeight(isOpen) {
  if (isOpen) {
    this.containerEl.style.height = `${this.contentEl.scrollHeight}px`;
  } else {
    this.containerEl.style.height = '0px';
  }
}

NoamELB

export default class UnleashedOne extends React.Component {
  constructor(props) {
    super(props);
    this.onChange = this.onChange.bind(this);
  }
  onChange(e) {
    this.props.onChange(e.target.value);
  }
  render () {
    return (

NoamELB

export default class LeashedOne extends React.Component {
  constructor(props) {
    super(props);
    this.onChange = this.onChange.bind(this);
    this.onChangeDebounce = _.debounce(value => this.props.onChange(value), 300);
  }
  onChange(e) {
    this.onChangeDebounce(e.target.value);
  }
  render () {

NoamELB

class ShouldNotUpdate extends React.Component {
  constructor(props) {
    super(props);
    this.counter = 0;
  }
  
  shouldComponentUpdate(nextProps, nextState) {
    return this.props.children !== nextProps.children;    
  }
  

NoamELB

class ShouldNotUpdate extends React.PureComponent {
  constructor(props) {
    super(props);
    this.counter = 0;
  }
  
  render() {
    return `I should be rendered only 1 time. actual times rendered: ${++this.counter}`;
  }
}

NoamELB

updateHeight(isOpen) {
  this.lastRAF && cancelAnimationFrame(this.lastRAF);
  if (isOpen) {
    this.lastRAF = requestAnimationFrame(() => {
      // read:
      const height =`${this.contentEl.scrollHeight}px`;
      this.lastRAF = requestAnimationFrame(() => {
        // write in a different frame:
        this.containerEl.style.height = height;
        this.lastRAF = null;

NoamELB

<Tabs>
  <Tab value="banana" header="Banana Header">Banana</Tab>
  <Tab value="apple" header="Apple Header">Apple</Tab>
</Tabs>

NoamELB

  getHeader(tabs) {
    return tabs.map((tab, i) => {
      const style = this.isSelected(tab) ? activeTabHeaderStyle : tabHeaderStyle;
      return (
        <span
          key={tab.props.value}
          onClick={e => this.selectTab(e, tab.props.value)}
          style={i === 0 ? style : Object.assign({}, style, sideHeaderStyle)}
        >
          {tab.props.header}

NoamELB

  isSelected(tab) {
    return tab.props.value === this.state.value;
  }