bilingo-ui/src/components/Common/test.tsx

import React, { PureComponent } from "react";
import classnames from 'classnames';

import styles from './test.less';

export const ImgRowList = (
  imglist: Array<string>,
  outterKey: string,
  type: string | null = 'normal',
) => {
  if (!imglist || !Array.isArray(imglist)) return null;
  return (
    <div
      className={classnames(styles.normal_img_row_list, {
        [styles.middle_type]: type === 'middle',
      })}
    >
      {imglist.map((image_url: string, index: number) => {
        return (
          <span key={`${outterKey}_${image_url}`}>
            <img src={image_url} alt={`comment ${index}`} />
          </span>
        );
      })}
    </div>
  );
};

interface MyNormalListProps {
  style?: any;
  renderItem: Function | any;
  renderData: Array<any>;
}
export class MyNormalList extends PureComponent<MyNormalListProps, {}> {
  render() {
    const {
      style: innerStyle = {},
      renderItem = () => {},
      renderData = [],
    } = this.props;

    if (!renderData || !Array.isArray(renderData)) {
      console.error('MyNormalList Components renderData Props must be Array');
      return null;
    }

    return (
      <div className={styles.normal_list_wrapper} style={innerStyle}>
        {renderData.map((value, index, arr) => renderItem(value, index))}
      </div>
    );
  }
}

interface NormalCardProps {
  key: any;
  userinfo: {
    nickname: string | any;
    avatar: string | any;
    created: string | number;
  };
  main_content: any;
  append_content?: any;
  content_img_assets?: Array<string>;
  options?: {
    header_size?: 'small' | 'normal' | 'middle';
    bottom_divider?: boolean;
  };
}
export class NormalCard extends PureComponent<NormalCardProps, {}> {
  render() {
    const {
      userinfo: { nickname, avatar, created } = {
        nickname: '',
        avatar: '',
        created: '',
      },
      main_content = null,
      append_content = null,
      content_img_assets = [],
      options = {
        header_size: 'normal',
        bottom_divider: false,
      },
    } = this.props;
    //

    const RENDEROPTIONS_showImgList =
      content_img_assets && content_img_assets.length > 0;

    return (
      <div
        className={classnames(styles.normal_card_wrapper, {
          [styles.header_middle]: options.header_size === 'middle', // default
          [styles.header_small]: options.header_size === 'small',
          [styles.bottom_border]: options.bottom_divider,
        })}
      >
        <time>{created}</time>
        <header>
          {typeof avatar === 'string' ? (
            <div className={styles.avatar_wrapper}>
              <img src={avatar} alt="user_avatar" />
            </div>
          ) : (
            avatar
          )}
          <div className={styles.nickname_wrapper}>{nickname}</div>
        </header>
        <div className={styles.main_content_wrapper}>
          {main_content}
          {RENDEROPTIONS_showImgList
            ? ImgRowList(content_img_assets, this.props.key)
            : null}
        </div>
        <div className={styles.append_wrapper}>{append_content}</div>
      </div>
    );
  }
}

interface ShareCardProps {
  isMobile: boolean | any;
  mode: 'line' | 'block';
  render_mode: 'text' | 'object';
  share_data: any;
}
export class ShareCard extends PureComponent<ShareCardProps, {}> {
  render() {
    const {
      isMobile = false,
      render_mode = 'text',
      mode = 'line',
      share_data = '',
    } = this.props;

    return (
      <div
        className={classnames(styles.share_card_wrapper, {
          [styles.mobile_mode]: isMobile,
          [styles.mode_line]: mode === 'line', // default
          [styles.mode_block]: mode === 'block',
        })}
      >
        {render_mode === 'text' ? share_data : null}
      </div>
    );
  }
}

// type TransmitType = 'imgTxt' | 'shortVideo' | 'microVideo';
// type TransmitImgTxtData = {
//   user_id?: string|number;
//   anonymity?: boolean;
//   avatar?: string;
//   nickname?: string;
//   is_long?: boolean;
// }

// interface TransmitCardProps {
//   type: TransmitType;
//   data: TransmitImgTxtData;
// }

// export class TransmitCard extends React.PureComponent<TransmitCardProps, {}> {
//   renderVideo() {
//     return <div className={styles.transmitVideoCard}>Video</div>;
//   }

//   renderImgTxt() {
//     const { data } = this.props;
//     const {
//       user_id,
//       anonymity,
//       avatar,
//       nickname,
//       is_long,
//     } = data;

//     return (
//       <div className={styles.transmitImgTxtCard}>
//         <div className={styles.header}>
//           <UserLink user_id={user_id} anonymity={anonymity}>
//             <Avatar
//               id={user_id}
//               image={avatar}
//               follow={false}
//               size="cover"
//               className={styles.ava}
//               anonymity={anonymity}
//             />
//           </UserLink>
//           <div className={styles.nickname}>
//             <UserLink user_id={user_id} anonymity={anonymity}>
//               {nickname}
//             </UserLink>
//           </div>
//           <div className={styles.type}>
//             {is_long
//               ? intl.get('bilingually.imgtxt.article')
//               : intl.get('bilingually.imgtxt')}
//           </div>
//         </div>
//       </div>
//     );
//   }

//   render() {
//     const { type } = this.props;
//     if (type === 'imgTxt') {
//       this.renderImgTxt();
//     }
//     if (type === 'shortVideo' || type === 'microVideo') {
//       this.renderVideo();
//     }
//     return null;
//   }
// }

export const Test = "TestComponent";
export const TestRedTxt = () => (
  <div className={styles.red}>
    RedTxt
  </div>
)

export default {
  MyNormalList,
  NormalCard,
  ShareCard,
  Test,
  // TransmitCard
};