react-component / drawer Goto Github PK

how to change the appearance of the open and close button (the handler) of the drawer?

Now placement right works correct, but drawer mask isn't shown
Thanks

can it as http://negomi.github.io/react-burger-menu/ with mode Slide ?

how i can know the state of the drawer? opened or close it? it will be useful if you can not only set the state of the drawer but also get the current state.

I am using antd.Drawer and I am trying to add a data-* attribute to it like so:

<Drawer data-test-id="something">...

Unfortunately that attribute doesn't get reflected in the DOM so my automated tests aren't able to locate the element.

Other attrs like aria-* would probably also be appreciated.

Cannot read property 'name' of null

        (fn as any) as SentryWrappedFunction,
        {
          mechanism: {
            data: {
              function: 'addEventListener',
              handler: ((fn as any) as SentryWrappedFunction).name || '<anonymous>',
              target,
            },
            handled: true,
            type: 'instrument',
          },

This is rather specific but it might also impact other packages. I haven't yet figured out the source of the issue but the core of it is related to having a react tags element within an rc-drawer.

The drawer will not load the css transitions, and therefore it will be rendered next to the drawer content.

I'll try to figure out where the issue is coming from.

For width/height of .ant-drawer-content-wrapper.

ant-design/ant-design#11298

现在有个需求，drawer中有大量的数据，而这些数据会超过整个屏幕，因为禁止了touchmove，所以整个body不能下拉，包括drawer中，所以能解决下吗

By adding the sentry lib with the following guide:
https://docs.sentry.io/platforms/javascript/react/

I have an error display on the browser console with the Drawer component: "rc-drawer": "^1.7.8"

breadcrumbs.js:81 Uncaught TypeError: Cannot read property 'handleEvent' of null
    at breadcrumbs.js:81
    at ProxyComponent.componentDidMount (Drawer.js:49)

Drawer.js
window.addEventListener('test', null, Object.defineProperty({}, 'passive', {
          get: function get() {
            passiveSupported = true;
            return null;
          }
        }));

problem ：multilple example can't work in online demo~ please check this out

problem action: open second leve，(click the button is invalid)

Bottom scroll is shown while drawer is closing for a few seconds;

Hello,

I am trying i18n for drawer component. So I switch dir between ltr and rtl. Also I put drawer position to left for ltr and right for rtl. It works correctly for ltr but the css got mess up for rtl. Need some help...

<Drawer
        className={style.sideBar}
        level={null}
        onHandleClick={this.onCollapse}
        onMaskClick={this.onCollapse}
        open={!collapsed}
        placement={locale === 'ar' ? 'right' : 'left'}
        width={256}
/>

Best Regards,
F. Tahir

I've upgraded rc-drawer-menu (0.5.7 => 1.0.1) in my project and changed its props to adapt to the new API

<DrawerMenu
  level={null}
  handleChild={false}
  open={!props.collapsed}
  getContainer={null}
  onMaskClick={() => {
    props.onCollapse(true);
  }}
>
  <SiderMenu {...props} />
</DrawerMenu>

It gives me a warning like this:

It seems like handleChild supports a boolean value in API doc.

Then I found Drawer.propTypes config in rc-drawer-menu/lib/Drawer.js

Drawer.propTypes = {
 // only element
  handleChild: _propTypes2['default'].element,
};

I wonder if it caused this warning.

I was looking at the bundlephobia for this library and found that about half of the footprint is core-js. But I can't find a single reference to core-js anywhere in the source code. Is it necessary?

Do you currently offer support for typescript? If not, would you consider supporting?

滚动示例

https://github.com/ant-design/ant-design/blob/5fd4139661559aae9caf8e495192d4d7181953c8/components/affix/__tests__/Affix.test.js#L59

https://github.com/ant-design/ant-design/blob/15e69d09ca622f201af6fbb44fc577855fa5cfdb/components/back-top/__tests__/index.test.js

Hi,

I get the following error after updating to the latest version.

./node_modules/rc-drawer/es/Drawer.js
372:16-29 './utils' does not contain an export named 'transitionStr'.

The compile error can be fixed by removing "transitionStr" from the import statement in Drawer.js.
import { dataToArray, transitionEnd, transitionStr, addEventListener, removeEventListener, transformArguments, isNumeric } from './utils';

Could you please check this?

现状：看了一下源码，似乎只要在业务代码中中增加了Drawer，就一定会在初始化的时候加载了Drawer通过protal生成的DOM节点
期待：(在没有按钮的外置情况下)，希望能够提供默认初始化不生成DOM节点的能力，类似于Modal。

Hello, first of all thanks for great plugin :) I need to make little customization and I need your help.
How can I disable or remove behavior with first Drawer which pushs my whole app to the left when its open ? It would be great to make it only overlap app without pushing it :)

