<commit_before>###
A single file tab that

There is one of these for each open file in a project.
###

{React, ReactDOM, rclass, rtypes, Fragment} = require('../app-framework')

misc = require('smc-util/misc')

{NavItem} = require('react-bootstrap')

{COLORS, HiddenXS, Icon, Tip} = require('../r_misc')

{analytics_event} = require("../tracker")

exports.DEFAULT_FILE_TAB_STYLES =
    width        : 250
    borderRadius : "5px 5px 0px 0px"
    flexShrink   : '1'
    overflow     : 'hidden'


exports.FileTab = rclass
    displayName : 'FileTab'

    propTypes :
        name         : rtypes.string
        label        : rtypes.string    # rendered tab title
        icon         : rtypes.string    # Affiliated icon
        project_id   : rtypes.string
        tooltip      : rtypes.string
        is_active    : rtypes.bool
        file_tab     : rtypes.bool      # Whether or not this tab holds a file *editor*
        shrink       : rtypes.bool      # Whether or not to shrink to just the icon
        has_activity : rtypes.bool      # Whether or not some activity is happening with the file

    getInitialState : ->
        x_hovered : false

    componentDidMount : ->
        @strip_href()

    componentDidUpdate : ->
        @strip_href()

    strip_href : ->
        ReactDOM.findDOMNode(@refs.tab)?.children[0].removeAttribute('href')

    mouse_over_x: ->
        @setState(x_hovered:true)

    mouse_out_x: ->
        @setState(x_hovered:false)
        @actions(project_id: @props.project_id).clear_ghost_file_tabs()

    close_file : (e, path) ->
        e.stopPropagation()
        e.preventDefault()
        @actions(project_id: @props.project_id).close_tab(path)

    click: (e) ->
        actions = @actions(project_id: @props.project_id)
        if @props.file_tab and (e.ctrlKey or e.shiftKey or e.metaKey)
            # shift/ctrl/option clicking on *file* tab opens in a new popout window.
            actions.open_file
                path               : misc.tab_to_path(@props.name)
                new_browser_window : true
        else
            actions.set_active_tab(@props.name)

        if @props.file_tab
            analytics_event('project_navigation', 'opened_a_file', misc.filename_extension(@props.name))
        else
            analytics_event('project_navigation', 'opened_project_' + @props.name)

    # middle mouse click closes
    onMouseDown: (e) ->
        if e.button == 1
            @close_file(e, misc.tab_to_path(@props.name))

    render : ->
        style = {}

        if @props.file_tab
            style = misc.copy(exports.DEFAULT_FILE_TAB_STYLES)
            if @props.is_active
                style.backgroundColor = COLORS.BLUE_BG
        else
            style.flex = 'none'

        icon_style =
            fontSize: '15pt'

        if @props.file_tab
            icon_style.fontSize = '10pt'

        if @props.has_activity
            icon_style.color = 'orange'

        content_style =
            whiteSpace   : 'nowrap'
            overflow     : 'hidden'

        if @props.file_tab
            content_style.display = 'flex'

        label_style =
            flex         : 1
            textOverflow : 'ellipsis'
            direction    : 'rtl'
            padding      : '0 1px'
            overflow     : 'hidden'

        x_button_style =
            float      : 'right'
            whiteSpace : 'nowrap'

        if @state.x_hovered
            x_button_style.color = 'lightblue'

        text_color = 'white' if @props.is_active

        if @props.file_tab
            label = <Fragment>{@props.label}</Fragment>
        else
            label = <HiddenXS>{@props.label if not @props.shrink}</HiddenXS>

        if @props.file_tab
            # ONLY show tooltip for filename (it provides the full path).
            label = <Tip title={@props.tooltip} stable={true} placement={'bottom'}> {label} </Tip>
            label = <div style={label_style}>{label}</div>

        body = <div style={width:'100%', color:text_color, cursor : 'pointer'}>
                <div style={x_button_style}><commit_msg>in some cases direction rtl has annoying effects<commit_after>###
A single file tab that

There is one of these for each open file in a project.
###

{React, ReactDOM, rclass, rtypes, Fragment} = require('../app-framework')

misc = require('smc-util/misc')

{NavItem} = require('react-bootstrap')

{COLORS, HiddenXS, Icon, Tip} = require('../r_misc')

