@material-ui/core#isWidthUp TypeScript Examples

render() {
    const controls = postSearchToLabels(this.props.config, this.props.explorer, this.props.search);
    const isSearchable = isFilterControllable(this.props.explorer, PostFilterType.Search);
    return (
      <InViewObserver ref={this.inViewObserverRef} disabled={!this.props.settings.demoSearchAnimate}>
        <div className={`${this.props.classes.container} ${this.props.className || ''}`} style={this.props.style}>
          <SelectionPicker
            value={controls.values}
            menuIsOpen={!!this.state.menuIsOpen}
            menuOnChange={open => this.setState({ menuIsOpen: open })}
            inputValue={this.state.searchValue || ''}
            onInputChange={(newValue, reason) => {
              this.setState({ searchValue: newValue });
              if (isSearchable) {
                this.updateSearchText(newValue);
              }
            }}
            placeholder={this.props.placeholder || 'Search'}
            options={controls.options}
            isMulti
            group
            isInExplorer
            width={100}
            autocompleteClasses={{
              inputRoot: this.props.showInitialBorder ? undefined : this.props.classes.inputRootHideBorder,
            }}
            showTags={false}
            disableFilter
            disableCloseOnSelect
            disableClearOnValueChange
            onValueChange={labels => {
              const partialSearch = postLabelsToSearch(labels.map(l => l.value));
              this.props.onSearchChanged(partialSearch);
            }}
            formatHeader={inputValue => !!inputValue ? `Searching for "${inputValue}"` : `Type to search`}
            dropdownIcon={FilterIcon}
            popupColumnCount={minmax(
              1,
              controls.groups,
              !this.props.width || isWidthUp('sm', this.props.width, true) ? 3 : 2)}
            PopperProps={{ placement: 'bottom-end' }}
          />
        </div>
      </InViewObserver>
    );
  }

render() {
    const isHorizontal = this.props.alwaysWrap ? false : (!this.props.width || !this.props.wrapBelow || isWidthUp(this.props.wrapBelow, this.props.width));
    const padLeftSize = isHorizontal && this.props.padLeft || 0;
    const padRightSize = isHorizontal && this.props.padRight || 0;
    const childrenSize = React.Children.count(this.props.children)
    const contentsSize = childrenSize + padLeftSize + padRightSize;
    const childrenMapper: (mapper: (content: React.ReactNode, index: number) => React.ReactNode) => React.ReactNode = (mapper) => {
      return (
        <>
          {isHorizontal ? [...Array(padLeftSize)].map((c, i) => mapper((<div />), i)) : null}
          {React.Children.map(this.props.children, (c, i) => mapper(c, (isHorizontal ? padLeftSize : 0) + i))}
          {isHorizontal ? [...Array(padRightSize)].map((c, i) => mapper((<div />), padLeftSize + childrenSize + i)) : undefined}
        </>
      );
    }

    const staggerHeight = Math.abs(this.props.staggerHeight || 0);
    const staggerAsc = (this.props.staggerHeight || 0) < 0;
    const childrenCount = React.Children.count(this.props.children);
    return (
      <Container
        className={this.props.classes.container}
        maxWidth={this.props.maxWidth}
        style={{
          flexDirection: isHorizontal ? 'row' : (staggerAsc ? 'column-reverse' : 'column'),
        }}
      >
        {childrenMapper((content, index) => {
          if (!content) return null;
          var leftPads = index;
          var rightPads = contentsSize - index - 1;
          return (
            <div
              key={content?.['key'] || index}
              className={this.props.classes.content}
              style={isHorizontal ? {
                marginTop: staggerAsc
                  ? (childrenCount - index - 1) * staggerHeight
                  : index * staggerHeight
              } : undefined}
            >
              {[...Array(leftPads)].map((u, i) => (<div key={`left-${i}`} />))}
              <Container maxWidth={this.props.maxContentWidth} style={{
                margin: 'unset',
              }}>
                {content}
              </Container>
              {[...Array(rightPads)].map((u, i) => (<div key={`right-${i}`} />))}
            </div>
          )
        }) || {}}
      </Container>
    );
  }