I am getting this error window is not defined. I use Antd and Next.js framework with server side rendering. the window object is undefined when rendering at the server side.

(node:3627) UnhandledPromiseRejectionWarning: ReferenceError: window is not defined
at Object. (/var/app/current/node_modules/rc-drawer/lib/Drawer.js:60:17)
at Module._compile (internal/modules/cjs/loader.js:688:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:699:10)
at Module.load (internal/modules/cjs/loader.js:598:32)
at tryModuleLoad (internal/modules/cjs/loader.js:537:12)
at Function.Module._load (internal/modules/cjs/loader.js:529:3)
at Module.require (internal/modules/cjs/loader.js:636:17)
at require (internal/modules/cjs/helpers.js:20:18)
at Object. (/var/app/current/node_modules/rc-drawer/lib/index.js:7:15)
at Module._compile (internal/modules/cjs/loader.js:688:30)

L260

如题，隐藏 html, body 滚动条的情况下由于计算了滚动条宽度，右侧会出现白边，最好能加个选项设置是否忽略滚动条，默认设置计算滚动条。

另外在组件 componentWillUnmount 时候没有还原 body 宽度！

if I set the prefix this does not affect to the handler, example prefixCls='mydrawer'
. it is right? maybe that's what it's meant to be?
https://codesandbox.io/s/ykq7rlzmz9

translateX is set 320px but must be 303px because 17px of scroll is visible as you can see on first screen. Please check it

{state.brokenLayout ? (
  <DrawerMenu
    parent={null}
    level={null}
    iconChild={null}
    handleChild={false}
    open={!state.collapsed}
    onMaskClick={this.collapseMenu}
  >
    <SiderMenu
      collapsed={state.collapsed}
      collapsedWidth={state.collapsedWidth}
      openKeys={state.openKeys}
      selectedKeys={state.selectedKeys}
      onCollapsed={this.collapseMenu}
      onUncollapsed={this.uncollapseMenu}
      onClick={this.handleSelectChange}
      onOpenChange={this.handleOpenChange}
    />
  </DrawerMenu>
) : (
  <SiderMenu
    collapsed={state.collapsed}
    collapsedWidth={state.collapsedWidth}
    openKeys={state.openKeys}
    selectedKeys={state.selectedKeys}
    onCollapsed={this.collapseMenu}
    onUncollapsed={this.uncollapseMenu}
    onClick={this.handleSelectChange}
    onOpenChange={this.handleOpenChange}
  />
)}

Just change component layout with matchMedia

@warmhug https://www.npmjs.com/package/rc-drawer

i can not place the handler an the menu. when i do it it hidden from screen

Hi,
It is possible to have a drawer initialising only inside an element for example, drawer inside a div tag.

Here is some sample:

https://codesandbox.io/s/r5x6qnml6p

对比下面两个例子

https://codesandbox.io/s/z2yoq63q3p

https://react-component.github.io/drawer-menu/examples/simple.html

