<commit_before>import * as React from 'react'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { classes, Dic } from '@framework/Globals'
import { Binding } from '@framework/Reflection'
import { EntityControlMessage } from '@framework/Signum.Entities'
import { ExpressionOrValueComponent, DesignerModal } from './Designer'
import { DesignerNode } from './NodeUtils'
import { BaseNode } from './Nodes'
import { StyleOptionsExpression, formGroupStyle, formSize } from './StyleOptionsExpression'

interface StyleOptionsLineProps {
  binding: Binding<StyleOptionsExpression | undefined>;
  dn: DesignerNode<BaseNode>;
}

export class StyleOptionsLine extends React.Component<StyleOptionsLineProps>{

  renderMember(expr: StyleOptionsExpression | undefined): React.ReactNode {
    return (<span
      className={expr === undefined ? "design-default" : "design-changed"}>
      {this.props.binding.member}
    </span>);
  }

  handleRemove = (e: React.MouseEvent<any>) => {
    e.preventDefault();
    this.props.binding.deleteValue();
    this.props.dn.context.refreshView();
  }

  handleCreate = (e: React.MouseEvent<any>) => {
    e.preventDefault();
    this.modifyExpression({} as StyleOptionsExpression);
  }

  handleView = (e: React.MouseEvent<any>) => {
    e.preventDefault();
    var hae = JSON.parse(JSON.stringify(this.props.binding.getValue())) as StyleOptionsExpression;
    this.modifyExpression(hae);
  }

  modifyExpression(soe: StyleOptionsExpression) {

    DesignerModal.show("StyleOptions", () => <StyleOptionsComponent dn={this.props.dn} styleOptions={soe} />).then(result => {
      if (result) {

        if (Dic.getKeys(soe).length == 0)
          this.props.binding.deleteValue();
        else
          this.props.binding.setValue(soe);
      }

      this.props.dn.context.refreshView();
    }).done();
  }

  render() {
    const val = this.props.binding.getValue();

    return (
      <div className="form-group form-group-xs">
        <label className="control-label label-xs">
          {this.renderMember(val)}

          {val && " "}
          {val && <a href="#" className={classes("sf-line-button", "sf-remove")}
            onClick={this.handleRemove}
            title={EntityControlMessage.Remove.niceToString()}>
            <FontAwesomeIcon icon="times" />
          </a>}
        </label>
        <div>
          {val ?
            <a href="#" onClick={this.handleView}><pre style={{ padding: "0px", border: "none" }}>{this.getDescription(val)}</pre></a>
            :
            <a href="#" title={EntityControlMessage.Create.niceToString()}
              className="sf-line-button sf-create"
              onClick={this.handleCreate}>
              <FontAwesomeIcon icon="plus" className="sf-create" />&nbsp;{EntityControlMessage.Create.niceToString()}
            </a>}
        </div>
      </div>
    );
  }

  getDescription(soe: StyleOptionsExpression) {

    var keys = Dic.map(soe as any, (key, value) => key + ":" + value);
    return keys.join("\n");
  }
}

export interface StyleOptionsComponentProps {
  dn: DesignerNode<BaseNode>;
  styleOptions: StyleOptionsExpression<commit_msg>fix getDescription and color<commit_after>import * as React from 'react'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { classes, Dic } from '@framework/Globals'
import { Binding } from '@framework/Reflection'
import { EntityControlMessage } from '@framework/Signum.Entities'
import { ExpressionOrValueComponent, DesignerModal } from './Designer'
import { DesignerNode, isExpression } from './NodeUtils'
import { BaseNode } from './Nodes'
import { StyleOptionsExpression, formGroupStyle, formSize } from './StyleOptionsExpression'

interface StyleOptionsLineProps {
  binding: Binding<StyleOptionsExpression | undefined>;
  dn: DesignerNode<BaseNode>;
}

export class StyleOptionsLine extends React.Component<StyleOptionsLineProps>{

  renderMember(expr: StyleOptionsExpression | undefined): React.ReactNode {
    return (<span
      className={expr === undefined ? "design-default" : "design-changed"}>
      {this.props.binding.member}
    </span>);
  }

  handleRemove = (e: React.MouseEvent<any>) => {
    e.preventDefault();
    this.props.binding.deleteValue();
    this.props.dn.context.refreshView();
  }

  handleCreate = (e: React.MouseEvent<any>) => {
    e.preventDefault();
    this.modifyExpression({} as StyleOptionsExpression);
  }

  handleView = (e: React.MouseEvent<any>) => {
    e.preventDefault();
    var hae = JSON.parse(JSON.stringify(this.props.binding.getValue())) as StyleOptionsExpression;
    this.modifyExpression(hae);
  }

  modifyExpression(soe: StyleOptionsExpression) {

    DesignerModal.show("StyleOptions", () => <StyleOptionsComponent dn={this.props.dn} styleOptions={soe} />).then(result => {
      if (result) {

        if (Dic.getKeys(soe).length == 0)
          this.props.binding.deleteValue();
        else
          this.props.binding.setValue(soe);
      }

      this.props.dn.context.refreshView();
    }).done();
  }

  render() {
    const val = this.props.binding.getValue();

    return (
      <div className="form-group form-group-xs">
        <label className="control-label label-xs">
          {this.renderMember(val)}

          {val && " "}
          {val && <a href="#" className={classes("sf-line-button", "sf-remove")}
            onClick={this.handleRemove}
            title={EntityControlMessage.Remove.niceToString()}>
            <FontAwesomeIcon icon="times" />
          </a>}
        </label>
        <div>
          {val ?
            <a href="#" onClick={this.handleView}><pre style={{ padding: "0px", border: "none", color: "blue" }}>{this.getDescription(val)}</pre></a>
            :
            <a href="#" title={EntityControlMessage.Create.niceToString()}
              className="sf-line-button sf-create"
              onClick={this.handleCreate}>
              <FontAwesomeIcon icon="plus" className="sf-create" />&nbsp;{EntityControlMessage.Create.niceToString()}
            </a>}
        </div>
      </div>
    );
  }

  getDescription(soe: StyleOptionsExpression) {

    var keys = Dic.map(soe as any, (key, value) => key + ": " + (isExpression(value) ? value.__code__ : value));
    return keys.join("\n");
  }
}

export interface StyleOptionsComponentProps {
  dn: DesignerNode<BaseNode>;
  styleOptions: StyleOptionsExpression
{'fraction_non_alphanumeric': 0.1490625, 'fraction_numerical': 0.000625, 'mean_word_length': 3.2588157019294743, 'pattern_counts': {'":': 2, '<': 55, '<?xml version=': 0, '>': 67, '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': '6814972', 'n_tokens_mistral': 1879, 'n_tokens_neox': 1856, 'n_words': 353}