@mapbox/mr-ui
Version:
UI components for Mapbox projects
109 lines (108 loc) • 5 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = ControlFile;
var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _omit = _interopRequireDefault(require("../utils/omit"));
var _controlWrapper = _interopRequireDefault(require("../control-wrapper"));
var _iconText = _interopRequireDefault(require("../icon-text"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
const propNames = ['id', 'onChange', 'value', 'optional', 'disabled', 'validationError', 'displayValue', 'themeControlFile', 'themeControlWrapper',
// Passed when used with the Form component
'validator'];
function ControlFile(_ref) {
let {
id,
optional = false,
disabled = false,
validationError,
displayValue = 'Select a file',
themeControlFile = 'btn',
themeControlWrapper,
children,
...props
} = _ref;
const extraProps = (0, _omit.default)(props, propNames);
const file = (0, _react.useRef)(null);
const onChange = e => {
const fileList = e.target.files;
if (!fileList.length) return;
const filesArray = [];
for (let i = 0, l = fileList.length; i < l; i++) {
filesArray.push(fileList[i]);
}
return props.onChange(filesArray, id);
};
const onButtonClick = () => {
if (!disabled) {
file.current.click();
}
};
const inputProps = {
id,
name: id,
onChange,
type: 'file',
disabled,
tabIndex: -1,
ref: file,
className: 'absolute opacity0 top left',
style: {
height: '0',
width: '0',
zIndex: -1
},
'aria-required': optional ? false : true,
'data-testid': `${id}-input`
};
if (validationError) {
inputProps['aria-invalid'] = true;
}
return /*#__PURE__*/_react.default.createElement(_controlWrapper.default, {
id: id,
themeControlWrapper: themeControlWrapper,
validationError: validationError
}, /*#__PURE__*/_react.default.createElement("div", {
className: "flex flex--center-cross overflow-hidden"
}, /*#__PURE__*/_react.default.createElement("div", {
className: "flex-child-grow"
}, /*#__PURE__*/_react.default.createElement("button", {
type: "button",
"aria-hidden": true,
disabled: disabled,
className: `${themeControlFile} relative`,
onClick: onButtonClick
}, children ? children : /*#__PURE__*/_react.default.createElement(_iconText.default, {
iconBefore: "harddrive"
}, displayValue)), /*#__PURE__*/_react.default.createElement("input", _extends({}, inputProps, extraProps)))));
}
ControlFile.propTypes = {
/** Identifying value for input element. */
id: _propTypes.default.string.isRequired,
/** Called during changes to the input element. Invoked with the array of
selected files and the id of the input. */
onChange: _propTypes.default.func.isRequired,
/** Input value */
value: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.shape({
name: _propTypes.default.string.isRequired
})), _propTypes.default.oneOf([''])]),
/** If provided the text, "(optional)" is appended to the value of the label element. */
optional: _propTypes.default.bool,
/** Pass disabled attribute */
disabled: _propTypes.default.bool,
/** If provided, the value of this propery displays as an error message. */
validationError: _propTypes.default.node,
/** Overrides the "Select a file" label. */
displayValue: _propTypes.default.node,
/** Optional child element to trigger file selection. */
children: _propTypes.default.node,
/** Assembly classes to apply to the button trigger element */
themeControlFile: _propTypes.default.string,
/** Assembly classes to apply to the control wrapper */
themeControlWrapper: _propTypes.default.string
};