Hello,
I changed from rc-drawer-menu to rc-drawer and it seems that the calculation for the body width is wrong.
It always subtracts the scrollbar width, even when there's no scrollbar visible. In my case, the page has a 17px space on the right when opening the sidebar.

https://codesandbox.io/s/9z3zrz3814
I can not changing color of the Handler. [X] in the sample is black but i need the wihte when drawer is opened.

I face up this error when the component auto update minor verion:
'transitionStr' is not exported from './utils'.

I think problem is typo mismatch trnasitionStr and transitionStr. Please help to take a look. Thanks!

Content block (内容区块) https://react-component.github.io/drawer/examples/change-remove.html

I can see scrollbars in the examples of rc-drawer website, as well as my experiment with drawer.
I really want to get rid of the scrollbar at the bottom.

It is appearing only on initial render of an Drawer, after the error everything seems to work fine. I've tested in on 3.10.4 and 3.16.1. Any idea how to solve this?

Usage:
<Drawer title={drawerHeaderText} width={drawerWidth} onClose={this.onClose} visible={store && store.drawerOpened}> <div className="drawer-inside-wrapper"> <AddToCartForm/> {this.renderProceedButton()} <CartView/> </div> </Drawer>

Potentially related to #39

Currently getting this error after updating to the newest version.

Uncaught TypeError: Cannot read property 'x' of undefined
    at HTMLDivElement.removeMoveHandler (Drawer.js:372)

In [email protected], when I use SSR, I got:

document is not defined
at Drawer.setLevelDomTransform (/usr/src/app/node_modules/rc-drawer/lib/Drawer.js:420:17)
...

I think we need to modify here to fix this.

