@openneuro/app 4.1.2 → 4.2.3

package/src/scripts/datalad/fragments/select-input.tsx

@@ -1,247 +0,0 @@
-import React, { useState } from 'react'
-import TextInput from './text-input'
-import PropTypes from 'prop-types'
-import styled from '@emotion/styled'
-
-const Container = styled.div({
-  '&&': {
-    position: 'relative',
-    width: '100%',
-    height: '4.5rem',
-    backgroundColor: 'white',
-    borderRadius: '5px',
-  },
-})
-const centerLabelStyles = {
-  '&&': {
-    top: '1rem',
-    fontSize: '1em',
-  },
-}
-const pushedUpLabelStyles = {
-  '&&': { top: '0.4rem', fontSize: '0.75em' },
-}
-interface SelectInputLabelProps {
-  hasValue: boolean
-}
-
-const Label = styled.label<SelectInputLabelProps>(
-  {
-    '&&': {
-      position: 'absolute',
-      left: '1rem',
-      right: '1rem',
-      overflow: 'hidden',
-      whiteSpace: 'nowrap',
-      textOverflow: 'ellipsis',
-      color: '#999',
-      transition: 'top 100ms, font-size 100ms',
-      transitionTimingFunction: 'ease-out',
-      textAlign: 'left',
-    },
-  },
-  ({ hasValue }) => ({
-    ...(hasValue ? pushedUpLabelStyles : centerLabelStyles),
-    ':focus': pushedUpLabelStyles,
-  }),
-)
-const DisabledIcon = styled.i({
-  '&&': {
-    position: 'absolute',
-    top: '0.4rem',
-    right: '0.4rem',
-    color: '#5cb85c',
-  },
-})
-
-interface ShowOtherProps {
-  showOther: boolean
-}
-const Select = styled.select<ShowOtherProps>(
-  {
-    '&&': {
-      position: 'absolute',
-      top: 0,
-      left: 0,
-      right: 0,
-      width: '100%',
-      height: '100%',
-      border: '2px inset #eee',
-      color: 'rgba(0,0,0,0)',
-      backgroundColor: 'rgba(0,0,0,0)',
-      '-moz-appearance': 'none',
-    },
-  },
-  ({ showOther }) =>
-    showOther
-      ? {
-          borderBottomRightRadius: 0,
-          borderBottomLeftRadius: 0,
-        }
-      : {},
-)
-Select.displayName = 'styledSelect'
-const SelectValueDisplay = styled.div({
-  '&&': {
-    position: 'absolute',
-    top: 0,
-    width: '100%',
-    height: '100%',
-    padding: '1.7rem 1rem 0',
-    color: 'black',
-    overflow: 'hidden',
-    whiteSpace: 'nowrap',
-    textOverflow: 'ellipsis',
-    textAlign: 'left',
-  },
-})
-const SelectIconContainer = styled.div({
-  '&&': {
-    position: 'absolute',
-    top: 0,
-    right: 0,
-    height: '100%',
-    width: '3rem',
-    display: 'flex',
-    flexDirection: 'column',
-    justifyContent: 'center',
-    alignItems: 'center',
-    color: '#999',
-  },
-})
-const SelectIcon = (): React.ReactElement => (
-  <SelectIconContainer>
-    <i className="fa fa-caret-up" />
-    <i className="fa fa-caret-down" />
-  </SelectIconContainer>
-)
-const Option = styled.option({
-  color: 'black',
-})
-const OtherInputContainer = styled.div<ShowOtherProps>(
-  {
-    '&&': {
-      marginBottom: '0.5rem',
-      overflow: 'hidden',
-      transition: 'opacity, transform, height',
-      transitionDuration: '200ms',
-      transitionTimingFunction: 'ease-out',
-
-      input: {
-        borderTopRightRadius: 0,
-        borderTopLeftRadius: 0,
-      },
-    },
-  },
-  ({ showOther }) =>
-    showOther
-      ? {
-          '&&': {
-            height: '4.5rem',
-            opacity: 1,
-            transform: 'translateY(0)',
-          },
-        }
-      : {
-          '&&': { height: 0, opacity: 0, transform: 'translateY(-4rem)' },
-        },
-)
-const SelectInput = ({
-  name,
-  label,
-  value,
-  options,
-  showOptionOther,
-  disabled,
-  annotated,
-  required,
-  warningOnChange = '',
-  onChange,
-  hasBooleanValues,
-}): React.ReactElement => {
-  if (hasBooleanValues && typeof value === 'boolean') {
-    value = value.toString()
-  }
-  const nothingSelected = !value
-  const otherOptionSelected = showOptionOther && value === 'Other'
-
-  let selectValue
-  if (nothingSelected) selectValue = ''
-  else if (otherOptionSelected) selectValue = 'Other'
-  else selectValue = value
-
-  const [changed, setChanged] = useState(false)
-
-  const handleChange = (e): void => {
-    const prevValue = value
-    let newValue = e.target.value
-    if (hasBooleanValues) {
-      if (newValue === 'true') newValue = true
-      else if (newValue === 'false') newValue = false
-    }
-    if (prevValue != newValue) setChanged(true)
-    onChange(e.target.name, newValue)
-  }
-
-  const labelString: string = label
-
-  return (
-    <>
-      <Container>
-        <Label htmlFor={name} hasValue={Boolean(value)}>
-          {label}
-        </Label>
-        {annotated && <DisabledIcon className="fa fa-asterisk" />}
-        {/* Shows contents of select box, including value and up/down icon */}
-        <SelectValueDisplay>
-          {value}
-          <SelectIcon />
-        </SelectValueDisplay>
-        {/* default children and background of select box are set to transparent */}
-        <Select
-          name={name}
-          value={selectValue}
-          disabled={disabled}
-          onChange={handleChange}
-          showOther={showOptionOther && otherOptionSelected}
-          required={required}>
-          <Option value="" disabled hidden />
-          {options &&
-            options.map((option, i) => (
-              <Option value={option.value} key={i}>
-                {option.text || option.value}
-              </Option>
-            ))}
-          {showOptionOther && <Option value="Other">Other</Option>}
-        </Select>
-      </Container>
-      <OtherInputContainer showOther={showOptionOther && otherOptionSelected}>
-        <TextInput
-          name={name}
-          label={`Other ${labelString}`}
-          value={value === 'Other' ? '' : value}
-          disabled={disabled}
-          onChange={onChange}
-        />
-      </OtherInputContainer>
-      {changed && <p>{warningOnChange}</p>}
-    </>
-  )
-}
-
-SelectInput.propTypes = {
-  name: PropTypes.string,
-  label: PropTypes.string,
-  value: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-  options: PropTypes.array,
-  showOptionOther: PropTypes.bool,
-  disabled: PropTypes.bool,
-  annotated: PropTypes.bool,
-  required: PropTypes.bool,
-  warningOnChange: PropTypes.string,
-  onChange: PropTypes.func,
-  handleChange: PropTypes.func,
-  hasBooleanValues: PropTypes.bool,
-}
-
-export default SelectInput

