@blend-ui/core/dist/esm/Button.js

Blend core cmponents

import { objectSpread2 as _objectSpread2, objectWithoutProperties as _objectWithoutProperties, extends as _extends } from './_virtual/_rollupPluginBabelHelpers.js';
import React, { forwardRef } from 'react';
import styled, { css } from 'styled-components';
import PropTypes from 'prop-types';
import styledProps from '@styled-system/prop-types';
import { space, typography } from 'styled-system';
import Box from './Box.js';
import { useId } from '@reach/auto-id';
var _excluded = ["id", "name", "accept", "onChange", "disabled"];
var Flex = styled(Box).withConfig({
  displayName: "Button__Flex",
  componentId: "sc-u7scuu-0"
})(["display:flex;"]);
var buttonVariations = ["fill", "outline", "link", "file"];

var buttonVariation = function buttonVariation(props) {
  //console.log("VARIATION ", props);
  var buttonProps = Object.assign({}, props.theme.componentStyles.button[props.variation]);
  var hoverVariations = null;

  if (props.variation === "link") {
    hoverVariations = css(["&:hover{text-decoration:underline;color:", "!important;background-color:transparent !important;border:0 !important;}"], function (props) {
      return props.theme.colors.baseHover;
    });
  } else if (props.colorStyle === "error" && props.variation === "fill") {
    hoverVariations = css(["&:hover{text-decoration:none;color:", "!important;background-color:", " !important;border:'", "';}"], function (props) {
      return props.theme.colors.baseWhite;
    }, function (props) {
      return props.theme.colors.baseErrorHover;
    }, function (props) {
      return props.theme.borders.button.hoverError;
    }); //important check to 
  } else if (props.colorStyle === "error" && props.variation === "outline") {
    hoverVariations = css(["&:hover{text-decoration:none;color:", "!important;border:'", "';}"], function (props) {
      return props.theme.colors.baseErrorHover;
    }, function (props) {
      return props.theme.borders.button.hoverError;
    });
  } //console.log(hoverVariations);


  return [buttonProps, hoverVariations];
};

var themeColorStyles = function themeColorStyles(props) {
  //return props.colorStyle ? props.theme.colorStyles[props.colorStyle] : null;
  var buttonProps = null;
  var hoverVariations = null;

  if (props.colorStyle) {
    if (props.variation === "outline") {
      buttonProps = props.theme.colorStyles.button.outline[props.colorStyle];
    } else if (props.variation === "fill") {
      buttonProps = props.theme.colorStyles.button.fill[props.colorStyle];
    } else if (props.variation === "link") {
      buttonProps = props.theme.colorStyles.button.link[props.colorStyle];
    }
  }

  return [buttonProps, hoverVariations];
};

var buttonTheme = css(["display:inline-block;vertical-align:middle;text-align:center;text-decoration:none;font-family:inherit;height:auto;width:", ";min-width:", ";line-height:", ";cursor:", ";border-radius:", ";border:", ";font-size:", ";font-weight:", ";padding:0;padding-left:", ";padding-right:", ";&:not([disabled]):hover{outline:none;-webkit-box-shadow:none;box-shadow:none;border:", ";color:", ";background-color:", ";}&:disabled{background:", ";color:", ";border:", ";pointer-events:none;cursor:not-allowed;}&:focus{outline:none;-webkit-box-shadow:none;box-shadow:none;}"], function (props) {
  return props.width || "auto";
}, function (props) {
  return props.minWidth || props.theme.componentStyles.button[props.size].minWidth;
}, function (props) {
  return props.lineHeight || props.theme.componentStyles.button[props.size].lineHeight;
}, function (props) {
  return props.disabled ? "default" : "pointer";
}, function (props) {
  return typeof props.borderRadius !== "undefined" ? props.borderRadius : props.theme.borders.button.borderRadius;
}, function (props) {
  return typeof props.borders !== "undefined" ? props.borders : props.theme.componentStyles.button[props.variation].border;
}, function (props) {
  return props.fontSize || props.theme.componentStyles.button[props.size].fontSize;
}, function (props) {
  return props.fontWeight || props.theme.componentStyles.button[props.size].fontWeight;
}, function (props) {
  return props.paddingLeft || props.theme.componentStyles.button[props.size].paddingLeft;
}, function (props) {
  return props.paddingRight || props.theme.componentStyles.button[props.size].paddingRight;
}, function (props) {
  return props.colorStyle === 'error' ? props.theme.borders.button.hoverError : props.theme.borders.button.hover;
}, function (props) {
  return props.variation === "fill" ? props.theme.colors.baseWhite : props.theme.colors.baseHover;
}, function (props) {
  return props.variation === "outline" ? props.theme.colors.baseWhite : props.theme.colors.baseHover;
}, function (props) {
  return props.variation === "link" ? "transparent" : props.theme.colors.text.muted;
}, function (props) {
  return props.variation === "link" ? props.theme.colors.baseMuted : props.theme.colors.baseWhite;
}, function (props) {
  return props.variation === "link" ? 0 : props.theme.borders.button.disabled;
});
/*
<Flex>
              <input
                disabled={importDisabled}
                style={{ display: "none" }}
                type="file"
                accept=".json, .graphql"
                id="file_upload"
                name="file_upload"
                onChange={(e) => _importFile(e)}
              />
              <Button
                disabled={importDisabled}
                variation={"file"}
                input="file_upload"
              >
                {I18n.get("Import Data Model")}
              </Button>
            </Flex>
            
*/

