@yamada-ui/react
Version:
React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion
94 lines (90 loc) • 3.92 kB
JavaScript
"use client";
const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
const require_factory = require('../../core/system/factory.cjs');
const require_create_component = require('../../core/components/create-component.cjs');
const require_portal = require('../portal/portal.cjs');
const require_use_loading_component = require('../loading/use-loading-component.cjs');
const require_use_input_border = require('../input/use-input-border.cjs');
const require_fade = require('../fade/fade.cjs');
const require_dropzone_style = require('./dropzone.style.cjs');
const require_use_dropzone = require('./use-dropzone.cjs');
let react = require("react");
react = require_rolldown_runtime.__toESM(react);
let react_jsx_runtime = require("react/jsx-runtime");
react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
//#region src/components/dropzone/dropzone.tsx
const { ComponentContext, PropsContext: DropzonePropsContext, useComponentContext, usePropsContext: useDropzonePropsContext, withContext, withProvider } = require_create_component.createSlotComponent("dropzone", require_dropzone_style.dropzoneStyle);
/**
* `Dropzone` is a component used for uploading files via drag and drop.
*
* @see https://yamada-ui.com/docs/components/dropzone
*/
const DropzoneRoot = withProvider(({ children, errorBorderColor, focusBorderColor, loadingScheme, inputProps, loadingProps, overlayProps,...rest }) => {
const varProps = require_use_input_border.useInputBorder({
errorBorderColor,
focusBorderColor
});
const { dragAccept, dragIdle, dragReject, loading, getInputProps, getRootProps } = require_use_dropzone.useDropzone(rest);
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ComponentContext, {
value: (0, react.useMemo)(() => ({
dragAccept,
dragIdle,
dragReject,
loading
}), [
dragAccept,
dragIdle,
dragReject,
loading
]),
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_portal.Portal, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.styled.input, { ...getInputProps(inputProps) }) }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_factory.styled.div, {
"data-group": true,
...varProps,
...getRootProps(),
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DropzoneOverlay, {
...overlayProps,
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DropzoneLoading, {
loadingScheme,
...loadingProps
})
}), children]
})]
});
}, "root")();
const DropzoneIcon = withContext("svg", "icon")();
const DropzoneTitle = withContext("p", "title")();
const DropzoneDescription = withContext("p", "description")();
const DropzoneOverlay = withContext(require_fade.Fade, "overlay")(void 0, (props) => {
const { loading } = useComponentContext();
return {
open: loading,
unmountOnExit: true,
...props
};
});
const DropzoneLoading = withContext(({ loadingScheme = "oval",...rest }) => {
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_use_loading_component.useLoadingComponent(loadingScheme), { ...rest });
}, "loading")();
const DropzoneAccept = ({ children }) => {
const { dragAccept } = useComponentContext();
return dragAccept ? children : null;
};
const DropzoneReject = ({ children }) => {
const { dragReject } = useComponentContext();
return dragReject ? children : null;
};
const DropzoneIdle = ({ children }) => {
const { dragIdle } = useComponentContext();
return dragIdle ? children : null;
};
//#endregion
exports.DropzoneAccept = DropzoneAccept;
exports.DropzoneDescription = DropzoneDescription;
exports.DropzoneIcon = DropzoneIcon;
exports.DropzoneIdle = DropzoneIdle;
exports.DropzonePropsContext = DropzonePropsContext;
exports.DropzoneReject = DropzoneReject;
exports.DropzoneRoot = DropzoneRoot;
exports.DropzoneTitle = DropzoneTitle;
exports.useDropzonePropsContext = useDropzonePropsContext;
//# sourceMappingURL=dropzone.cjs.map