Skip to content

Commit

Permalink
feat(DrawerList): remove use_drawer_on_mobile & enable_closest_observ…
Browse files Browse the repository at this point in the history 
…er (#1879)
  • Loading branch information
@langz
langz committed Feb 22, 2023
1 parent da8e656 commit fe330ba
Show file tree
Hide file tree
Showing 13 changed files with 16 additions and 227 deletions.
2 changes: 0 additions & 2 deletions ...ign-system-portal/src/docs/uilib/components/fragments/drawer-list/properties.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,4 @@ showTabs: true
| `cache_hash` | _(optional)_ set a `cache_hash` as a string to enable internal memorizing of the list to enhance rerendering performance. Components like Autocomplete is using this because of the huge data changes due to search and reorder. Defaults to `null`. |
| `wrapper_element` | _(optional)_ has to be a HTML Element, ideal a mother element, used to calculate sizes and distances. Also used for the "click outside" detection. Clicking on the `wrapper_element` will not be anymore triggered as an outside click. |
| `options_render` | _(optional)_ has to be a function, returning the items again. Se [example](/uilib/components/fragments/drawer-list#example-usage-of-options_render). This can be used to add additional options above the actual rendered list. |
| ~~`use_drawer_on_mobile`~~ | _(deprecated)_ If set to true, the DrawerList will be shown as a drawer with a fixed position, so mobile devices (`max-width: 40em`) can more easily scroll long lists and select the options. Defaults to `false`. |
| ~~`enable_closest_observer`~~ | _(deprecated)_ it set to true, an element class is set for every closest visible top and bottom item, regardless what the height of the drawer is. Defaults to false. |
| [Space](/uilib/components/space/properties) | _(optional)_ spacing properties like `top` or `bottom` are supported. |
9 changes: 3 additions & 6 deletions ...dnb-eufemia/src/components/autocomplete/__tests__/__snapshots__/Autocomplete.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -199,7 +199,6 @@ exports[`Autocomplete markup have to match snapshot 1`] = `
tagName="dnb-autocomplete"
title="title"
triangle_position={null}
use_drawer_on_mobile={null}
value={2}
wrapper_element={null}
>
Expand Down Expand Up @@ -1131,7 +1130,6 @@ exports[`Autocomplete markup have to match snapshot 1`] = `
skip_keysearch={false}
skip_portal={true}
triangle_position={null}
use_drawer_on_mobile={false}
value={2}
wrapper_element={null}
>
Expand Down Expand Up @@ -1182,7 +1180,6 @@ exports[`Autocomplete markup have to match snapshot 1`] = `
skip_keysearch={false}
skip_portal={true}
triangle_position={null}
use_drawer_on_mobile={false}
value={2}
wrapper_element={null}
>
Expand All @@ -1203,7 +1200,7 @@ exports[`Autocomplete markup have to match snapshot 1`] = `
aria-activedescendant="option-autocomplete-id-2"
aria-expanded={true}
aria-labelledby="autocomplete-id-label"
cache_hash="22undefinedundefinedbottom1"
cache_hash="2222bottom1"
class={null}
className={null}
id="autocomplete-id-ul"
Expand Down Expand Up @@ -1324,7 +1321,7 @@ exports[`Autocomplete markup have to match snapshot 1`] = `
<DrawerList.Item
active={true}
class={null}
className="last-of-type"
className="closest-to-top closest-to-bottom last-of-type"
data-item={2}
hash="option-autocomplete-id-2-2"
id="option-autocomplete-id-2"
Expand All @@ -1339,7 +1336,7 @@ exports[`Autocomplete markup have to match snapshot 1`] = `
<li
aria-current={true}
aria-selected={true}
className="last-of-type dnb-drawer-list__option dnb-drawer-list__option--selected dnb-drawer-list__option--focus"
className="closest-to-top closest-to-bottom last-of-type dnb-drawer-list__option dnb-drawer-list__option--selected dnb-drawer-list__option--focus"
data-item={2}
id="option-autocomplete-id-2"
key="lioption-autocomplete-id-2-2"
Expand Down
1 change: 0 additions & 1 deletion packages/dnb-eufemia/src/components/autocomplete/stories/Autocomplete.stories.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -389,7 +389,6 @@ export const AutocompleteSandbox = () => {
/>
<Autocomplete
mode="async"
enable_closest_observer
// label="Search"
// label_sr_only="true"
keep_value
Expand Down
2 changes: 0 additions & 2 deletions packages/dnb-eufemia/src/components/dropdown/Dropdown.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -436,7 +436,6 @@ class DropdownInstance extends React.PureComponent {
icon_size,
size,
fixed_position,
use_drawer_on_mobile,
enable_body_lock,
status,
status_state,
Expand Down Expand Up @@ -673,7 +672,6 @@ class DropdownInstance extends React.PureComponent {
is_popup={isPopupMenu || action_menu}
align_drawer={align_dropdown || 'left'}
fixed_position={fixed_position}
use_drawer_on_mobile={use_drawer_on_mobile || action_menu}
enable_body_lock={enable_body_lock}
disabled={disabled}
max_height={max_height}
Expand Down
9 changes: 3 additions & 6 deletions packages/dnb-eufemia/src/components/dropdown/__tests__/__snapshots__/Dropdown.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -222,7 +222,6 @@ exports[`Dropdown markup have to match snapshot 1`] = `
title="title"
triangle_position={null}
trigger_element={null}
use_drawer_on_mobile={null}
value={2}
variant="secondary"
wrapper_element={null}
Expand Down Expand Up @@ -741,7 +740,6 @@ exports[`Dropdown markup have to match snapshot 1`] = `
skip_keysearch={false}
skip_portal={true}
triangle_position="right"
use_drawer_on_mobile={null}
value={2}
wrapper_element={null}
>
Expand Down Expand Up @@ -790,7 +788,6 @@ exports[`Dropdown markup have to match snapshot 1`] = `
skip_keysearch={false}
skip_portal={true}
triangle_position="right"
use_drawer_on_mobile={null}
value={2}
wrapper_element={null}
>
Expand All @@ -810,7 +807,7 @@ exports[`Dropdown markup have to match snapshot 1`] = `
aria-activedescendant="option-dropdown-id-2"
aria-expanded={true}
aria-labelledby="dropdown-id-label"
cache_hash="22undefinedundefinedbottom1"
cache_hash="2277bottom1"
class={null}
className={null}
id="dropdown-id-ul"
Expand Down Expand Up @@ -1166,7 +1163,7 @@ exports[`Dropdown markup have to match snapshot 1`] = `
<DrawerList.Item
active={false}
class={null}
className="last-of-type"
className="closest-to-top closest-to-bottom last-of-type"
data-item={7}
hash="option-dropdown-id-7-7"
id="option-dropdown-id-7"
Expand All @@ -1180,7 +1177,7 @@ exports[`Dropdown markup have to match snapshot 1`] = `
>
<li
aria-selected={false}
className="last-of-type dnb-drawer-list__option"
className="closest-to-top closest-to-bottom last-of-type dnb-drawer-list__option"
data-item={7}
id="option-dropdown-id-7"
key="lioption-dropdown-id-7-7"
Expand Down
37 changes: 1 addition & 36 deletions packages/dnb-eufemia/src/components/dropdown/stories/Dropdown.stories.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -201,11 +201,7 @@ const DropdownStory = () => {
<CustomWidth>
<Box>
<Modal mode="drawer">
<Dropdown
use_drawer_on_mobile
label={label}
data={dropdownDataScrollable}
/>
<Dropdown label={label} data={dropdownDataScrollable} />
</Modal>
</Box>
<Box>
Expand All @@ -224,7 +220,6 @@ const DropdownStory = () => {
<Dropdown
size="small"
opened={opened}
use_drawer_on_mobile
// no_animation
direction={direction}
align_dropdown={align_dropdown}
Expand Down Expand Up @@ -385,9 +380,6 @@ const DropdownStory = () => {
<Box>
<CurrencyDropdown />
</Box>
<Box>
<DropdownStates />
</Box>
<Box>
<DropdownStatesSync />
</Box>
Expand Down Expand Up @@ -770,33 +762,6 @@ CurrencySelector.defaultProps = {
value: null,
}

function DropdownStates() {
const [state, setState] = React.useState({})

const handleOnChange = (props) => {
console.log('DropdownStates', props)
setState({ state: Math.random() })
}

return (
<FormRow vertical>
<>{JSON.stringify(state)}</>
<Dropdown
data={dropdownDataScrollable}
title="use_drawer_on_mobile"
use_drawer_on_mobile
on_change={handleOnChange}
/>
<Dropdown
top
data={dropdownDataScrollable}
title="Dropdown 2"
on_change={handleOnChange}
/>
</FormRow>
)
}

function DropdownStatesSync() {
const [state, setState] = React.useState({})

Expand Down
3 changes: 0 additions & 3 deletions packages/dnb-eufemia/src/fragments/drawer-list/DrawerList.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -160,7 +160,6 @@ class DrawerListInstance extends React.PureComponent {
role,
align_drawer,
fixed_position,
use_drawer_on_mobile,
independent_width,
scrollable,
focusable,
Expand Down Expand Up @@ -234,7 +233,6 @@ class DrawerListInstance extends React.PureComponent {
isTrue(scrollable) && 'dnb-drawer-list--scroll',
isTrue(no_scroll_animation) &&
'dnb-drawer-list--no-scroll-animation',
isTrue(use_drawer_on_mobile) && 'dnb-drawer-list--mobile-view',
createSpacingClasses(props),
_className,
className
Expand Down Expand Up @@ -405,7 +403,6 @@ class DrawerListInstance extends React.PureComponent {
include_owner_width={align_drawer === 'right'}
independent_width={isTrue(independent_width)}
fixed_position={isTrue(fixed_position)}
use_drawer_on_mobile={isTrue(use_drawer_on_mobile)}
className={portal_class}
>
{mainList}
Expand Down
11 changes: 1 addition & 10 deletions packages/dnb-eufemia/src/fragments/drawer-list/DrawerListHelpers.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,10 +27,7 @@ export const drawerListPropTypes = {
PropTypes.string,
PropTypes.bool,
]),
use_drawer_on_mobile: PropTypes.oneOfType([
PropTypes.string,
PropTypes.bool,
]),

prevent_selection: PropTypes.oneOfType([
PropTypes.string,
PropTypes.bool,
Expand Down Expand Up @@ -136,7 +133,6 @@ export const drawerListDefaultProps = {
size: 'default',
no_animation: false,
no_scroll_animation: false,
use_drawer_on_mobile: false,
prevent_selection: false,
action_menu: false,
is_popup: false,
Expand Down Expand Up @@ -179,10 +175,6 @@ export const drawerListDefaultProps = {

export const drawerListProviderPropTypes = {
enable_body_lock: PropTypes.bool,
use_drawer_on_mobile: PropTypes.oneOfType([
PropTypes.string,
PropTypes.bool,
]),
page_offset: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
observer_element: PropTypes.oneOfType([
PropTypes.string,
Expand All @@ -193,7 +185,6 @@ export const drawerListProviderPropTypes = {

export const drawerListProviderDefaultProps = {
enable_body_lock: false,
use_drawer_on_mobile: null,
page_offset: null,
observer_element: null,
min_height: 10, // 10rem = 10x16=160,
Expand Down
12 changes: 1 addition & 11 deletions packages/dnb-eufemia/src/fragments/drawer-list/DrawerListPortal.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,6 @@ class DrawerListPortal extends React.PureComponent {
include_owner_width: PropTypes.bool,
independent_width: PropTypes.bool,
fixed_position: PropTypes.bool,
use_drawer_on_mobile: PropTypes.bool,
className: PropTypes.string,
}

Expand All @@ -36,7 +35,6 @@ class DrawerListPortal extends React.PureComponent {
include_owner_width: false,
independent_width: false,
fixed_position: false,
use_drawer_on_mobile: false,
className: null,
}

Expand Down Expand Up @@ -245,13 +243,7 @@ class DrawerListPortal extends React.PureComponent {
}

if (typeof window !== 'undefined' && this.state.isMounted) {
const {
opened,
fixed_position,
use_drawer_on_mobile,
className,
children,
} = this.props
const { opened, fixed_position, className, children } = this.props

if (opened) {
this.addPositionObserver()
Expand All @@ -264,8 +256,6 @@ class DrawerListPortal extends React.PureComponent {
className={classnames(
'dnb-drawer-list__portal__style',
fixed_position && 'dnb-drawer-list__portal__style--fixed',
use_drawer_on_mobile &&
'dnb-drawer-list__portal__style--mobile-view',
className
)}
style={style}
Expand Down
30 changes: 3 additions & 27 deletions packages/dnb-eufemia/src/fragments/drawer-list/DrawerListProvider.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -141,11 +141,7 @@ export default class DrawerListProvider extends React.PureComponent {
}

setScrollObserver() {
if (
!isTrue(this.props.enable_closest_observer) ||
typeof window === 'undefined' ||
!this._refUl.current
) {
if (typeof window === 'undefined' || !this._refUl.current) {
return
}

Expand Down Expand Up @@ -232,7 +228,6 @@ export default class DrawerListProvider extends React.PureComponent {

const {
enable_body_lock,
use_drawer_on_mobile,
scrollable,
min_height,
max_height,
Expand All @@ -243,7 +238,6 @@ export default class DrawerListProvider extends React.PureComponent {

// const skipPortal = isTrue(skip_portal)
const useBodyLock = isTrue(enable_body_lock)
const useDrawer = isTrue(use_drawer_on_mobile)
const isScrollable = isTrue(scrollable)
const customMinHeight = parseFloat(min_height) * 16
const customMaxHeight = parseFloat(max_height) || 0
Expand Down Expand Up @@ -344,23 +338,9 @@ export default class DrawerListProvider extends React.PureComponent {
}

// debounce
this.setDirection = (e) => {
this.setDirection = () => {
clearTimeout(this._directionTimeout)
this._directionTimeout = setTimeout(renderDirection, 50)

if (e.type === 'resize') {
if (useDrawer) {
if (
!this._bodyLockIsEnabled &&
// Like @media screen and (max-width: 40em) { ...
(window.innerWidth / 16 <= 40 || window.innerHeight / 16 <= 40)
) {
this.enableBodyLock()
} else if (this._bodyLockIsEnabled && !useBodyLock) {
this.disableBodyLock()
}
}
}
}

// customElem can be a dnb-scroll-view
Expand All @@ -375,11 +355,7 @@ export default class DrawerListProvider extends React.PureComponent {
window.addEventListener('resize', this.setDirection)
}

if (
useBodyLock ||
(useDrawer && // Like @media screen and (max-width: 40em) { ...
(window.innerWidth / 16 <= 40 || window.innerHeight / 16 <= 40))
) {
if (useBodyLock) {
this.enableBodyLock()
}

Expand Down
Loading

0 comments on commit fe330ba

Please sign in to comment.