@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.
237 lines (202 loc) • 8.45 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var React = _interopRequireWildcard(require("react"));
var _styledComponents = _interopRequireWildcard(require("styled-components"));
var _defaultTheme = _interopRequireDefault(require("../defaultTheme"));
var _Button = _interopRequireDefault(require("../Button"));
var _ButtonLink = _interopRequireDefault(require("../ButtonLink"));
var _FormLabel = _interopRequireDefault(require("../FormLabel"));
var _ErrorFormTooltip = _interopRequireDefault(require("../ErrorFormTooltip"));
var _Attachment = _interopRequireDefault(require("../icons/Attachment"));
var _CloseCircle = _interopRequireDefault(require("../icons/CloseCircle"));
var _rtl = require("../utils/rtl");
var _getSpacingToken = _interopRequireDefault(require("../common/getSpacingToken"));
var _getFieldDataState = _interopRequireDefault(require("../common/getFieldDataState"));
var _formElementFocus = _interopRequireDefault(require("../InputField/helpers/formElementFocus"));
var _useErrorTooltip2 = _interopRequireDefault(require("../ErrorFormTooltip/hooks/useErrorTooltip"));
var _mediaQuery = _interopRequireDefault(require("../utils/mediaQuery"));
var Field = _styledComponents.default.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.default); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198
Field.defaultProps = {
theme: _defaultTheme.default
};
var FakeInput = (0, _styledComponents.default)(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 (0, _rtl.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;
}, _mediaQuery.default.tablet((0, _styledComponents.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.default
};
var Input = _styledComponents.default.input.withConfig({
displayName: "InputFile__Input",
componentId: "sc-12oq9bq-2"
})(["opacity:0;position:absolute;height:0;&:focus ~ ", "{", "}"], FakeInput, _formElementFocus.default); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198
Input.defaultProps = {
theme: _defaultTheme.default
};
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 = _styledComponents.default.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 (0, _rtl.rtlSpacing)("0 0 0 ".concat(theme.orbit.spaceSmall));
}); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198
StyledFileInput.defaultProps = {
theme: _defaultTheme.default
};
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 = (0, _useErrorTooltip2.default)({
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 : (0, _getFieldDataState.default)(!!props.error),
type: "file",
name: name,
error: error,
onChange: onChange,
onFocus: handleFocus,
onBlur: onBlur,
accept: allowedFileTypes,
tabIndex: tabIndex
}), label && /*#__PURE__*/React.createElement(_FormLabel.default, {
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.default, {
type: "secondary",
size: "small",
iconLeft: /*#__PURE__*/React.createElement(_Attachment.default, null),
asComponent: "div",
role: "button"
}, buttonLabel), /*#__PURE__*/React.createElement(StyledFileInput, {
fileName: fileName,
error: error,
ref: ref
}, fileName || placeholder), fileName && /*#__PURE__*/React.createElement(_ButtonLink.default, {
type: "primary",
compact: true,
iconLeft: /*#__PURE__*/React.createElement(_CloseCircle.default, {
ariaLabel: "remove",
color: "secondary"
}),
onClick: function onClick(ev) {
ev.preventDefault();
if (onRemoveFile) {
onRemoveFile();
}
}
})), !insideInputGroup && /*#__PURE__*/React.createElement(_ErrorFormTooltip.default, {
help: help,
error: error,
inputSize: "normal",
referenceElement: label ? iconRef : labelRef,
shown: shown,
onShown: setTooltipShown
}));
});
InputFile.displayName = "InputFile";
var _default = InputFile;
exports.default = _default;