@flexis/ui
Version:
Styleless React Components
234 lines (198 loc) • 15.4 kB
JavaScript
import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
import _URL from "@babel/runtime-corejs3/core-js-stable/url";
import _slicedToArray from "@babel/runtime-corejs3/helpers/slicedToArray";
import _extends from "@babel/runtime-corejs3/helpers/extends";
import _defineProperty from "@babel/runtime-corejs3/helpers/defineProperty";
import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/objectWithoutProperties";
import _classCallCheck from "@babel/runtime-corejs3/helpers/classCallCheck";
import _createClass from "@babel/runtime-corejs3/helpers/createClass";
import _possibleConstructorReturn from "@babel/runtime-corejs3/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime-corejs3/helpers/getPrototypeOf";
import _inherits from "@babel/runtime-corejs3/helpers/inherits";
import _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values";
function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); if (enumerableOnly) symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; _forEachInstanceProperty(_context = ownKeys(Object(source), true)).call(_context, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { var _context2; _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } } return target; }
import { __decorate } from "tslib";
import React from 'react';
var _createElement = React.createElement;
var PureComponent = React.PureComponent,
cloneElement = React.cloneElement;
import PropTypes from 'prop-types';
import { Bind, omit } from '../../helpers';
import FileSelect from '../FileSelect';
import SROnly from '../SROnly';
import { style, classes } from './ImageSelect.st.css';
export var DisplayVariant;
(function (DisplayVariant) {
DisplayVariant["Img"] = "img";
DisplayVariant["Block"] = "block";
})(DisplayVariant || (DisplayVariant = {}));
export var DisplayValues = _Object$values(DisplayVariant);
var defaultResetButton = _createElement("button", {
type: "button"
}, "\xD7");
function getDefaultState(props) {
var defaultValue = props.defaultValue;
return {
value: defaultValue,
filename: ''
};
}
var ImageSelect =
/** @class */
function () {
var ImageSelect = /*#__PURE__*/function (_PureComponent) {
_inherits(ImageSelect, _PureComponent);
function ImageSelect(props) {
var _this;
_classCallCheck(this, ImageSelect);
_this = _possibleConstructorReturn(this, _getPrototypeOf(ImageSelect).call(this, props));
_this.state = getDefaultState(props);
return _this;
}
_createClass(ImageSelect, [{
key: "render",
value: function render() {
var _style;
var _this$props = this.props,
className = _this$props.className,
elementRef = _this$props.elementRef,
styleProp = _this$props.style,
previewStyleProp = _this$props.previewStyle,
display = _this$props.display,
name = _this$props.name,
placeholder = _this$props.placeholder,
disabled = _this$props.disabled,
readOnly = _this$props.readOnly,
resetButton = _this$props.resetButton,
props = _objectWithoutProperties(_this$props, ["className", "elementRef", "style", "previewStyle", "display", "name", "placeholder", "disabled", "readOnly", "resetButton"]);
var _this$state = this.state,
value = _this$state.value,
filename = _this$state.filename;
var withPlaceholder = !value && placeholder;
var previewStyle = _objectSpread({}, previewStyleProp);
var previewImg = null;
if (value) {
if (display === DisplayVariant.Block) {
previewStyle.backgroundImage = "url(".concat(value, ")");
} else {
previewImg = _createElement("img", {
className: classes.img,
src: value
});
}
}
return _createElement(FileSelect, {
elementRef: elementRef,
style: styleProp,
className: style(classes.root, className),
name: name,
onChange: this.onChange,
disabled: disabled || readOnly
}, _createElement("button", _extends({}, omit(props, ['onChange', 'defaultValue', 'value']), {
className: style(classes.preview, (_style = {}, _defineProperty(_style, display, Boolean(display)), _defineProperty(_style, "readOnly", readOnly), _defineProperty(_style, "disabled", disabled), _style)),
style: previewStyle
}), previewImg, withPlaceholder && cloneElement(placeholder, {
className: style(classes.placeholder, placeholder.props.className)
}), _createElement(SROnly, null, _createElement("span", null, filename))), resetButton && cloneElement(resetButton, {
className: style(classes.resetButton, {
hidden: disabled || readOnly || !value
}, resetButton.props.className),
onClick: this.onReset
}));
}
}, {
key: "onChange",
value: function onChange(_ref, event) {
var _ref2 = _slicedToArray(_ref, 1),
image = _ref2[0];
var _this$props2 = this.props,
valueProp = _this$props2.value,
onChange = _this$props2.onChange,
disabled = _this$props2.disabled;
if (disabled || !image) {
return;
}
var value = this.state.value;
var nextValue = _URL.createObjectURL(image);
if (nextValue === value) {
return;
}
if (typeof valueProp === 'undefined') {
this.setState(function () {
return {
value: nextValue,
filename: image.name
};
});
}
if (typeof onChange === 'function') {
onChange(image, event);
}
}
}, {
key: "onReset",
value: function onReset(event) {
var _this2 = this;
var _this$props3 = this.props,
valueProp = _this$props3.value,
onChange = _this$props3.onChange;
var fileInput = event.target.parentElement.firstElementChild;
if (typeof valueProp === 'undefined') {
fileInput.value = null;
this.setState(function () {
return getDefaultState(_this2.props);
});
}
if (typeof onChange === 'function') {
event.target = fileInput;
onChange(null, event);
}
}
}], [{
key: "getDerivedStateFromProps",
value: function getDerivedStateFromProps(_ref3, _ref4) {
var value = _ref3.value;
var prevValue = _ref4.value;
var nextValue = typeof value === 'undefined' ? prevValue : value;
if (nextValue === prevValue) {
return null;
}
return {
value: nextValue
};
}
}]);
return ImageSelect;
}(PureComponent);
process.env.NODE_ENV !== "production" ? ImageSelect.propTypes = _objectSpread({}, FileSelect.propTypes, {
elementRef: PropTypes.func,
previewStyle: PropTypes.object,
display: PropTypes.oneOf(DisplayValues),
name: PropTypes.string,
placeholder: PropTypes.element,
defaultValue: PropTypes.string,
value: PropTypes.string,
disabled: PropTypes.bool,
readOnly: PropTypes.bool,
resetButton: PropTypes.element
}) : void 0;
ImageSelect.defaultProps = _objectSpread({}, FileSelect.defaultProps, {
display: DisplayVariant.Block,
disabled: false,
readOnly: false,
resetButton: defaultResetButton
});
__decorate([Bind()], ImageSelect.prototype, "onChange", null);
__decorate([Bind()], ImageSelect.prototype, "onReset", null);
return ImageSelect;
}();
export default ImageSelect;
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0ltYWdlU2VsZWN0L0ltYWdlU2VsZWN0LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0FBQUEsT0FBTyxLQUFQLE1BU08sT0FUUDs7OztBQVVBLE9BQU8sU0FBUCxNQUFzQixZQUF0QjtBQUNBLFNBRUMsSUFGRCxFQUdDLElBSEQsUUFJTyxlQUpQO0FBS0EsT0FBTyxVQUFQLE1BQXVCLGVBQXZCO0FBQ0EsT0FBTyxNQUFQLE1BQW1CLFdBQW5CO0FBQ0EsU0FDQyxLQURELEVBRUMsT0FGRCxRQUdPLHNCQUhQO0FBS0EsT0FBQSxJQUFZLGNBQVo7O0FBQUEsQ0FBQSxVQUFZLGNBQVosRUFBMEI7QUFDekIsRUFBQSxjQUFBLENBQUEsS0FBQSxDQUFBLEdBQUEsS0FBQTtBQUNBLEVBQUEsY0FBQSxDQUFBLE9BQUEsQ0FBQSxHQUFBLE9BQUE7QUFDQSxDQUhELEVBQVksY0FBYyxLQUFkLGNBQWMsR0FBQSxFQUFBLENBQTFCOztBQStCQSxPQUFPLElBQU0sYUFBYSxHQUFjLGVBQWMsY0FBZCxDQUFqQzs7QUFFUCxJQUFNLGtCQUFrQixHQUN2QjtBQUFRLEVBQUEsSUFBSSxFQUFDO0FBQWIsVUFERDs7QUFNQSxTQUFTLGVBQVQsQ0FBeUIsS0FBekIsRUFBc0M7QUFBQSxNQUdwQyxZQUhvQyxHQUlqQyxLQUppQyxDQUdwQyxZQUhvQztBQU1yQyxTQUFPO0FBQ04sSUFBQSxLQUFLLEVBQUssWUFESjtBQUVOLElBQUEsUUFBUSxFQUFFO0FBRkosR0FBUDtBQUlBOztBQUVELElBQUEsV0FBQTtBQUFBO0FBQUEsWUFBQTtBQUFBLE1BQXFCLFdBQXJCO0FBQUE7O0FBMENDLHlCQUFZLEtBQVosRUFBaUI7QUFBQTs7QUFBQTs7QUFFaEIsdUZBQU0sS0FBTjtBQUVBLFlBQUssS0FBTCxHQUFhLGVBQWUsQ0FBQyxLQUFELENBQTVCO0FBSmdCO0FBS2hCOztBQS9DRjtBQUFBO0FBQUEs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