{analytics_event} = require("../tracker")

exports.DEFAULT_FILE_TAB_STYLES =
    width        : 250
    borderRadius : "5px 5px 0px 0px"
    flexShrink   : '1'
    overflow     : 'hidden'


exports.FileTab = rclass
    displayName : 'FileTab'

    propTypes :
        name         : rtypes.string
        label        : rtypes.string    # rendered tab title
        icon         : rtypes.string    # Affiliated icon
        project_id   : rtypes.string
        tooltip      : rtypes.string
        is_active    : rtypes.bool
        file_tab     : rtypes.bool      # Whether or not this tab holds a file *editor*
        shrink       : rtypes.bool      # Whether or not to shrink to just the icon
        has_activity : rtypes.bool      # Whether or not some activity is happening with the file

    getInitialState : ->
        x_hovered : false

    componentDidMount : ->
        @strip_href()

    componentDidUpdate : ->
        @strip_href()

    strip_href : ->
        ReactDOM.findDOMNode(@refs.tab)?.children[0].removeAttribute('href')

    mouse_over_x: ->
        @setState(x_hovered:true)

    mouse_out_x: ->
        @setState(x_hovered:false)
        @actions(project_id: @props.project_id).clear_ghost_file_tabs()

    close_file : (e, path) ->
        e.stopPropagation()
        e.preventDefault()
        @actions(project_id: @props.project_id).close_tab(path)

    click: (e) ->
        actions = @actions(project_id: @props.project_id)
        if @props.file_tab and (e.ctrlKey or e.shiftKey or e.metaKey)
            # shift/ctrl/option clicking on *file* tab opens in a new popout window.
            actions.open_file
                path               : misc.tab_to_path(@props.name)
                new_browser_window : true
        else
            actions.set_active_tab(@props.name)

        if @props.file_tab
            analytics_event('project_navigation', 'opened_a_file', misc.filename_extension(@props.name))
        else
            analytics_event('project_navigation', 'opened_project_' + @props.name)

    # middle mouse click closes
    onMouseDown: (e) ->
        if e.button == 1
            @close_file(e, misc.tab_to_path(@props.name))

    render : ->
        style = {}

        if @props.file_tab
            style = misc.copy(exports.DEFAULT_FILE_TAB_STYLES)
            if @props.is_active
                style.backgroundColor = COLORS.BLUE_BG
        else
            style.flex = 'none'

        icon_style =
            fontSize: '15pt'

        if @props.file_tab
            icon_style.fontSize = '10pt'

        if @props.has_activity
            icon_style.color = 'orange'

        content_style =
            whiteSpace   : 'nowrap'
            overflow     : 'hidden'

        if @props.file_tab
            content_style.display = 'flex'

        label_style =
            flex         : 1
            textOverflow : 'ellipsis'
            direction    : 'rtl'  # so the ellipsis are on the left side of the path, which is most useful
            padding      : '0 1px'
            overflow     : 'hidden'

        x_button_style =
            float      : 'right'
            whiteSpace : 'nowrap'

        if @state.x_hovered
            x_button_style.color = 'lightblue'

        text_color = 'white' if @props.is_active

        if @props.file_tab
            label = <Fragment>{@props.label}</Fragment>
        else
            label = <HiddenXS>{@props.label if not @props.shrink}</HiddenXS>

        if @props.file_tab
            # ONLY show tooltip for filename (it provides the full path).
            label = <Tip title={@props.tooltip} stable={true} placement={'bottom'}> {label} </Tip>
            # The dir="ltr" below is needed because of the direction 'rtl' in label_style, which
            # we have to compensate for in some situations, e.g.., a file name "this is a file!"
            # will have the ! moved to the beginning by rtl.
            label = <div style={label_style}><span dir="ltr">{label}</span></div>

        body = <div style={width:'100%', color:text_color, cursor : 'pointer'}>
                <div style={x_button_style}>
{'fraction_non_alphanumeric': 0.10379451255107998, 'fraction_numerical': 0.004670169293636894, 'mean_word_length': 1.9466804265565876, 'pattern_counts': {'":': 0, '<': 25, '<?xml version=': 0, '>': 45, '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': '3613020', 'n_tokens_mistral': 2624, 'n_tokens_neox': 2507, 'n_words': 608}