<commit_before>import React from 'react';
import { object, func, number, bool } from 'prop-types';
import { Icon } from 'antd';
import Image from './image';
import { createComponent } from 'olymp-fela';

const ImageContainer = createComponent(
  ({ theme, isActive }) => ({
    position: 'relative',
    margin: '.5rem',
    padding: 1,
    cursor: 'pointer',
    // outline: isActive ? `3px solid ${theme.color}` : 'none',
    // transform: isActive ? 'scale(1.15)' : 'none',
    transition: 'all .1s ease-in-out',
    backgroundColor: isActive ? theme.color : '#FFF',
    border: isActive ? `1px solid ${theme.color}` : '1px solid #ddd',
    // boxShadow: `0px 0px 10px 0px rgba(0, 0, 0, ${isActive ? 0.4 : 0.2})`,
    '> div': {
      opacity: isActive ? 0.6 : 1,
    },
    ':hover': {
      // boxShadow: '0px 0px 10px 0px rgba(0, 0, 0, 0.4)',
      transform: 'scale(1.025)',
      transition: 'all .1s ease-in-out',
    },
  }),
  'div',
  ({ height, isActive, ...p }) => Object.keys(p)
);

const ImageLabel = createComponent(
  ({ theme }) => ({
    position: 'absolute',
    top: '50%',
    right: '50%',
    transform: 'translate(50%, -50%)',
    transition: 'all .15s ease-in-out',
    backgroundColor: theme.color,
    color: '#FFF',
    borderRadius: '50%',
    textAlign: 'center',
    fontSize: 25,
    padding: 5,
    lineHeight: 1,
    // boxShadow: "0px 0px 12px 0px rgba(0,0,0,0.75)",
  }),
  'span',
  p => Object.keys(p)
);

const CheckLabel = createComponent(
  ({ theme }) => ({
    position: 'absolute',
    top: 0,
    right: 0,
    transform: 'translate(40%, -40%) scale(0.667)',
    transition: 'all .15s ease-in-out',
    backgroundColor: theme.color,
    color: '#FFF',
    borderRadius: '50%',
    textAlign: 'center',
    fontSize: 25,
    padding: 5,
    lineHeight: 1,
  }),
  'span',
  p => Object.keys(p)
);

const CloseLabel = createComponent(
  ({ theme }) => ({
    ':hover': {
      transform: 'translate(40%, -40%) scale(0.75)',
      transition: 'all .15s ease-in-out',
    },
  }),
  CheckLabel,
  p => Object.keys(p)
);

const Thumb = ({ item, onClick, onRemove, isActive, height }) =>
  item
    ? <ImageContainer isActive={isActive}>
      <Image
        value={item}
        mode="fill"
        height={height}
        onClick={onClick}
        style={{ maxWidth: '100%' }}
        retina
      />
      {item.format === 'pdf'
          ? <ImageLabel>
            <Icon type="file-pdf" />
          </ImageLabel>
          : undefined}
      {isActive
          ? onRemove
            ? <CloseLabel onClick={onRemove}>
              <Icon type="close" />
            </CloseLabel>
            : <CheckLabel>
              <Icon type="check" /><commit_msg>thumbs to new images<commit_after>import React from 'react';
import { object, func, number, bool } from 'prop-types';
import { Icon } from 'antd';
import Image from './image';
import { createComponent } from 'olymp-fela';

const ImageContainer = createComponent(
  ({ theme, isActive }) => ({
    position: 'relative',
    margin: '.5rem',
    padding: 1,
    cursor: 'pointer',
    // outline: isActive ? `3px solid ${theme.color}` : 'none',
    // transform: isActive ? 'scale(1.15)' : 'none',
    transition: 'all .1s ease-in-out',
    backgroundColor: isActive ? theme.color : '#FFF',
    border: isActive ? `1px solid ${theme.color}` : '1px solid #ddd',
    // boxShadow: `0px 0px 10px 0px rgba(0, 0, 0, ${isActive ? 0.4 : 0.2})`,
    '> div': {
      opacity: isActive ? 0.6 : 1,
    },
    ':hover': {
      // boxShadow: '0px 0px 10px 0px rgba(0, 0, 0, 0.4)',
      transform: 'scale(1.025)',
      transition: 'all .1s ease-in-out',
    },
  }),
  'div',
  ({ height, isActive, ...p }) => Object.keys(p)
);

const ImageLabel = createComponent(
  ({ theme }) => ({
    position: 'absolute',
    top: '50%',
    right: '50%',
    transform: 'translate(50%, -50%)',
    transition: 'all .15s ease-in-out',
    backgroundColor: theme.color,
    color: '#FFF',
    borderRadius: '50%',
    textAlign: 'center',
    fontSize: 25,
    padding: 5,
    lineHeight: 1,
    // boxShadow: "0px 0px 12px 0px rgba(0,0,0,0.75)",
  }),
  'span',
  p => Object.keys(p)
);

const CheckLabel = createComponent(
  ({ theme }) => ({
    position: 'absolute',
    top: 0,
    right: 0,
    transform: 'translate(40%, -40%) scale(0.667)',
    transition: 'all .15s ease-in-out',
    backgroundColor: theme.color,
    color: '#FFF',
    borderRadius: '50%',
    textAlign: 'center',
    fontSize: 25,
    padding: 5,
    lineHeight: 1,
  }),
  'span',
  p => Object.keys(p)
);

const CloseLabel = createComponent(
  ({ theme }) => ({
    ':hover': {
      transform: 'translate(40%, -40%) scale(0.75)',
      transition: 'all .15s ease-in-out',
    },
  }),
  CheckLabel,
  p => Object.keys(p)
);

const Thumb = ({ item, onClick, onRemove, isActive, height }) =>
  item
    ? <ImageContainer isActive={isActive}>
      <Image value={item} height={height} onClick={onClick} />
      {item.format === 'pdf'
          ? <ImageLabel>
            <Icon type="file-pdf" />
          </ImageLabel>
          : undefined}
      {isActive
          ? onRemove
            ? <CloseLabel onClick={onRemove}>
              <Icon type="close" />
            </CloseLabel>
            : <CheckLabel>
              <Icon type="check" />
{'fraction_non_alphanumeric': 0.18503862822687017, 'fraction_numerical': 0.035613340870548335, 'mean_word_length': 2.446753246753247, 'pattern_counts': {'":': 0, '<': 23, '<?xml version=': 0, '>': 43, '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': '517314', 'n_tokens_mistral': 1931, 'n_tokens_neox': 1803, 'n_words': 450}