when i do
handler={(<div className="mydrawer-handle"><i className="mydrawer-handle-icon" /></div>) }
the drawer handler is not visible because it shifts to the left by the width of the drawer itself. although css is the same for both values.. in the css file
.mydrawer-handle { position: absolute; top: 52px; width: 41px; height: 40px; cursor: pointer; pointer-events: auto; z-index: 1; text-align: center; line-height: 40px; font-size: 16px; display: -ms-flexbox; display: flex; -ms-flex-pack: center; justify-content: center; -ms-flex-align: center; align-items: center; background: transparent; transition: right 0.3s; } .mydrawer-handle-icon { width: 24px; height: 1px; background: #999; position: relative; transition: background 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86); }

and does not change its appearance and position when opened.
https://codesandbox.io/s/ykq7rlzmz9

I get this error when I drag the cursor over the mask.

Drawer.js:132 [Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/5093566007214080
Drawer._this.removeScroll @ Drawer.js:132```

after updating the drawer to a new version and changing the prefix 'prefixCls="mydrawer"', the handler stopped responding to clicks and does not work https://codesandbox.io/s/ykq7rlzmz9

I've recently start using the Drawer component, and coulnd't be able to unmount it. When ever I try there's an error:

Uncaught (in promise) TypeError: this.renderComponent is not a function
at Drawer.componentWillUnmount (Drawer.js:114)
at ReactCompositeComponent.js:406
at measureLifeCyclePerf (ReactCompositeComponent.js:73)
at ReactCompositeComponentWrapper.unmountComponent (ReactCompositeComponent.js:405)
at Object.unmountComponent (ReactReconciler.js:76)
at Object.unmountChildren (ReactChildReconciler.js:144)
at ReactDOMComponent.unmountChildren (ReactMultiChild.js:369)
at ReactDOMComponent.unmountComponent (ReactDOMComponent.js:992)
at Object.unmountComponent (ReactReconciler.js:76)
at ReactCompositeComponentWrapper.unmountComponent (ReactCompositeComponent.js:415)

I have been trying to reproduce the error in jsfiddle or something, but I'm pretty new to React and could find a way to do this. If someone could help with reproducing the error, that would be great, and also, how to fix it :).

I import the rc-drawer directly and don't use antd.Drawer because I'm usnig previous version of antd.

I'm using versions:
"rc-drawer": "^1.6.2",
"react": "^15.6.1",
"antd": "2.13.11",

https://codesandbox.io/s/9z3zrz3814 I can not put the handler that it is always located on the 1/3 of the window width when you change the window width when the menu is closed

Hello guys
I have the following problem:

Styles applying even when I'm not using the component on the page

I thought about solving this by applying styled-components, what do you think?

Greetings.

I'm getting an error that document is not defined. I did a ReferenceError: Document is not defined React search and it seems that document doesn't exist when rendered on the server. I'm using a plain instance of Apollo Universal Starter Kit.

backend error { ReferenceError: document is not defined
at Drawer._this.setLevelDomTransform (/home/adam/PhpstormProjects/joboty-admin/node_modules/rc-drawer-menu/lib/Drawer.js:215:9)
at Drawer._this.getChildToRender (/home/adam/PhpstormProjects/joboty-admin/node_modules/rc-drawer-menu/lib/Drawer.js:247:15)
at Drawer.render (/home/adam/PhpstormProjects/joboty-admin/node_modules/rc-drawer-menu/lib/Drawer.js:353:27)
at walkTree (/home/adam/PhpstormProjects/joboty-admin/node_modules/react-apollo/getDataFromTree.js:36:32)
at walkTree (/home/adam/PhpstormProjects/joboty-admin/node_modules/react-apollo/getDataFromTree.js:50:17)
at /home/adam/PhpstormProjects/joboty-admin/node_modules/react-apollo/getDataFromTree.js:61:21
at forEachSingleChild (/home/adam/PhpstormProjects/joboty-admin/node_modules/react/cjs/react.development.js:858:8)
at traverseAllChildrenImpl (/home/adam/PhpstormProjects/joboty-admin/node_modules/react/cjs/react.development.js:762:5)
at traverseAllChildrenImpl (/home/adam/PhpstormProjects/joboty-admin/node_modules/react/cjs/react.development.js:778:23)
at traverseAllChildren (/home/adam/PhpstormProjects/joboty-admin/node_modules/react/cjs/react.development.js:833:10)
at Object.forEachChildren [as forEach] (/home/adam/PhpstormProjects/joboty-admin/node_modules/react/cjs/react.development.js:878:3)
at walkTree (/home/adam/PhpstormProjects/joboty-admin/node_modules/react-apollo/getDataFromTree.js:59:22)
at walkTree (/home/adam/PhpstormProjects/joboty-admin/node_modules/react-apollo/getDataFromTree.js:50:17)
at walkTree (/home/adam/PhpstormProjects/joboty-admin/node_modules/react-apollo/getDataFromTree.js:50:17)
at walkTree (/home/adam/PhpstormProjects/joboty-admin/node_modules/react-apollo/getDataFromTree.js:50:17)
at walkTree (/home/adam/PhpstormProjects/joboty-admin/node_modules/react-apollo/getDataFromTree.js:50:17) queryErrors: [ [Circular] ] }

on version1.10.1，you use {...props} in the Drawer.js，its easy to resulted warning “warning: React does not recognize the xxx prop on a DOM element ” when i pass some other props to the component,so could you make a change to it ?

periodically, when navigating between pages, a white blank field appears instead of the page content and an error occurs
`TypeError: e.dom is undefined Drawer.js:358
k/this.setLevelDomTransform Drawer.js:358
O</t.prototype.componentWillUnmount Drawer.js:106'

before using the drawer and after the shutdown, this did not happen

string 358 of the Drawer.js is
_this3.dom.style.transition = 'none';

in my app
<Drawer level = 'null' prefixCls={isMain ? 'mydrawer' : 'drawer'} >

The CSS keyframe name used is pretty common, and can conflict with other libraries causing odd fade-in animations.

if I did prefixCls='mydrawer' then the class of the handler does not change from drawer-handle to drawer-handle drawer-open when you open the drawer and strips do not become cross.