@fortawesome/free-solid-svg-icons#faRedoAlt TypeScript Examples

The following examples show how to use @fortawesome/free-solid-svg-icons#faRedoAlt. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: SecondaryTableAttribute.tsx    From datajoint-labbook with MIT License 6 votes vote down vote up 
/**
   * Function to generate html label block for a given sedcondary attribute
   * NOTE: Currently disabled reset to null, will add support for it at some other point.
   * @param secondaryTableAttribute 
   * @param resetToNullCallback Call back function for reset it back to null
   * @returns 
   */
  static getAttributeLabelBlock(secondaryTableAttribute: SecondaryTableAttribute, resetToNullCallback: (tableAttribute: SecondaryTableAttribute) => void) {
    const typeString = super.getTypeString(secondaryTableAttribute);
    
    return(
      <div className="attributeHead">
        <label className="secondary-attribute-label" htmlFor={secondaryTableAttribute.attributeName}>{secondaryTableAttribute.attributeName + ' (' + typeString + ')'}</label>
        { 
          secondaryTableAttribute.defaultValue !== undefined ? 
          <div className="nullableControls">
            <div className="nullableTag">{'default'}</div>
            <FontAwesomeIcon className="resetIcon" icon={faRedoAlt} onClick={() => {resetToNullCallback(secondaryTableAttribute)}} />
          </div> : ''
        }
      </div>
    )
  }
Example #2
Source File: LabelFields.tsx    From knboard with MIT License 4 votes vote down vote up 
LabelFields = ({ fieldsId, onSubmit, setActive }: Props) => {
  const theme = useTheme();
  const {
    register,
    setValue,
    triggerValidation,
    watch,
    errors,
  } = useFormContext();

  const setRandomColor = () => {
    setValue("color", getRandomHexColor());
    triggerValidation();
  };
  const pendingColor = watch("color");

  return (
    <Flex
      css={css`
        ${theme.breakpoints.down("xs")} {
          flex-direction: column;
        }
      `}
    >
      <div
        css={css`
          display: flex;
          ${theme.breakpoints.down("xs")} {
            margin-bottom: 1rem;
          }
        `}
      >
        <TextField
          id={`${fieldsId}label-name`}
          autoFocus
          size="small"
          label="Label name"
          variant="outlined"
          name="name"
          inputRef={register({ required: true })}
          error={Boolean(errors.name)}
          css={css`
            margin-right: 1rem;
          `}
        />
        <IconButton
          size="small"
          onClick={setRandomColor}
          data-testid="random-color"
          css={css`
            height: 2.25rem;
            width: 2.25rem;
            color: ${TASK_G};
            padding: 0.75rem;
            margin-right: 0.5rem;
            background-color: ${pendingColor};
            color: ${Boolean(errors.color)
              ? DANGER
              : getContrastColor(pendingColor)};
            border: ${getContrastColor(pendingColor) === BLACK &&
            "1px solid #ccc"};
            &:hover {
              background-color: ${pendingColor};
            }
            font-size: 0.825rem;
          `}
        >
          <FontAwesomeIcon icon={faRedoAlt} size="sm" />
        </IconButton>
        <TextField
          id={`${fieldsId}label-color`}
          size="small"
          label="Color"
          variant="outlined"
          name="color"
          inputRef={register({
            pattern: /^#(?:[0-9a-fA-F]{3}){1,2}$/,
          })}
          error={Boolean(errors.color)}
          css={css`
            width: 90px;
            .MuiInputBase-input {
              font-family: monospace;
            }
          `}
        />
      </div>
      <Actions>
        <Button
          onClick={() => setActive(false)}
          css={css`
            margin: 0 0.5rem;
            font-size: 0.625rem;
          `}
          variant="outlined"
        >
          Cancel
        </Button>
        <Button
          onClick={onSubmit}
          color="primary"
          variant="contained"
          css={css`
            font-size: 0.625rem;
          `}
        >
          Save
        </Button>
      </Actions>
    </Flex>
  );
}