Skip to content

Instantly share code, notes, and snippets.

@petrjasek

petrjasek/alert.ts

Created March 10, 2020 13:01
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save petrjasek/0512a7ad54e2173d6af016810f721832 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save petrjasek/0512a7ad54e2173d6af016810f721832 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. petrjasek created this gist Mar 10, 2020.
    76 changes: 76 additions & 0 deletions alert.ts
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,76 @@
    export class Alert extends React.PureComponent<IProps, IState> {
    constructor(props: IProps) {
    super(props);
    this.state = {
    open: true,
    };
    this.onToggle = this.onToggle.bind(this);
    }

    onToggle() {
    this.setState((state) => ({
    open: !state.open,
    }));
    }

    render() {
    let classesAlert = classNames('sd-alert', {
    'sd-alert--hollow': this.props.style === 'hollow',
    'sd-alert--small': this.props.size === 'small',
    [`sd-alert--${this.props.type}`]: this.props.type,
    'sd-alert--hidden': !this.state.open,
    });
    let classesInfoBtn = classNames('sd-alert__info-btn sd-shadow--z2', {
    [`sd-alert__info-btn--${this.props.type}`]: this.props.type,
    'sd-alert__info-btn--hidden': this.state.open,
    });

    return (
    <div className='sd-alert__container'>
    <div className={classesAlert}>
    {this.props.restoreIcon ?
    <button className='sd-alert__close' onClick={this.onToggle} ></button> : null}
    {this.props.children}
    </div>
    {this.props.restoreIcon ?
    <span className={classesInfoBtn} onClick={this.onToggle}>
    <i className={this.props.restoreIcon === 'help' ? 'icon-help-large' : 'icon-info-large'}></i>
    </span> : null
    }
    </div>
    );
    }
    }

    // vs

    export function Alert () {
    const [open, setOpen] = useState(true);
    const toggle = () => setOpen(!open);

    let classesAlert = classNames('sd-alert', {
    'sd-alert--hollow': this.props.style === 'hollow',
    'sd-alert--small': this.props.size === 'small',
    [`sd-alert--${this.props.type}`]: this.props.type,
    'sd-alert--hidden': !open,
    });
    let classesInfoBtn = classNames('sd-alert__info-btn sd-shadow--z2', {
    [`sd-alert__info-btn--${this.props.type}`]: this.props.type,
    'sd-alert__info-btn--hidden': open,
    });

    return (
    <div className='sd-alert__container'>
    <div className={classesAlert}>
    {this.props.restoreIcon ?
    <button className='sd-alert__close' onClick={toggle} ></button> : null}
    {this.props.children}
    </div>
    {this.props.restoreIcon ?
    <span className={classesInfoBtn} onClick={toggle}>
    <i className={this.props.restoreIcon === 'help' ? 'icon-help-large' : 'icon-info-large'}></i>
    </span> : null
    }
    </div>
    );
    }