UNPKG

@react-spectrum/s2

Version:
1 lines 5.43 kB
{"mappings":";;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;AA+BM,MAAM,0DAAkB,CAAA,GAAA,oBAAY,EAAqE;AAEhH,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwBN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BC,MAAM,2CAAW,WAAW,GAAG,CAAA,GAAA,iBAAS,EAAE,SAAS,SAAS,KAAoB,EAAE,GAA2B;IAClH,IAAI,kBAAkB,CAAA,GAAA,kCAA0B,EAAE,CAAA,GAAA,+CAAW,GAAG;IAChE,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,QACF,OAAO,KACR,GAAG;IACJ,IAAI,SAAS,CAAA,GAAA,gBAAQ,EAAE;IAEvB,qBACE,gBAAC,CAAA,GAAA,eAAU;QACR,GAAG,KAAK;QACT,KAAK;QACL,OAAO,MAAM,YAAY;QACzB,WAAW,CAAA,cAAe,AAAC,CAAA,MAAM,gBAAgB,IAAI,EAAC,IAAK,+BAAS,aAAa,MAAM,MAAM;kBAC5F,CAAA,4BACC;;kCACE,gBAAC,CAAA,GAAA,yCAAwB,EAAE,QAAQ;wBAAC,OAAO;4BAAC,cAAc;4BAAM,cAAc,YAAY,YAAY;kCAAE;wBAAI;kCACzG,MAAM,QAAQ;;oBAEf,YAAY,YAAY,IAAI,MAAM,QAAQ,kBAC1C,gBAAC;wBAAI,WAAW,6BAAO;kCAAC;wBAAI;kCAC1B,cAAA,gBAAC;sCACE,MAAM,cAAc,GAAG,MAAM,cAAc,GAAG,gBAAgB,MAAM,CAAC;;;;;;AAQtF","sources":["packages/@react-spectrum/s2/src/DropZone.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {ContextValue, DropZoneRenderProps, DropZone as RACDropZone, DropZoneProps as RACDropZoneProps} from 'react-aria-components';\nimport {createContext, forwardRef, ReactNode} from 'react';\nimport {DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';\nimport {getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {IllustratedMessageContext} from './IllustratedMessage';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface DropZoneProps extends Omit<RACDropZoneProps, 'className' | 'style' | 'children' | 'isDisabled' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange'>, UnsafeStyles, DOMProps {\n /** Spectrum-defined styles, returned by the `style()` macro. */\n styles?: StylesPropWithHeight,\n /** The content to display in the drop zone. */\n children: ReactNode,\n /** Whether the drop zone has been filled. */\n isFilled?: boolean,\n /** The message to replace the default banner message that is shown when the drop zone is filled. */\n replaceMessage?: string,\n /**\n * The size of the DropZone.\n *\n * @default 'M'\n */\n size?: 'S' | 'M' | 'L'\n}\n\nexport const DropZoneContext = createContext<ContextValue<Partial<DropZoneProps>, DOMRefValue<HTMLDivElement>>>(null);\n\nconst dropzone = style<DropZoneRenderProps>({\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n position: 'relative',\n fontFamily: 'sans',\n color: 'gray-900',\n borderStyle: {\n default: 'dashed',\n isDropTarget: 'solid'\n },\n backgroundColor: {\n isDropTarget: 'blue-200'\n },\n borderWidth: 2,\n borderColor: {\n default: 'gray-300',\n isDropTarget: 'blue-800',\n isFocusVisible: 'blue-800'\n },\n borderRadius: 'lg',\n padding: 24\n}, getAllowedOverrides({height: true}));\n\nconst banner = style({\n position: 'absolute',\n left: 0,\n right: 0,\n marginX: 'auto',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n minHeight: 20,\n width: 'fit',\n maxWidth: {\n default: 192,\n size: {\n S: 160,\n L: 208\n }\n },\n backgroundColor: 'accent',\n borderRadius: 'default',\n color: 'white',\n fontWeight: 'bold',\n padding: 'calc((self(minHeight))/1.5)'\n});\n\n/**\n * A drop zone is an area into which one or multiple objects can be dragged and dropped.\n */\nexport const DropZone = /*#__PURE__*/ forwardRef(function DropZone(props: DropZoneProps, ref: DOMRef<HTMLDivElement>) {\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n [props, ref] = useSpectrumContextProps(props, ref, DropZoneContext);\n let {\n size = 'M'\n } = props;\n let domRef = useDOMRef(ref);\n\n return (\n <RACDropZone\n {...props}\n ref={domRef}\n style={props.UNSAFE_style}\n className={renderProps => (props.UNSAFE_className || '') + dropzone(renderProps, props.styles)}>\n {renderProps => (\n <>\n <IllustratedMessageContext.Provider value={{isInDropZone: true, isDropTarget: renderProps.isDropTarget, size}}>\n {props.children}\n </IllustratedMessageContext.Provider>\n {(renderProps.isDropTarget && props.isFilled) &&\n <div className={banner({size})}>\n <span>\n {props.replaceMessage ? props.replaceMessage : stringFormatter.format('dropzone.replaceMessage')}\n </span>\n </div>\n }\n </>\n )}\n </RACDropZone>\n );\n});\n"],"names":[],"version":3,"file":"DropZone.mjs.map"}