1.0.0 • Published 4 years ago

ant-design-draggable-modal-fix v1.0.0

Weekly downloads
-
License
ISC
Repository
github
Last release
4 years ago

Modal from Ant Design, draggable.

Version Downloads BundlePhobia MIT License

Watch on GitHub Star on GitHub Tweet

🌎 Example

✨ Features

  • Drag with title bar.
  • Resize with handle.
  • Keep in bounds.
    • During drag.
    • During resize.
    • During resize window.
  • Multiple modals with managed zIndex.
  • Open from center.
  • Better API for using as a controlled component.
  • Open from quadrants.
  • Better escape key management.
  • Resize with option key.

📦 Install

yarn add ant-design-draggable-modal

NOTE: You must use react@16.8.0 and react-dom@16.8.0 or higher.

🔨 Usage

import React, { useState, useCallback } from 'react'
import { Button } from 'antd'
import { DraggableModal, DraggableModalProvider } from 'ant-design-draggable-modal'
import 'antd/dist/antd.css'
import 'ant-design-draggable-modal/dist/index.css'

const ModalWithButton = () => {
    const [visible, setVisible] = useState(false)
    const onOk = useCallback(() => setVisible(true), [])
    const onCancel = useCallback(() => setVisible(false), [])
    return (
        <>
            <Button onClick={onOk}>Open</Button>
            <DraggableModal visible={visible} onOk={onOk} onCancel={onCancel}>
                Body text.
            </DraggableModal>
        </>
    )
}

// DraggableModalProvider manages the zIndex
// of DraggableModals rendered beneath it.
const App = () => (
    <DraggableModalProvider>
        <ModalWithButton />
        <ModalWithButton />
        <ModalWithButton />
    </DraggableModalProvider>
)

⚠️ User Experience Warning

You should probably try to design your app not to need to use this, apps should usually not be window managers.

License

MIT © DylanVann

