@amaui/ui-react
Version:
UI for React
155 lines (154 loc) • 10.8 kB
JavaScript
"use strict";
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importDefault(require("react"));
const utils_1 = require("@amaui/utils");
const style_react_1 = require("@amaui/style-react");
const IconMaterialCloseW100_1 = __importDefault(require("@amaui/icons-material-rounded-react/IconMaterialCloseW100"));
const IconMaterialDraftW100_1 = __importDefault(require("@amaui/icons-material-rounded-react/IconMaterialDraftW100"));
const IconMaterialCloudUploadW100_1 = __importDefault(require("@amaui/icons-material-rounded-react/IconMaterialCloudUploadW100"));
const IconMaterialFolderW100_1 = __importDefault(require("@amaui/icons-material-rounded-react/IconMaterialFolderW100"));
const IconMaterialFolderOpenW100_1 = __importDefault(require("@amaui/icons-material-rounded-react/IconMaterialFolderOpenW100"));
const Type_1 = __importDefault(require("../Type"));
const Button_1 = __importDefault(require("../Button"));
const IconButton_1 = __importDefault(require("../IconButton"));
const Tree_1 = __importDefault(require("../Tree"));
const Line_1 = __importDefault(require("../Line"));
const utils_2 = require("../utils");
const useStyle = (0, style_react_1.style)(theme => ({
root: {
position: 'relative'
},
input: {
position: 'absolute',
width: '0px',
height: '0px',
visibility: 'hidden'
},
files: {
width: '340px',
maxWidth: '100%'
},
file: {
maxWidth: '174px',
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap'
}
}), { name: 'amaui-FileChoose' });
const FileChoose = react_1.default.forwardRef((props_, ref) => {
const theme = (0, style_react_1.useAmauiTheme)();
const props = react_1.default.useMemo(() => { var _a, _b, _c, _d, _e, _f, _g, _h; return (Object.assign(Object.assign(Object.assign({}, (_d = (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _a === void 0 ? void 0 : _a.elements) === null || _b === void 0 ? void 0 : _b.all) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.default), (_h = (_g = (_f = (_e = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _e === void 0 ? void 0 : _e.elements) === null || _f === void 0 ? void 0 : _f.amauiFileChoose) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.default), props_)); }, [props_]);
const Line = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Line) || Line_1.default; }, [theme]);
const Type = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Type) || Type_1.default; }, [theme]);
const Button = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Button) || Button_1.default; }, [theme]);
const IconButton = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.IconButton) || IconButton_1.default; }, [theme]);
const Tree = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Tree) || Tree_1.default; }, [theme]);
const { tonal = true, color = 'default', inputRef, size = 'regular', max, allowedTypes, files, valueDefault, value: value_, multiple, accept, capture, remove = true, renderFiles, onClick, onChange: onChange_, IconStart = IconMaterialCloudUploadW100_1.default, inputProps, WrapperProps: WrapperProps_, ComponentProps: ComponentProps_, Component = Button, className, style, children = 'Choose file' } = props, other = __rest(props, ["tonal", "color", "inputRef", "size", "max", "allowedTypes", "files", "valueDefault", "value", "multiple", "accept", "capture", "remove", "renderFiles", "onClick", "onChange", "IconStart", "inputProps", "WrapperProps", "ComponentProps", "Component", "className", "style", "children"]);
const { classes } = useStyle();
const [init, setInit] = react_1.default.useState(false);
const [value, setValue] = react_1.default.useState(valueDefault !== undefined ? valueDefault : value_);
const refs = {
value: react_1.default.useRef(undefined),
input: react_1.default.useRef(undefined),
allowedTypes: react_1.default.useRef(undefined),
max: react_1.default.useRef(undefined)
};
refs.value.current = value;
refs.max.current = max;
refs.allowedTypes.current = allowedTypes;
react_1.default.useEffect(() => {
setInit(true);
}, []);
react_1.default.useEffect(() => {
if (init) {
if (value_ !== refs.value.current)
setValue(value_);
}
}, [value_]);
const onChange = react_1.default.useCallback((valueNew_) => {
let valueNew = valueNew_;
// Allowed types
if ((0, utils_1.is)('array', refs.allowedTypes.current))
valueNew = valueNew.map((item) => refs.allowedTypes.current.includes(item.name));
// Max
if (refs.max.current)
valueNew = valueNew.slice(0, refs.max.current);
if (!props.hasOwnProperty('value'))
setValue(valueNew);
if ((0, utils_1.is)('function', onChange_))
onChange_(valueNew);
}, []);
const onChangeMethod = react_1.default.useCallback((event) => {
const valueNew = Array.from(refs.input.current.files);
onChange(valueNew);
}, []);
const onRemove = (index) => {
const valueNew = [...value];
valueNew.splice(index, 1);
onChange(valueNew);
};
const onReset = (event) => {
if (refs.input.current)
refs.input.current.value = '';
if ((0, utils_1.is)('function', onClick))
onClick(event);
};
const Wrapper = files ? Line : react_1.default.Fragment;
const WrapperProps = files ? Object.assign(Object.assign(Object.assign({ ref, direction: 'column' }, WrapperProps_), { className: (0, style_react_1.classNames)([
(0, utils_2.staticClassName)('FileChoose', theme) && [
'amaui-FileChoose-root'
],
WrapperProps_ === null || WrapperProps_ === void 0 ? void 0 : WrapperProps_.className,
className,
classes.root
]) }), other) : undefined;
let ComponentProps = Object.assign({}, ComponentProps_);
if (!files) {
ComponentProps = Object.assign(Object.assign(Object.assign({}, ComponentProps), { ref, className: (0, style_react_1.classNames)([
(0, utils_2.staticClassName)('FileChoose', theme) && [
'amaui-FileChoose-root'
],
ComponentProps_ === null || ComponentProps_ === void 0 ? void 0 : ComponentProps_.className,
className,
classes.root
]) }), other);
}
return ((0, jsx_runtime_1.jsxs)(Wrapper, Object.assign({}, WrapperProps, { children: [(0, jsx_runtime_1.jsxs)(Component, Object.assign({ Component: 'label', tonal: tonal, color: color, version: 'outlined', start: ((0, jsx_runtime_1.jsx)(IconStart, {})), onClick: onReset, size: size }, ComponentProps, { children: [(0, jsx_runtime_1.jsx)("input", Object.assign({ ref: item => {
if (inputRef)
inputRef.current = item;
refs.input.current = item;
}, type: 'file', accept: accept, multiple: multiple, capture: capture, onChange: onChangeMethod }, inputProps, { className: (0, style_react_1.classNames)([
(0, utils_2.staticClassName)('FileChoose', theme) && [
'amaui-FileChoose-input'
],
inputProps === null || inputProps === void 0 ? void 0 : inputProps.className,
classes.input
]) })), children] })), files && !!(value === null || value === void 0 ? void 0 : value.length) && ((0, utils_1.is)('function', renderFiles) ? renderFiles(value, onRemove) : ((0, jsx_runtime_1.jsx)(Tree, Object.assign({ openDefault: true, icon: (0, jsx_runtime_1.jsx)(IconMaterialFolderW100_1.default, { size: 'small' }), iconOpen: (0, jsx_runtime_1.jsx)(IconMaterialFolderOpenW100_1.default, { size: 'small' }), middle: 'Files', indicator: true, indicatorPosition: 'end', className: (0, style_react_1.classNames)([
(0, utils_2.staticClassName)('FileChoose', theme) && [
'amaui-FileChoose-files'
],
classes.files
]) }, { children: value.map((item, index) => ((0, jsx_runtime_1.jsx)(Tree, { icon: (0, jsx_runtime_1.jsx)(IconMaterialDraftW100_1.default, { size: 'small' }), end: remove && ((0, jsx_runtime_1.jsx)(IconButton, Object.assign({ tonal: true, color: 'default', size: 20, fontSize: utils_2.iconFontSize, onClick: () => onRemove(index) }, { children: (0, jsx_runtime_1.jsx)(IconMaterialCloseW100_1.default, {}) }))), middle: ((0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 1, direction: 'row', align: 'center' }, { children: [(0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'b2', className: (0, style_react_1.classNames)([
(0, utils_2.staticClassName)('FileChoose', theme) && [
'amaui-FileChoose-file'
],
classes.file
]) }, { children: item.name })), (0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'b3', priority: 'secondary' }, { children: (0, utils_1.to)(item.size, 'size-format') }))] }))) }, index))) }))))] })));
});
FileChoose.displayName = 'amaui-FileChoose';
exports.default = FileChoose;