Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(DrawerList): remove use_drawer_on_mobile & enable_closest_observer #1879

Merged
merged 1 commit into from
Jan 10, 2023
Merged

feat(DrawerList): remove use_drawer_on_mobile & enable_closest_observer #1879

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 0 additions & 2 deletions ...ign-system-portal/src/docs/uilib/components/fragments/drawer-list/properties.md
View file
Open in desktop
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
Open in desktop
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 @@ -1129,7 +1128,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 @@ -1180,7 +1178,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 @@ -1201,7 +1198,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 @@ -1322,7 +1319,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 @@ -1337,7 +1334,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
Open in desktop
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
Open in desktop
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
Open in desktop
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 @@ -739,7 +738,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 @@ -788,7 +786,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 @@ -808,7 +805,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 @@ -1164,7 +1161,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 @@ -1178,7 +1175,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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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