acceptsacorn-jsxacornajvansi-colorsacorn-walkansi-escapesansi-regexansi-stylesant-design-draggable-modalany-promiseanymatchant-design-draggable-modal-exampleababacorn-globalsadd-dom-event-listeneraria-queryargparsearr-unionarray-includesarray-equalarr-flattenarr-diffarray-tree-filterarray-unionarray-uniquearray.prototype.flatmapastral-regexassert-plusarray.prototype.flatasync-validatorasn1asyncroat-least-nodeassign-symbolsatobaws-sign2aws4babel-eslintast-types-flowbabel-plugin-dev-expressionasynckitbabel-plugin-annotate-pure-callsbabel-plugin-dynamic-import-nodebabel-plugin-istanbulbabel-plugin-macrosbabel-plugin-jest-hoistbabel-jestaxobject-queryaxe-corebabel-plugin-polyfill-regeneratorbabel-plugin-transform-rename-importbalanced-matchbabel-preset-jestbluebirdbcrypt-pbkdfbinary-extensionsbrace-expansionbracesbrotli-sizebrowser-process-hrtimebrowser-resolvebrowserslistbasebabel-preset-current-node-syntaxbuffer-frombig.jsbuiltin-modulescache-content-typecallsitesbs-loggercamelcasebsercaniuse-litechalkcache-basechokidarcall-bindcapture-exitclassnamescaselesschardetci-infoclean-csscli-cursorcli-spinnersclonecoclass-utilscollect-v8-coveragecolor-convertcli-widthcommandercliuicollection-visitcommondircompute-scroll-into-viewcomponent-emitterconsolidateconcat-mapcolor-namecombined-streamcontent-dispositioncontent-typeconvert-source-mapcookiescopy-to-clipboardcore-js-compatconfusing-browser-globalscore-js-purecontains-pathcssesccopy-descriptorcosmiconfigcssomcore-util-iscsstypecross-spawndate-fnscssstyledashdashdamerau-levenshteindayjsdebugdecamelizedecode-uri-componentdeep-equaldeepmergedata-urlsdefaultsdepddelegatesdeep-isdefine-propertiesdetect-newlinedefine-propertydestroydiff-sequencesdir-globdom-accessibility-apidom-aligndotenvdelayed-streamee-firstdotenv-expandduplexerelectron-to-chromiumemoji-regexencodeurldoctrineend-of-streamecc-jsbnenquirerdomexceptionerror-exes-module-lexeremojis-listesbuildescape-htmlescape-string-regexpeslintes-abstractes-to-primitiveeslint-config-prettierescodegenescaladeeslint-plugin-importeslint-plugin-jsx-a11yeslint-config-react-appeslint-plugin-reacteslint-import-resolver-nodeeslint-plugin-react-hookseslint-module-utilseslint-scopeeslint-utilseslint-visitor-keysespreeesqueryesrecurseestraverseestree-walkeretageslint-plugin-flowtypeexecaesutilsesprimaexitexpecteventemitter3exec-shexpand-bracketsextendfast-deep-equalextsprintffast-diffextend-shallowfast-globfast-levenshteinfast-json-stable-stringifyfastqfb-watchmanexternal-editorfile-entry-cachefill-rangeextglobfiguresfind-upfind-cache-dirflat-cacheforever-agentflattedfollow-redirectsfor-inform-datafreshfs-extrafunction-bindfs.realpathgensyncfragment-cachegeneric-namesfunctional-red-black-treeget-caller-fileget-stdinget-streamglobgetpassget-intrinsicglob-parentglobalsglobalyzerglobbyglobrexgraceful-fsget-package-typehasgrowlyhas-flagget-valuehar-schemahar-validatorhash-sumhas-symbolshoist-non-react-staticshttp-asserthas-valuehtml-encoding-snifferhttp-errorshttp-proxyhuman-signalshosted-git-infohas-valueshtml-escaperhttp-signatureignorehumanize-durationiconv-liteicss-replace-symbolsimport-cwdimport-freshimport-fromimport-localimurmurhashicss-utilsindexes-ofinflightinsert-cssinheritsinquireris-arrayishinternal-slotinterpretip-regexis-binary-pathis-ciis-core-moduleis-accessor-descriptoris-bufferis-dockeris-callableis-data-descriptoris-extglobis-date-objectis-fullwidth-code-pointis-generator-fnis-generator-functionis-globis-interactiveis-moduleis-descriptoris-referenceis-extendableis-negative-zerois-streamis-plain-objectis-regexis-numberis-stringis-wslisbuiltinis-symbolis-typedarrayisexeis-windowsistanbul-lib-coverageistanbul-lib-instrumentistanbul-lib-reportistanbul-lib-source-mapsistanbul-reportsjestisarrayisobjectjest-changed-filesjest-clijest-configjest-diffjest-docblockjest-eachjest-environment-jsdomjest-environment-nodejest-get-typejest-haste-mapjest-jasmine2jest-leak-detectorjest-matcher-utilsjest-message-utiljest-mockjest-pnp-resolverjest-regex-utiljest-resolvejest-resolve-dependenciesjest-runnerjest-runtimejest-serializerjest-snapshotjest-utiljest-validatejest-watcherjest-workerjpjsisstreamjs-tokensjs-yamljsdomjsbnjsescjson-parse-even-better-errorsjson-schema-traversejson-stable-stringify-without-jsonifyjson2mqjsonfilejest-watch-typeaheadjsprimkeygripjson-schemajson-stringify-safeklonajson5koajsx-ast-utilskoa-conditional-getkind-ofkoa-convertkoa-composekoa-etagkoa-proxieskoa-sendkoa-staticlevenlevnlines-and-columnskleurlanguage-subtag-registrylodashlanguage-tagsloader-utilsload-json-filelodash.camelcaselodash.debouncelog-symbolslodash.mergelog-updatelolexlocate-pathlower-caselru-cachelz-stringmagic-stringmake-dirlodash.memoizemakeerrorlodash.sortbymedia-typermerge-source-mapmerge-streammerge2loose-envifymicromatchmime-dbmime-typesmimic-fnmini-storemake-errormap-cacheminimatchminimistmkdirpmomentmap-visitmrimsmute-streamnatural-comparenegotiatormixin-deepno-casenode-int64node-modules-regexpnanomatchnice-trynode-notifiernode-forgenormalize-pathnpm-run-pathnode-releasesoauth-signnwsapinormalize-package-dataobject-copyobject-inspectobject-assignobject-keysobject-visitobject.entriesobject.assignomit.jsonceon-finishedonetimeobject.fromentriesobject.pickopenp-each-seriesonlyorap-limitobject.valuesp-tryparent-moduleoptionatorparse-jsonparseurlos-tmpdirp-finallypascal-casepath-existsp-locatepath-is-absoluteparse5path-matchpath-typepascalcasepath-keypicomatchpifyperformance-nowpiratespnpath-parsepostcsspath-to-regexppostcss-discard-commentspostcss-load-configpostcss-modulespostcss-importpkg-dirposix-character-classespostcss-modules-extract-importspostcss-selector-parserpostcss-value-parserprelude-lspostcss-modules-local-by-defaultpretty-formatpostcss-modules-scopeprogress-estimatorpromptsprop-typespostcss-modules-valuespumpqsprettier-linter-helpersprogressrafpslrandombytesrc-alignrc-animaterc-checkboxrc-cascaderrc-collapsepunycoderc-dialogrc-drawerrc-dropdownrc-field-formrc-imagerc-input-numberrc-mentionsrc-menurc-motionrc-notificationrc-paginationrc-pickerrc-progressrc-resize-observerrc-raterc-selectrc-stepsrc-sliderrc-switchrc-tablerc-tabsrc-textarearc-tooltiprc-treerc-tree-selectrc-triggerrc-uploadrc-utilrc-virtual-listreact-isreact-refreshreact-uidread-cacheread-pkg-upreaddirpregeneratereact-lifecycles-compatread-pkgregenerator-runtimeregenerator-transformrealpath-nativerechoirregenerate-unicode-propertiesregexpu-coreregjsgenregjsparserregex-notrequestregexppregexp.prototype.flagsremove-trailing-separatorrepeat-elementrequest-promise-nativerequire-main-filenamerepeat-stringresize-observer-polyfillresolverequest-promise-coreresolve-fromresolve-pathrequire-directoryrequires-portresolve-cwdrestore-cursorrimrafreusifyrollupresolve-urlrollup-plugin-dynamic-import-variablesrollup-plugin-sourcemapsrollup-plugin-vuerollup-plugin-terserrollup-pluginutilsrun-parallelretrun-asyncsadersvprxjssanescroll-into-view-if-neededsafe-buffersafe-regexselfsignedsemverserialize-javascriptsafer-bufferset-blockingsetprototypeofshallowequalsaxesschedulershebang-regexshelljssignal-exitset-valueslashshebang-commandshellwordsside-channelslice-ansisisteransisource-mapsnapdragonsource-map-resolvesource-map-supportsourcemap-codecsnapdragon-nodesnapdragon-utilsource-map-urlspdx-exceptionsspdx-correctsplitspdx-expression-parsespdx-license-idsstack-utilssplit-stringsprintf-jsstatusesstring-lengthstring-convertsshpkstring-hashstatic-extendstring-widthstrip-ansistrip-bomstealthy-requirestring.prototype.matchallstrip-json-commentsstrip-final-newlinesupports-colorsupports-hyperlinksstring.prototype.trimendstring.prototype.trimstartstrip-eofterminal-linktext-tableterserthroatthroughtiny-globtinycolor2symbol-treetmpto-fast-propertiesto-regex-rangetmpltabletest-excludetoidentifiertoggle-selectionto-object-pathtsdxtslibtough-cookieto-regextsscmptsutilstr46type-checktunnel-agenttype-festtype-isunicode-canonical-property-names-ecmascripttsconfig-pathsunicode-match-property-ecmascriptunicode-match-property-value-ecmascriptunicode-property-aliases-ecmascriptuniqtweetnacltype-detectuniversalifyuri-jstypedarray-to-bufferurixutil-deprecateunion-valuev8-to-istanbulunset-valuevaryuuidverrorusevite-plugin-reactv8-compile-cachevitevuewalkerwarningvalidate-npm-package-licensewcwidthw3c-hr-timew3c-xmlserializerwebidl-conversionswhichwhatwg-encodingwhatwg-mimetypewrappywhatwg-urlwhich-modulewrite-file-atomicwsword-wrapy18nwrap-ansiwriteyallistyargsyargs-parserylruxml-name-validatorxmlcharsyaml
1.0.0

4 years ago