@kiwicom/orbit-components
Version:
Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com’s products.
206 lines (194 loc) • 7.45 kB
JavaScript
import * as React from "react";
import styled, { css } from "styled-components";
import defaultTheme from "../defaultTheme";
import Button from "../Button";
import ButtonLink from "../ButtonLink";
import FormLabel from "../FormLabel";
import ErrorFormTooltip from "../ErrorFormTooltip";
import Attachment from "../icons/Attachment";
import CloseCircle from "../icons/CloseCircle";
import { rtlSpacing } from "../utils/rtl";
import getSpacingToken from "../common/getSpacingToken";
import getFieldDataState from "../common/getFieldDataState";
import formElementFocus from "../InputField/helpers/formElementFocus";
import useErrorTooltip from "../ErrorFormTooltip/hooks/useErrorTooltip";
import mq from "../utils/mediaQuery";
var Field = styled.label.withConfig({
displayName: "InputFile__Field",
componentId: "sc-12oq9bq-0"
})(["font-family:", ";display:block;position:relative;width:100%;margin-bottom:", ";"], function (_ref) {
var theme = _ref.theme;
return theme.orbit.fontFamily;
}, getSpacingToken); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198
Field.defaultProps = {
theme: defaultTheme
};
var FakeInput = styled(function (_ref2) {
var children = _ref2.children,
className = _ref2.className;
return /*#__PURE__*/React.createElement("div", {
className: className
}, children);
}).withConfig({
displayName: "InputFile__FakeInput",
componentId: "sc-12oq9bq-1"
})(["box-sizing:border-box;display:flex;align-items:center;padding:", ";height:", ";box-shadow:inset 0 0 0 ", ";background-color:", ";transition:box-shadow ", " ease-in-out;border-radius:6px;", ";&:hover{box-shadow:inset 0 0 0 ", ";}"], function (_ref3) {
var theme = _ref3.theme;
return rtlSpacing(theme.orbit.paddingInputFile);
}, function (_ref4) {
var theme = _ref4.theme;
return theme.orbit.heightInputNormal;
}, function (_ref5) {
var theme = _ref5.theme,
error = _ref5.error;
return "".concat(theme.orbit.borderWidthInput, " ").concat(error ? theme.orbit.borderColorInputError : theme.orbit.borderColorInput);
}, function (_ref6) {
var theme = _ref6.theme;
return theme.backgroundInput;
}, function (_ref7) {
var theme = _ref7.theme;
return theme.orbit.durationFast;
}, mq.tablet(css(["border-radius:", ";"], function (_ref8) {
var theme = _ref8.theme;
return theme.orbit.borderRadiusNormal;
})), function (_ref9) {
var theme = _ref9.theme,
error = _ref9.error;
return "".concat(theme.orbit.borderWidthInput, " ").concat(error ? theme.orbit.paletteRedNormalHover : theme.orbit.borderColorInputHover);
}); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198
FakeInput.defaultProps = {
theme: defaultTheme
};
var Input = styled.input.withConfig({
displayName: "InputFile__Input",
componentId: "sc-12oq9bq-2"
})(["opacity:0;position:absolute;height:0;&:focus ~ ", "{", "}"], FakeInput, formElementFocus); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198
Input.defaultProps = {
theme: defaultTheme
};
var getFileInputColor = function getFileInputColor(_ref10, theme) {
var error = _ref10.error,
fileName = _ref10.fileName;
if (error) {
return theme.orbit.paletteRedNormal;
}
if (fileName) {
return theme.orbit.colorTextInput;
}
return theme.orbit.paletteInkLight;
};
var StyledFileInput = styled.div.withConfig({
displayName: "InputFile__StyledFileInput",
componentId: "sc-12oq9bq-3"
})(["font-family:", ";color:", ";width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:", ";"], function (_ref11) {
var theme = _ref11.theme;
return theme.orbit.fontFamily;
}, function (_ref12) {
var error = _ref12.error,
fileName = _ref12.fileName,
theme = _ref12.theme;
return getFileInputColor({
error: error,
fileName: fileName
}, theme);
}, function (_ref13) {
var theme = _ref13.theme;
return rtlSpacing("0 0 0 ".concat(theme.orbit.spaceSmall));
}); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198
StyledFileInput.defaultProps = {
theme: defaultTheme
};
var InputFile = /*#__PURE__*/React.forwardRef(function (props, ref) {
var _props$placeholder = props.placeholder,
placeholder = _props$placeholder === void 0 ? "No file selected" : _props$placeholder,
_props$buttonLabel = props.buttonLabel,
buttonLabel = _props$buttonLabel === void 0 ? "Select file" : _props$buttonLabel,
required = props.required,
onRemoveFile = props.onRemoveFile,
dataTest = props.dataTest,
spaceAfter = props.spaceAfter,
help = props.help,
error = props.error,
onFocus = props.onFocus,
onBlur = props.onBlur,
name = props.name,
label = props.label,
onChange = props.onChange,
allowedFileTypes = props.allowedFileTypes,
tabIndex = props.tabIndex,
fileName = props.fileName,
insideInputGroup = props.insideInputGroup;
var _useErrorTooltip = useErrorTooltip({
onFocus: onFocus
}),
tooltipShown = _useErrorTooltip.tooltipShown,
tooltipShownHover = _useErrorTooltip.tooltipShownHover,
setTooltipShown = _useErrorTooltip.setTooltipShown,
setTooltipShownHover = _useErrorTooltip.setTooltipShownHover,
labelRef = _useErrorTooltip.labelRef,
iconRef = _useErrorTooltip.iconRef,
handleFocus = _useErrorTooltip.handleFocus;
var shown = tooltipShown || tooltipShownHover;
return /*#__PURE__*/React.createElement(Field, {
spaceAfter: spaceAfter,
ref: label ? null : labelRef
}, /*#__PURE__*/React.createElement(Input, {
"data-test": dataTest,
"aria-required": required,
"data-state": insideInputGroup && typeof error === "undefined" ? undefined : getFieldDataState(!!props.error),
type: "file",
name: name,
error: error,
onChange: onChange,
onFocus: handleFocus,
onBlur: onBlur,
accept: allowedFileTypes,
tabIndex: tabIndex
}), label && /*#__PURE__*/React.createElement(FormLabel, {
filled: !!fileName,
error: !!error,
help: !!help,
labelRef: labelRef,
iconRef: iconRef,
onMouseEnter: function onMouseEnter() {
return setTooltipShownHover(true);
},
onMouseLeave: function onMouseLeave() {
return setTooltipShownHover(false);
}
}, label), /*#__PURE__*/React.createElement(FakeInput, {
error: error
}, /*#__PURE__*/React.createElement(Button, {
type: "secondary",
size: "small",
iconLeft: /*#__PURE__*/React.createElement(Attachment, null),
asComponent: "div",
role: "button"
}, buttonLabel), /*#__PURE__*/React.createElement(StyledFileInput, {
fileName: fileName,
error: error,
ref: ref
}, fileName || placeholder), fileName && /*#__PURE__*/React.createElement(ButtonLink, {
type: "primary",
compact: true,
iconLeft: /*#__PURE__*/React.createElement(CloseCircle, {
ariaLabel: "remove",
color: "secondary"
}),
onClick: function onClick(ev) {
ev.preventDefault();
if (onRemoveFile) {
onRemoveFile();
}
}
})), !insideInputGroup && /*#__PURE__*/React.createElement(ErrorFormTooltip, {
help: help,
error: error,
inputSize: "normal",
referenceElement: label ? iconRef : labelRef,
shown: shown,
onShown: setTooltipShown
}));
});
InputFile.displayName = "InputFile";
export default InputFile;