package/src/scripts/datalad/fragments/share-dataset-button.jsx

@@ -1,32 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import Tooltip from '../../common/partials/tooltip.jsx'
-
-// uses the Web Share API - https://developer.mozilla.org/en-US/docs/Web/API/Navigator/share
-
-const ShareDatasetLink = props => {
-  const shareHandler = () => {
-    //does the user's device or client support the API ?
-    if (navigator.share) {
-      navigator.share({ url: props.url }).catch(() => err => window.alert(err))
-    } else {
-      window.alert('Share is not supported on this browser.')
-    }
-  }
-  return (
-    <Tooltip tooltip="Share Dataset">
-      <span>
-        <button className="btn-warn-component warning" onClick={shareHandler}>
-          <i className="fa fa-share" />
-        </button>
-      </span>
-    </Tooltip>
-  )
-}
-
-ShareDatasetLink.propTypes = {
-  datasetId: PropTypes.string,
-  url: PropTypes.string,
-}
-
-export default ShareDatasetLink

package/src/scripts/datalad/fragments/text-array-input.tsx

@@ -1,119 +0,0 @@
-import React, { useState, createRef } from 'react'
-import PropTypes from 'prop-types'
-import styled from '@emotion/styled'
-
-const Container = styled.div({
-  position: 'relative',
-  width: '100%',
-  marginBottom: '0.5rem',
-  height: '4.5rem',
-})
-
-const centerLabelStyles = {
-  top: '1rem',
-  fontSize: '1em',
-}
-const pushedUpLabelStyles = {
-  top: '0.4rem',
-  fontSize: '0.75em',
-}
-
-interface TextArrayInputLabelProps {
-  hasValue: boolean
-  hasFocus: boolean
-}
-
-const Label = styled.label<TextArrayInputLabelProps>(
-  {
-    position: 'absolute',
-    left: '1rem',
-    right: '1rem',
-    overflow: 'hidden',
-    whiteSpace: 'nowrap',
-    textOverflow: 'ellipsis',
-    color: '#999',
-    transition: 'top 100ms, font-size 100ms',
-    transitionTimingFunction: 'ease-out',
-    textAlign: 'left',
-  },
-  ({ hasValue, hasFocus }) => ({
-    ...(hasValue || hasFocus ? pushedUpLabelStyles : centerLabelStyles),
-    ':focus': pushedUpLabelStyles,
-  }),
-)
-const DisabledIcon = styled.i({
-  position: 'absolute',
-  top: '0.4rem',
-  right: '0.4rem',
-  color: '#5cb85c',
-})
-const Input = styled.input({
-  width: '100%',
-  height: '100%',
-  borderRadius: '0.5rem',
-  borderRadiusBottomRight: 0,
-  padding: '1.5rem 0.8rem 0.3rem',
-  textAlign: 'left',
-})
-
-const TextArrayInput = ({
-  name,
-  label,
-  value,
-  disabled,
-  annotated,
-  required,
-  onChange,
-}): React.ReactElement => {
-  const [hasFocus, setHasFocus] = useState(false)
-
-  const input = createRef<HTMLInputElement>()
-
-  const focusInput = (): void => {
-    input.current.focus()
-    setHasFocus(true)
-  }
-
-  const removeFocus = (): void => {
-    setHasFocus(false)
-  }
-
-  const handleChange = (e): void => {
-    onChange(e.target.name, e.target.value.split(','))
-  }
-
-  return (
-    <Container>
-      <Label
-        htmlFor={name}
-        hasValue={Boolean(value)}
-        hasFocus={hasFocus}
-        onClick={focusInput}>
-        {label}
-      </Label>
-      {annotated && <DisabledIcon className="fa fa-asterisk" />}
-      <Input
-        ref={input}
-        name={name}
-        value={value.join(', ')}
-        disabled={disabled}
-        required={required}
-        onFocus={focusInput}
-        onBlur={removeFocus}
-        onChange={handleChange}
-      />
-    </Container>
-  )
-}
-
-TextArrayInput.propTypes = {
-  name: PropTypes.string,
-  label: PropTypes.string,
-  value: PropTypes.array,
-  disabled: PropTypes.bool,
-  annotated: PropTypes.bool,
-  required: PropTypes.bool,
-  onChange: PropTypes.func,
-}
-
-export default TextArrayInput

