<commit_before>import React, { Component } from 'react';
import {default_order, default_order_diff} from "../demo_data";
import SortableReact from '../../SortableReact';
import Markdown from 'react-markdown';

const code = `
\`\`\`js
<SortableReact
  sortable_mode={sortable_mode}
  stiffness={95}
  damping={20}
  delta={30}
  scale_active={0.8}
  shadow_active={1.4}
  order=[
    {id: "1", w:2, h:2, col:1, row:1, con: "1",
    style:{background:"url(im1.jpg) no-repeat", backgroundSize:"cover", color: "white", fontSize:10}},
    ...]
/>
\`\`\`
`

const text = `
  # Item with image
  ${code}
`

class  StoreItemWithImage extends Component {
  constructor(props) {
    super(props)
    this.state = {mode: "left_right"};
    console.log("state::::", this.state)
    // let new_order = []
    // const default_order_diff2 = default_order_diff.clone()
    // default_order_diff2.forEach((item)=>{
    //   item.style = {background:"url(favicon.ico) no-repeat", backgroundSize:"100%", color: "white", fontSize:40}
    //   new_order.push(item)
    // })
    this.new_order = [
      {id: "1", w:2, h:2, col:1, row:1, con: "1", style:{background:"url(im1.jpg) no-repeat", backgroundSize:"cover", color: "white", fontSize:10}},
      {id: "2", w:1, h:1, col:3, row:1, con: "2", style:{background:"url(im2.jpg) no-repeat", backgroundSize:"cover", color: "white", fontSize:10}},
      // {id: "3", w:2, h:2, col:3, row:1, con: "3"},
      {id: "11", w:1, h:1, col:3, row:2, con: "11", style:{background:"url(im3.jpg) no-repeat", backgroundSize:"cover", color: "white", fontSize:10}},
      // {id: "12", w:1, h:1, col:2, row:2, con: "12"},
      {id: "21", w:1, h:1, col:1, row:3, con: "21", style:{background:"url(im4.jpg) no-repeat", backgroundSize:"cover", color: "white", fontSize:10}},
      {id: "22", w:1, h:1, col:2, row:3, con: "22", style:{background:"url(im5.jpg) no-repeat", backgroundSize:"cover", color: "white", fontSize:10}},
      {id: "23", w:1, h:1, col:3, row:3, con: "23", style:{background:"url(im6.jpg) no-repeat", backgroundSize:"cover", color: "white", fontSize:10}},
      // {id: "24", w:1, h:1, col:4, row:3, con: "24"},
    ]

  }

  onState(e){
    console.log("onState:", e.target.value)
    this.setState({"mode": e.target.value})
  }<commit_msg>add button on item with image demo<commit_after>import React, { Component } from 'react';
import {default_order, default_order_diff} from "../demo_data";
import SortableReact from '../../SortableReact';
import Markdown from 'react-markdown';

const code = `
\`\`\`js
<SortableReact
  sortable_mode={sortable_mode}
  stiffness={95}
  damping={20}
  delta={30}
  scale_active={0.8}
  shadow_active={1.4}
  order=[
    {
      id: "1", w:2, h:2, col:1, row:1,
      con: (<div><a id="im1" onClick={this.onClick.bind(this)} style={style_item}>x</a></div>),
      style:{background:"url(im1.jpg) no-repeat", backgroundSize:"cover", color: "white", fontSize:10}
    },
    ...]
/>
\`\`\`
`

const text = `
  # Item with image
  ${code}
`

const style_item = { cursor:"pointer", lineHeight:1.5, "float": "right", paddingRight:10, color:"black"}

class  StoreItemWithImage extends Component {
  constructor(props) {
    super(props)
    this.state = {mode: "left_right"};
    console.log("state::::", this.state)
    // let new_order = []
    // const default_order_diff2 = default_order_diff.clone()
    // default_order_diff2.forEach((item)=>{
    //   item.style = {background:"url(favicon.ico) no-repeat", backgroundSize:"100%", color: "white", fontSize:40}
    //   new_order.push(item)
    // })
    this.new_order = [
      {id: "1", w:2, h:2, col:1, row:1, con: (<div><a id="im1" onClick={this.onClick.bind(this)} style={style_item}>x</a></div>), style:{overflow:"hidden", background:"url(im1.jpg) no-repeat", backgroundSize:"cover", color: "white", fontSize:15}},
      {id: "2", w:1, h:1, col:3, row:1, con: (<div><a id="im2" onClick={this.onClick.bind(this)}  style={style_item}>x</a></div>), style:{background:"url(im2.jpg) no-repeat", backgroundSize:"cover", color: "white", fontSize:15}},
      // {id: "3", w:2, h:2, col:3, row:1, con: "3"},
      {id: "11", w:1, h:1, col:3, row:2, con: (<div><a id="im3" onClick={this.onClick.bind(this)}  style={style_item}>x</a></div>), style:{background:"url(im3.jpg) no-repeat", backgroundSize:"cover", color: "white", fontSize:15}},
      // {id: "12", w:1, h:1, col:2, row:2, con: "12"},
      {id: "21", w:1, h:1, col:1, row:3, con: (<div><a id="im4" onClick={this.onClick.bind(this)}  style={style_item}>x</a></div>), style:{background:"url(im4.jpg) no-repeat", backgroundSize:"cover", color: "white", fontSize:15}},
      {id: "22", w:1, h:1, col:2, row:3, con: (<div><a id="im5" onClick={this.onClick.bind(this)}  style={style_item}>x</a></div>), style:{background:"url(im5.jpg) no-repeat", backgroundSize:"cover", color: "white", fontSize:15}},
      {id: "23", w:1, h:1, col:3, row:3, con: (<div><a id="im6" onClick={this.onClick.bind(this)}  style={style_item}>x</a></div>), style:{background:"url(im6.jpg) no-repeat", backgroundSize:"cover", color: "white", fontSize:15}},
      // {id: "24", w:1, h:1, col:4, row:3, con: "24"},
    ]

  }

  onClick(e){
    console.log("e",String(e.target.id))
    alert("click: "+ String(e.target.id))
  }

  onState(e){
    console.log("onState:", e.target.value)
    this.setState({"mode": e.target.value})
  }
{'fraction_non_alphanumeric': 0.23275701803309165, 'fraction_numerical': 0.0408997955010225, 'mean_word_length': 4.337301587301587, 'pattern_counts': {'":': 3, '<': 33, '<?xml version=': 0, '>': 35, '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': '1444859', 'n_tokens_mistral': 2126, 'n_tokens_neox': 2066, 'n_words': 416}