var FileInputElement = styled.input.attrs(function (props) {
  return {
    type: "file"
  };
}).withConfig({
  displayName: "Button__FileInputElement",
  componentId: "sc-u7scuu-1"
})(["display:none;"]);
var ButtonElement = styled.button.withConfig({
  displayName: "Button__ButtonElement",
  componentId: "sc-u7scuu-2"
})(["", " ", " ", " ", " ", ""], buttonTheme, buttonVariation, space, typography, themeColorStyles);
var Button = /*#__PURE__*/forwardRef(function (props, ref) {
  //console.log("BUTTON ", props);
  var _id = useId(props.id);

  if (props.variation === "file" && props.onChange) {
    var inputID = "blend-file-button-".concat(_id);
    props.id;
    props.name;

    var accept = props.accept,
        onChange = props.onChange,
        disabled = props.disabled,
        rest = _objectWithoutProperties(props, _excluded);

    return /*#__PURE__*/React.createElement(Flex, null, /*#__PURE__*/React.createElement(FileInputElement, {
      id: inputID,
      name: inputID,
      accept: accept,
      disabled: disabled,
      onChange: onChange
    }), /*#__PURE__*/React.createElement(ButtonElement, _extends({
      as: "label",
      htmlFor: inputID,
      ref: ref,
      disabled: disabled
    }, rest)));
  } else {
    return /*#__PURE__*/React.createElement(ButtonElement, _extends({}, props, {
      ref: ref
    }));
  }
});
Button.propTypes = _objectSpread2(_objectSpread2(_objectSpread2({
  /** Fixed width&height */
  size: PropTypes.oneOf(["xs", "sm", "md", "lg", "xl"])
}, styledProps.layout), styledProps.space), {}, {
  /** Variations */
  variation: PropTypes.oneOf(buttonVariations),

  /** Button is disabled */
  disabled: PropTypes.bool,

  /** Button is click event */
  onClick: PropTypes.func,

  /** File upload button, htmlFor input element */
  //input: PropTypes.string,

  /** Input file selected event */
  onChange: PropTypes.func,
  colorStyle: PropTypes.string
});
Button.defaultProps = {
  variation: "fill",
  size: "md"
};
Button.displayName = "Button";
Button.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "Button",
  "props": {
    "variation": {
      "defaultValue": {
        "value": "\"fill\"",
        "computed": false
      },
      "description": "Variations",
      "type": {
        "name": "enum",
        "value": [{
          "value": "\"fill\"",
          "computed": false
        }, {
          "value": "\"outline\"",
          "computed": false
        }, {
          "value": "\"link\"",
          "computed": false
        }, {
          "value": "\"file\"",
          "computed": false
        }]
      },
      "required": false
    },
    "size": {
      "defaultValue": {
        "value": "\"md\"",
        "computed": false
      },
      "description": "Fixed width&height",
      "type": {
        "name": "enum",
        "value": [{
          "value": "\"xs\"",
          "computed": false
        }, {
          "value": "\"sm\"",
          "computed": false
        }, {
          "value": "\"md\"",
          "computed": false
        }, {
          "value": "\"lg\"",
          "computed": false
        }, {
          "value": "\"xl\"",
          "computed": false
        }]
      },
      "required": false
    },
    "disabled": {
      "description": "Button is disabled",
      "type": {
        "name": "bool"
      },
      "required": false
    },
    "onClick": {
      "description": "Button is click event",
      "type": {
        "name": "func"
      },
      "required": false
    },
    "onChange": {
      "description": "Input file selected event",
      "type": {
        "name": "func"
      },
      "required": false
    },
    "colorStyle": {
      "description": "",
      "type": {
        "name": "string"
      },
      "required": false
    }
  },
  "composes": ["@styled-system/prop-types"]
};
export { Button as default };