render() {
    const expandDirectionHorizontal = !this.props.isDashboard && (!this.props.width || isWidthUp('sm', this.props.width, true));

    const labelContainer = (
      <Collapse in={this.props.similarShown}>
        <div className={this.props.classes.similarLabel}>
          {this.props.similarLabel}
        </div>
      </Collapse>
    );
    const createVisible = !!this.props.createVisible && (
      <div className={this.props.classes.createVisible} style={{
        minWidth: this.props.createSize,
        width: this.props.createSize,
      }}>
        {this.props.createVisible}
      </div>
    );
    const createCollapsible = !!this.props.createCollapsible && (
      <div
        className={this.props.classes.createCollapsible}
        style={{
          width: this.props.createShown ? this.props.createSize : '0px',
          maxWidth: this.props.createShown ? this.props.createSize : '0px',
        }}
      >
        <Collapse
          in={this.props.createShown || false}
          mountOnEnter
          unmountOnExit
          onEntered={() => this.setState({ hasExpanded: true })}
          onExited={() => this.setState({ hasExpanded: false })}
          timeout={this.props.theme.explorerExpandTimeout}
          style={{
            minWidth: '120px',
          }}
        >
          <div className={classNames(!expandDirectionHorizontal && this.props.classes.createCollapsibleVertical)}>
            {this.props.createCollapsible}
          </div>
          {!expandDirectionHorizontal && this.props.similarLabel && labelContainer}
        </Collapse>
      </div>
    );

    const search = !!this.props.search && (
      <Collapse in={!this.props.similarShown}>
        <div className={this.props.classes.searchContainer}>
          <div className={this.props.classes.search}>
            {this.props.search}
          </div>
        </div>
      </Collapse>
    );

    var results = this.props.content;

    if (!!this.props.search || !!this.props.createVisible) {
      results = (
        <DividerCorner
          isExplorer
          width={!this.props.createVisible
            ? 0
            : (this.props.createShown
              ? (this.props.similarShown ? 80 : 50)
              : (this.props.createSize || 0))}
          height={(!this.props.createVisible || !!this.props.isDashboard)
            ? 0
            : (this.props.createShown ? 180 : 50)}
          widthRight={this.props.searchSize !== undefined
            ? (this.props.similarShown
              ? 0
              : this.props.searchSize)
            : undefined}
          heightRight={!!this.props.isDashboard
            ? 0
            : (!!this.props.search
              ? (this.props.similarShown ? 0 : 50)
              : undefined)}
          header={!!expandDirectionHorizontal ? undefined : (
            <>
              {createVisible}
              {createCollapsible}
            </>
          )}
          headerRight={!!expandDirectionHorizontal ? undefined : search}
          grow={this.props.isDashboard ? 'left' : 'center'}
          margins={this.props.theme.spacing(4)}
        >
          {results}
        </DividerCorner >
      );
    }
    return (
      <div className={classNames(this.props.classes.explorer, this.props.className, !!this.props.isDashboard && this.props.classes.dashboard)}>
        <div className={this.props.classes.top}>
          {!!expandDirectionHorizontal && createVisible}
          {expandDirectionHorizontal && this.props.similarLabel && labelContainer}
          <div className={this.props.classes.flexGrow} />
          {!!expandDirectionHorizontal && search}
        </div>
        {!!expandDirectionHorizontal && createCollapsible}
        <div className={this.props.classes.results}>
          {results}
        </div>
      </div>
    );
  }