package/src/scripts/datalad/fragments/text-input.tsx

@@ -1,206 +0,0 @@
-import React, { useState, createRef } from 'react'
-import PropTypes from 'prop-types'
-import styled from '@emotion/styled'
-
-interface TextInputContainerProps {
-  textarea: boolean
-}
-
-const Container = styled.div<TextInputContainerProps>(
-  {
-    position: 'relative',
-    width: '100%',
-    marginBottom: '0.5rem',
-    borderRadius: '5px',
-    border: '2px inset #eee',
-  },
-  ({ textarea }) =>
-    textarea
-      ? {}
-      : {
-          height: '4.5rem',
-        },
-)
-const centerLabelStyles = {
-  top: '1rem',
-  fontSize: '1em',
-}
-const pushedUpLabelStyles = {
-  top: '0.4rem',
-  fontSize: '0.75em',
-}
-
-interface TextInputLabelProps {
-  hasValue: boolean
-  hasFocus: boolean
-}
-
-const Label = styled.label<TextInputLabelProps>(
-  {
-    position: 'absolute',
-    left: '1rem',
-    right: '1rem',
-    overflow: 'hidden',
-    whiteSpace: 'nowrap',
-    textOverflow: 'ellipsis',
-    color: '#999',
-    transition: 'top 100ms, font-size 100ms',
-    transitionTimingFunction: 'ease-out',
-    textAlign: 'left',
-  },
-  ({ hasValue, hasFocus }) => ({
-    ...(hasValue || hasFocus ? pushedUpLabelStyles : centerLabelStyles),
-    ':focus': pushedUpLabelStyles,
-  }),
-)
-const DisabledIcon = styled.i({
-  position: 'absolute',
-  top: '0.4rem',
-  right: '0.4rem',
-  color: '#5cb85c',
-})
-const Input = styled.input({
-  border: 'none',
-  width: '100%',
-  height: '100%',
-  padding: '1.5rem 0.8rem 0.3rem',
-  textAlign: 'left',
-})
-const Textarea = styled.textarea({
-  width: '100%',
-  border: '1px inset #eee',
-  borderRadius: '5px',
-  textAlign: 'left',
-  padding: '1.5rem 0.8rem 0.3rem',
-})
-const HoverMessage = styled.span`
-  position: relative;
-  z-index: 100000;
-  height: 24px;
-  font-size: 12px;
-  box-shadow: 0 0 0 #ddd;
-  transition: opacity 0.4s ease-out, box-shadow 0.4s ease-out;
-  white-space: nowrap;
-  overflow: visible;
-  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
-  font-weight: normal;
-  line-height: 1.4;
-  color: #fff;
-  padding: 3px 8px;
-  text-align: center;
-  text-decoration: none;
-  background-color: #000;
-  border-radius: 4px;
-`
-
-const TextInput = ({
-  name,
-  label,
-  hoverText,
-  value,
-  disabled,
-  annotated,
-  textarea,
-  nullMessage,
-  required,
-  onChange,
-}): React.ReactElement => {
-  if (value === null) {
-    if (nullMessage) value = nullMessage
-    else value = ''
-  } else value = value.toString()
-  const [hasFocus, setHasFocus] = useState(false)
-  const [isShown, setIsShown] = useState(false)
-  const textAreaRef = createRef<HTMLTextAreaElement>()
-  const inputRef = createRef<HTMLInputElement>()
-
-  const focusInput = (): void => {
-    if (textarea) {
-      textAreaRef.current.focus()
-    } else {
-      inputRef.current.focus()
-    }
-    setHasFocus(true)
-  }
-
-  const removeFocus = (): void => {
-    setHasFocus(false)
-  }
-
-  const handleChange = (e): void => {
-    onChange(e.target.name, e.target.value)
-  }
-
-  return (
-    <Container textarea={textarea}>
-      <Label
-        htmlFor={name}
-        hasValue={Boolean(value)}
-        hasFocus={hasFocus}
-        onClick={focusInput}
-        onMouseEnter={(): void => {
-          setIsShown(true)
-        }}
-        onMouseLeave={(): void => {
-          setIsShown(false)
-        }}>
-        {label}
-      </Label>
-      {annotated && <DisabledIcon className="fa fa-asterisk" />}
-      {textarea ? (
-        <Textarea
-          ref={textAreaRef}
-          name={name}
-          value={value}
-          onFocus={focusInput}
-          onBlur={removeFocus}
-          onChange={handleChange}
-          onMouseEnter={(): void => {
-            setIsShown(true)
-          }}
-          onMouseLeave={(): void => {
-            setIsShown(false)
-          }}
-        />
-      ) : (
-        <Input
-          ref={inputRef}
-          name={name}
-          value={value}
-          disabled={disabled}
-          onFocus={focusInput}
-          onBlur={removeFocus}
-          onChange={handleChange}
-          required={required}
-          onMouseEnter={(): void => {
-            setIsShown(true)
-          }}
-          onMouseLeave={(): void => {
-            setIsShown(false)
-          }}
-        />
-      )}
-      {isShown && hoverText && <HoverMessage>{hoverText}</HoverMessage>}
-    </Container>
-  )
-}
-
-TextInput.propTypes = {
-  name: PropTypes.string,
-  label: PropTypes.string,
-  hoverText: PropTypes.string,
-  value: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.number,
-    PropTypes.array,
-    PropTypes.bool,
-  ]),
-  disabled: PropTypes.bool,
-  annotated: PropTypes.bool,
-  required: PropTypes.bool,
-  textarea: PropTypes.bool,
-  nullMessage: PropTypes.string,
-  onChange: PropTypes.func,
-}
-
-export default TextInput

package/src/scripts/datalad/mutations/__tests__/__snapshots__/comment.spec.jsx.snap

@@ -1,5 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CommentMutation renders with basic props 1`] = `""`;
-
-exports[`CommentMutation renders with common props 1`] = `""`;