@sunzao/d3po_itkr v1.1.26

d3po_ITKR

callout examples info_icon.js

  let img_data = {
    varName:`${my_icon_str}`,
    url:icon_image,
    type: "profile",
    custom_class:`${my_icon_str} ${s.app_state.text_view}`,
    width:100,height:100,scale:my_scale,
    mode:"image",
    stop_bubble: true,
    auto_validate: "true",
    layout: ["profile","thumbnail"],
    // default_img: default_image
  };
  // ISSUE: i need to throttle this app to see how it hang when using liefi
  if(tVar.myIn_extra != ""){

    img_data.extra = tVar.myIn_extra;// this is the whole thing (all the layout variations)
    img_data.mode = "auto";

    // i need to read the extra and see if the dimensions work for the display area,
    // in this case it needs profile or thumbnail or custom with the same width and height - otherwise do nothing
    // needs to use profile or thumbnail layout or default image (no extra) - can also send a different img_url (icon_image)

    //also if it has multiple images, look for the profile or thumbnail and get its extra data
  }// end if


  if(deep_dive)
  {
    img_data.has_callout = "true";
    img_data.callout_params = [open_folder, open_folder_data];
  }// if deep_dive

  let master_image =  (s.app_state.text_view != "minified") ? (
    <MasterImage data={img_data} />
  ) : null ;

onClick callout

PreviewUrl.js

  let meta_img_data = (meta_image != "") ? {
    /*home:rich_image_cont_id,*/varName:'rich_img',url:meta_image,type:"profile",
    width:200,height:100,scale:2,mode:"image",
    custom_class:"rich_img fit-cover",
    has_load_callout: "true",
    load_callout_params:[img_success,{/*state,"pId":rich_image_cont_id,*/"chron":chron,/*"tObj":trans_obj,*/"img":meta_image}],
    has_load_callout:"true",
    error_callout_params:[img_error,{/*state,"pId":rich_image_cont_id,*/"mod":"rich","chron":chron,/*"tObj":trans_obj*/}]
  } : {}; // does it need state or store?


  // does this entire fn component rerun on render
  //[seems like yes ](https://stackoverflow.com/questions/46736983/will-a-stateless-component-re-render-if-its-props-have-not-changed/46737063)
  // ISSUE: can i set no image on error? - fix rich preview broken images

  let rich_image_cont = (meta_image != "") ? (
    <div id={`rich_image_cont${iUN}`} className={`rich_image_cont${iUN} rich_image_cont`} title="rich preview container" >
      {rich_copy_btn}
      <MasterImage data={meta_img_data} />
    </div>
  ) : null;

for error_callout to work i need to disable auto_validate info_icon - even though it doesn't need it

    @observer
    class info_icon extends React.Component {

      constructor(props){
        super(props);

        this.state = {
          text_only: props.tVar.text_only || false,
          img_error: false
        }
      }// constructor
    //sample:
    // <AWrapr tVar={tVar} ></AWrapr>

    img_error = (obj) => {
      let tVar = this.props.tVar;
      let state = tVar.s.app_state;
      let meseeks = "myerror";
      if(this.state.img_error == false){
        this.setState({text_only: true, img_error: true});
      }//if
    }

    let img_data = {
        varName:`${my_icon_str}`,
        url:icon_image,
        type: "profile",
        custom_class:`${my_icon_str} ${s.app_state.text_view}`,
        width:100,height:100,scale:my_scale,
        mode:"image",
        stop_bubble: true,
        auto_validate: false,
        layout: ["profile","thumbnail"],
        has_error_callout: true,
        error_callout_params:[this.img_error,{/*state,"pId":rich_image_cont_id,*/"mod":"rich",/*"tObj":trans_obj*/}]
        // default_img: default_image
      };
      let master_image =  (s.app_state.text_view != "minified") ? (
        <MasterImage data={img_data} />
      ) : null ;