jjb-lc-designable
Version:
基于alibaba-designable源码二次封装的表单设计器。
60 lines • 2.08 kB
JavaScript
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); }
import React, { useContext } from 'react';
import { Input, Upload } from 'antd';
import { usePrefix, IconWidget } from 'jjb-lc-designable/react';
import { SettingsFormContext } from '../../shared/context';
import cls from 'classnames';
import './styles.less';
export const ImageInput = ({
className,
style,
...props
}) => {
const prefix = usePrefix('image-input');
const context = useContext(SettingsFormContext);
return /*#__PURE__*/React.createElement("div", {
className: cls(prefix, className),
style: style
}, /*#__PURE__*/React.createElement(Input, _extends({}, props, {
onChange: e => {
props.onChange?.(e?.target?.['value']);
},
prefix: /*#__PURE__*/React.createElement(Upload, {
action: context.uploadAction,
itemRender: () => null,
maxCount: 1,
onChange: params => {
const response = params.file?.response;
const url = response?.url || response?.downloadURL || response?.imageURL || response?.thumbUrl;
if (!url) return;
props.onChange?.(url);
}
}, /*#__PURE__*/React.createElement(IconWidget, {
infer: "CloudUpload",
style: {
cursor: 'pointer'
}
}))
})));
};
export const BackgroundImageInput = props => {
const addBgValue = value => {
if (/url\([^)]+\)/.test(value)) {
return value;
}
return `url(${value})`;
};
const removeBgValue = value => {
const matched = String(value).match(/url\(\s*([^)]+)\s*\)/);
if (matched?.[1]) {
return matched?.[1];
}
return value;
};
return /*#__PURE__*/React.createElement(ImageInput, {
value: removeBgValue(props.value),
onChange: url => {
props.onChange?.(addBgValue(url));
}
});
};