render() {
    const isLarge = !!this.props.isDashboard;
    const createShown = !!this.state.createOpen
      || (!this.props.settings.demoDisableExplorerExpanded
        && !this.props.isDashboard
        && this.props.width && isWidthUp('md', this.props.width));
    const similarShown = createShown && !!this.state.searchSimilar;

    const search = this.props.explorer.allowSearch && (
      <PanelSearch
        className={this.props.classes.panelSearch}
        server={this.props.server}
        search={this.state.search}
        onSearchChanged={search => this.setState({ search: search })}
        explorer={this.props.explorer}
        showInitialBorder={!!this.props.isDashboard}
      />
    );
    const similarLabel = (
      <Typography variant='overline' className={this.props.classes.caption}>
        Similar
      </Typography>
    );
    var content;
    if (similarShown) {
      const searchOverride = this.state.searchSimilar ? { searchText: this.state.searchSimilar } : undefined;
      content = (
        <div className={this.props.classes.content}>
          <PanelPost
            direction={Direction.Vertical}
            panel={this.props.explorer}
            searchOverride={searchOverride}
            widthExpand
            server={this.props.server}
            onClickPost={this.props.onClickPost}
            onUserClick={this.props.onUserClick}
            suppressPanel
            displayDefaults={{
              titleTruncateLines: 1,
              descriptionTruncateLines: 2,
              responseTruncateLines: 0,
              showCommentCount: false,
              showCategoryName: false,
              showCreated: false,
              showAuthor: false,
              showStatus: false,
              showTags: false,
              showVoting: false,
              showVotingCount: false,
              showFunding: false,
              showExpression: false,
            }} />
        </div>
      );
    } else {
      content = (
        <div className={this.props.classes.content}>
          <PanelPost
            server={this.props.server}
            direction={Direction.Vertical}
            widthExpand={!this.props.isDashboard}
            onClickPost={this.props.onClickPost}
            onUserClick={this.props.onUserClick}
            panel={this.props.explorer}
            suppressPanel
            displayDefaults={{
              titleTruncateLines: 1,
              descriptionTruncateLines: 2,
              responseTruncateLines: 2,
              showCommentCount: true,
              showCreated: true,
              showAuthor: true,
              showVoting: false,
              showVotingCount: true,
              showFunding: true,
              showExpression: true,
            }}
            searchOverride={this.state.search}
          />
        </div>
      );
    }

    const createVisible = !!this.props.explorer.allowCreate && (
      <div
        className={classNames(
          this.props.classes.createButton,
          !createShown && this.props.classes.createButtonClickable,
          !!this.props.isDashboard && this.props.classes.createButtonShowBorder,
          !!this.props.isDashboard && this.props.classes.createButtonDashboard,
        )}
        onClick={createShown ? undefined : e => {
          this.setState({ createOpen: !this.state.createOpen });
          this.titleInputRef.current?.focus();
        }}
      >
        <Typography noWrap>
          {this.props.t(createShown
            ? (this.props.explorer.allowCreate.actionTitleLong as any || this.props.explorer.allowCreate.actionTitle as any || 'add-new-post')
            : (this.props.explorer.allowCreate.actionTitle as any || 'add'))}
        </Typography>
        <AddIcon
          fontSize='small'
          className={this.props.classes.addIcon}
        />
      </div>
    );
    const createCollapsible = !!this.props.explorer.allowCreate && (
      <>
        <PostCreateForm
          server={this.props.server}
          type={isLarge ? 'large' : 'regular'}
          mandatoryTagIds={this.props.explorer.search.filterTagIds}
          mandatoryCategoryIds={this.props.explorer.search.filterCategoryIds}
          adminControlsDefaultVisibility={this.props.createFormAdminControlsDefaultVisibility || (this.props.isDashboard ? 'expanded' : 'hidden')}
          titleInputRef={this.titleInputRef}
          searchSimilar={(text, categoryId) => this.setState({ searchSimilar: text })}
          logInAndGetUserId={() => new Promise<string>(resolve => this.setState({ onLoggedIn: resolve }))}
          onCreated={postId => {
            if (this.props.onClickPost) {
              this.props.onClickPost(postId);
            } else {
              this.props.history.push(preserveEmbed(`/post/${postId}`));
            }
          }}
          defaultTitle={this.state.animateTitle}
          defaultDescription={this.state.animateDescription}
        />
        <LogIn
          actionTitle={this.props.t('get-notified-of-replies')}
          server={this.props.server}
          open={!!this.state.onLoggedIn}
          onClose={() => this.setState({ onLoggedIn: undefined })}
          onLoggedInAndClose={userId => {
            if (this.state.onLoggedIn) {
              this.state.onLoggedIn(userId);
              this.setState({ onLoggedIn: undefined });
            }
          }}
        />
      </>
    );

    return (
      <InViewObserver ref={this.inViewObserverRef} disabled={!this.props.settings.demoCreateAnimate}>
        <ExplorerTemplate
          className={classNames(
            this.props.className,
            this.props.classes.root,
            !this.props.isDashboard && this.props.classes.fitContent)}
          isDashboard={this.props.isDashboard}
          createSize={this.props.explorer.allowCreate
            ? (createShown
              ? (isLarge
                ? 468 : 260)
              : 116)
            : 0}
          createShown={createShown}
          similarShown={similarShown}
          similarLabel={similarLabel}
          createVisible={createVisible}
          createCollapsible={createCollapsible}
          searchSize={this.props.explorer.allowSearch ? 120 : undefined}
          search={search}
          content={content}
        />
      </InViewObserver>
    );
  }