@flexis/ui
Version:
Styleless React Components
268 lines (208 loc) • 16.7 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
var _Object$defineProperty2 = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
_Object$defineProperty2(exports, "__esModule", {
value: true
});
exports.default = exports.DisplayValues = exports.DisplayVariant = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/define-property"));
var _defineProperties = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/define-properties"));
var _getOwnPropertyDescriptors = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors"));
var _forEach = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/for-each"));
var _getOwnPropertyDescriptor = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor"));
var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
var _getOwnPropertySymbols = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols"));
var _keys = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/keys"));
var _url = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/url"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
var _defineProperty3 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/createClass"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/getPrototypeOf"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/inherits"));
var _values = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/values"));
var _tslib = require("tslib");
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _helpers = require("../../helpers");
var _FileSelect = _interopRequireDefault(require("../FileSelect"));
var _SROnly = _interopRequireDefault(require("../SROnly"));
var _ImageSelectSt = require("./ImageSelect.st.css");
function ownKeys(object, enumerableOnly) { var keys = (0, _keys.default)(object); if (_getOwnPropertySymbols.default) { var symbols = (0, _getOwnPropertySymbols.default)(object); if (enumerableOnly) symbols = (0, _filter.default)(symbols).call(symbols, function (sym) { return (0, _getOwnPropertyDescriptor.default)(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; (0, _forEach.default)(_context = ownKeys(Object(source), true)).call(_context, function (key) { (0, _defineProperty3.default)(target, key, source[key]); }); } else if (_getOwnPropertyDescriptors.default) { (0, _defineProperties.default)(target, (0, _getOwnPropertyDescriptors.default)(source)); } else { var _context2; (0, _forEach.default)(_context2 = ownKeys(Object(source))).call(_context2, function (key) { (0, _defineProperty2.default)(target, key, (0, _getOwnPropertyDescriptor.default)(source, key)); }); } } return target; }
var _createElement = _react.default.createElement;
var PureComponent = _react.default.PureComponent,
cloneElement = _react.default.cloneElement;
var DisplayVariant;
exports.DisplayVariant = DisplayVariant;
(function (DisplayVariant) {
DisplayVariant["Img"] = "img";
DisplayVariant["Block"] = "block";
})(DisplayVariant || (exports.DisplayVariant = DisplayVariant = {}));
var DisplayValues = (0, _values.default)(DisplayVariant);
exports.DisplayValues = DisplayValues;
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) {
(0, _inherits2.default)(ImageSelect, _PureComponent);
function ImageSelect(props) {
var _this;
(0, _classCallCheck2.default)(this, ImageSelect);
_this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(ImageSelect).call(this, props));
_this.state = getDefaultState(props);
return _this;
}
(0, _createClass2.default)(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 = (0, _objectWithoutProperties2.default)(_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: _ImageSelectSt.classes.img,
src: value
});
}
}
return _createElement(_FileSelect.default, {
elementRef: elementRef,
style: styleProp,
className: (0, _ImageSelectSt.style)(_ImageSelectSt.classes.root, className),
name: name,
onChange: this.onChange,
disabled: disabled || readOnly
}, _createElement("button", (0, _extends2.default)({}, (0, _helpers.omit)(props, ['onChange', 'defaultValue', 'value']), {
className: (0, _ImageSelectSt.style)(_ImageSelectSt.classes.preview, (_style = {}, (0, _defineProperty3.default)(_style, display, Boolean(display)), (0, _defineProperty3.default)(_style, "readOnly", readOnly), (0, _defineProperty3.default)(_style, "disabled", disabled), _style)),
style: previewStyle
}), previewImg, withPlaceholder && cloneElement(placeholder, {
className: (0, _ImageSelectSt.style)(_ImageSelectSt.classes.placeholder, placeholder.props.className)
}), _createElement(_SROnly.default, null, _createElement("span", null, filename))), resetButton && cloneElement(resetButton, {
className: (0, _ImageSelectSt.style)(_ImageSelectSt.classes.resetButton, {
hidden: disabled || readOnly || !value
}, resetButton.props.className),
onClick: this.onReset
}));
}
}, {
key: "onChange",
value: function onChange(_ref, event) {
var _ref2 = (0, _slicedToArray2.default)(_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.default.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.default.propTypes, {
elementRef: _propTypes.default.func,
previewStyle: _propTypes.default.object,
display: _propTypes.default.oneOf(DisplayValues),
name: _propTypes.default.string,
placeholder: _propTypes.default.element,
defaultValue: _propTypes.default.string,
value: _propTypes.default.string,
disabled: _propTypes.default.bool,
readOnly: _propTypes.default.bool,
resetButton: _propTypes.default.element
}) : void 0;
ImageSelect.defaultProps = _objectSpread({}, _FileSelect.default.defaultProps, {
display: DisplayVariant.Block,
disabled: false,
readOnly: false,
resetButton: defaultResetButton
});
(0, _tslib.__decorate)([(0, _helpers.Bind)()], ImageSelect.prototype, "onChange", null);
(0, _tslib.__decorate)([(0, _helpers.Bind)()], ImageSelect.prototype, "onReset", null);
return ImageSelect;
}();
var _default = ImageSelect;
exports.default = _default;
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0ltYWdlU2VsZWN0L0ltYWdlU2VsZWN0LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0FBQUE7O0FBVUE7O0FBQ0E7O0FBS0E7O0FBQ0E7O0FBQ0E7Ozs7Ozs7OztBQUtBLElBQVksY0FBWjs7O0FBQUEsQ0FBQSxVQUFZLGNBQVosRUFBMEI7QUFDekIsRUFBQSxjQUFBLENBQUEsS0FBQSxDQUFBLEdBQUEsS0FBQTtBQUNBLEVBQUEsY0FBQSxDQUFBLE9BQUEsQ0FBQSxHQUFBLE9BQUE7QUFDQSxDQUhELEVBQVksY0FBYyw4QkFBZCxjQUFjLEdBQUEsRUFBQSxDQUExQjs7QUErQk8sSUFBTSxhQUFhLEdBQWMscUJBQWMsY0FBZCxDQUFqQzs7O0FBRVAsSUFBTSxrQkFBa0IsR0FDdkI7QUFBUSxFQUFBLElBQUksRUFBQztBQUFiLFVBREQ7O0FBTUEsU0FBUyxlQUFULENBQXlCLEtBQXpCLEVBQXNDO0FBQUEsTUFHcEMsWUFIb0MsR0FJakMsS0FKaUMsQ0FHcEMsWUFIb0M7QUFNckMsU0FBTztBQUNOLElBQUEsS0FBSyxFQUFLLFlBREo7QUFFTixJQUFBLFFBQVEsRUFBRTtBQUZKLEdBQVA7QUFJQTs7QUFFRCxJQUFBLFdBQUE7QUFBQTtBQUFBLFlBQUE7QUFBQSxNQUFxQixXQUFyQjtBQUFBOztBQTBDQyx5QkFBWSxLQUFaLEVBQWlCO0FBQUE7O0FBQUE7QUFFaEIsbUhBQU0sS0FBTjtBQUVBLFlBQUssS0FBTCxHQUFhLGVBQWUsQ0FBQyxLQUFELENBQTVCO0FBSmdCO0FBS2hCOztBQS9DRjtBQUFBO0FBQUEsK0JBaURPO0FBQUE7O0FBQUEsMEJBY0QsS0FBSyxLQWRKO0FBQUEsWUFHSixTQUhJLGVBR0osU0FISTtBQUFBLFlBSUosVUFKSSxlQUlKLFVBSkk7QUFBQSxZQUtHLFNBTEgsZUFLSixLQUxJO0FBQUEsWUFN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