<commit_before>import { Box, Flex, Serif, Spacer } from "@artsy/palette"
import { ArtworkTombstone_artwork } from "__generated__/ArtworkTombstone_artwork.graphql"
import SwitchBoard from "lib/NativeModules/SwitchBoard"
import React from "react"
import { NativeModules, TouchableWithoutFeedback } from "react-native"
import { createFragmentContainer, graphql } from "react-relay"
import { FollowArtistButtonFragmentContainer as FollowArtistButton } from "./FollowArtistButton"

const Constants = NativeModules.ARCocoaConstantsModule

type Artist = ArtworkTombstone_artwork["artists"][0]

export interface ArtworkTombstoneProps {
  artwork: ArtworkTombstone_artwork
}

export interface ArtworkTombstoneState {
  showingMoreArtists: boolean
}

export class ArtworkTombstone extends React.Component<ArtworkTombstoneProps, ArtworkTombstoneState> {
  state = {
    showingMoreArtists: false,
  }
  handleTap(href: string) {
    SwitchBoard.presentNavigationViewController(this, href)
  }

  showMoreArtists = () => {
    this.setState({
      showingMoreArtists: !this.state.showingMoreArtists,
    })
  }

  renderSingleArtist(artist: Artist) {
    return (
      <React.Fragment>
        <Flex flexDirection="row" alignItems="center">
          <Box mt={3.8}>{this.renderArtistName(artist.name, artist.href)}</Box>
          <FollowArtistButton artist={artist} />
        </Flex>
      </React.Fragment>
    )
  }

  renderArtistName(artistName: string, href: string) {
    return href ? (
      <>
        <TouchableWithoutFeedback onPress={this.handleTap.bind(this, href)}>
          <Serif size="4t" weight="semibold">
            {artistName}
          </Serif>
        </TouchableWithoutFeedback>
      </>
    ) : (
      <>
        <Serif size="4t" weight="semibold">
          {artistName}
        </Serif>
      </>
    )
  }

  renderMultipleArtists = () => {
    const {
      artwork: { artists },
    } = this.props

    const truncatedArtists = !this.state.showingMoreArtists ? artists.slice(0, 3) : artists
    const artistNames = truncatedArtists.map((artist, index) => {
      const artistNameWithComma = index !== artists.length - 1 ? artist.name + ", " : artist.name
      return (
        <React.Fragment key={artist.href}>{this.renderArtistName(artistNameWithComma, artist.href)}</React.Fragment>
      )
    })

    return (
      <Flex flexDirection="row" flexWrap="wrap">
        {artistNames}
        {!this.state.showingMoreArtists &&
          artists.length > 3 && (
            <TouchableWithoutFeedback onPress={this.showMoreArtists}>
              <Serif size="5t" weight="semibold">
                {artists.length - 3} more
              </Serif>
            </TouchableWithoutFeedback>
          )}
      </Flex>
    )
  }

  render() {
    const { artwork } = this.props
    return (
      <Box textAlign="left">
        <Flex flexDirection="row" flexWrap="wrap">
          {artwork.artists.length === 1 ? this.renderSingleArtist(artwork.artists[0]) : this.renderMultipleArtists()}
          {artwork.artists.length === 0 &&
            artwork.cultural_maker &&
            this.renderArtistName(artwork.cultural_maker, null)}
        </Flex>
        <Spacer mb={1} />
        <Serif color="black60" size="3t" m="0" p="0"><commit_msg>fixed text wrapping issue<commit_after>import { Box, Flex, Serif, Spacer } from "@artsy/palette"
import { ArtworkTombstone_artwork } from "__generated__/ArtworkTombstone_artwork.graphql"
import SwitchBoard from "lib/NativeModules/SwitchBoard"
import React from "react"
import { NativeModules, TouchableWithoutFeedback } from "react-native"
import { createFragmentContainer, graphql } from "react-relay"
import { FollowArtistButtonFragmentContainer as FollowArtistButton } from "./FollowArtistButton"

const Constants = NativeModules.ARCocoaConstantsModule

type Artist = ArtworkTombstone_artwork["artists"][0]

export interface ArtworkTombstoneProps {
  artwork: ArtworkTombstone_artwork
}

export interface ArtworkTombstoneState {
  showingMoreArtists: boolean
}

export class ArtworkTombstone extends React.Component<ArtworkTombstoneProps, ArtworkTombstoneState> {
  state = {
    showingMoreArtists: false,
  }
  handleTap(href: string) {
    SwitchBoard.presentNavigationViewController(this, href)
  }

  showMoreArtists = () => {
    this.setState({
      showingMoreArtists: !this.state.showingMoreArtists,
    })
  }

  renderSingleArtist(artist: Artist) {
    return (
      <React.Fragment>
        <Flex flexDirection="row" alignItems="center">
          <Box mt={3.8}>{this.renderArtistName(artist.name, artist.href)}</Box>
          <FollowArtistButton artist={artist} />
        </Flex>
      </React.Fragment>
    )
  }

  renderArtistName(artistName: string, href: string) {
    return href ? (
      <TouchableWithoutFeedback onPress={this.handleTap.bind(this, href)}>
        <Serif size="4t" weight="semibold">
          {artistName}
        </Serif>
      </TouchableWithoutFeedback>
    ) : (
      <Serif size="4t" weight="semibold">
        {artistName}
      </Serif>
    )
  }

  renderMultipleArtists = () => {
    const {
      artwork: { artists },
    } = this.props

    const truncatedArtists = !this.state.showingMoreArtists ? artists.slice(0, 3) : artists
    const artistNames = truncatedArtists.map((artist, index) => {
      const artistNameWithComma = index !== artists.length - 1 ? artist.name + ", " : artist.name
      return (
        <React.Fragment key={artist.href}>{this.renderArtistName(artistNameWithComma, artist.href)}</React.Fragment>
      )
    })

    return (
      <Flex flexDirection="row" flexWrap="wrap">
        <Serif size="4t">
          {artistNames}
          {!this.state.showingMoreArtists &&
            artists.length > 3 && (
              <TouchableWithoutFeedback onPress={this.showMoreArtists}>
                <Serif size="4t" weight="semibold">
                  {artists.length - 3} more
                </Serif>
              </TouchableWithoutFeedback>
            )}
        </Serif>
      </Flex>
    )
  }

  render() {
    const { artwork } = this.props
    return (
      <Box textAlign="left">
        <Flex flexDirection="row" flexWrap="wrap">
          {artwork.artists.length === 1 ? this.renderSingleArtist(artwork.artists[0]) : this.renderMultipleArtists()}
          {artwork.artists.length === 0 &&
            artwork.cultural_maker &&
            this.renderArtistName(artwork.cultural_maker, null)}
        </Flex>
        <Spacer mb={1} />
        <Serif color="black60" size="3t" m="0" p="0">
{'fraction_non_alphanumeric': 0.12303465119829034, 'fraction_numerical': 0.0062585864753472754, 'mean_word_length': 2.9565217391304346, 'pattern_counts': {'":': 0, '<': 63, '<?xml version=': 0, '>': 71, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4437292', 'n_tokens_mistral': 2054, 'n_tokens_neox': 2024, 'n_words': 353}