diff --git a/package.json b/package.json index f89661d..bb51d86 100644 --- a/package.json +++ b/package.json @@ -20,6 +20,7 @@ "@solid-primitives/i18n": "^1.4.1", "@solid-primitives/keyed": "^1.2.0", "@solid-primitives/media": "^2.2.5", + "@solid-primitives/resize-observer": "^2.0.21", "@solid-primitives/storage": "^2.1.1", "@solid-primitives/timer": "^1.3.7", "@solid-primitives/websocket": "^1.1.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index c1f2fb2..d338b81 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -32,6 +32,9 @@ dependencies: '@solid-primitives/media': specifier: ^2.2.5 version: 2.2.5(solid-js@1.7.11) + '@solid-primitives/resize-observer': + specifier: ^2.0.21 + version: 2.0.21(solid-js@1.7.11) '@solid-primitives/storage': specifier: ^2.1.1 version: 2.1.1(solid-js@1.7.11) @@ -2627,6 +2630,21 @@ packages: solid-js: 1.7.11 dev: false + /@solid-primitives/resize-observer@2.0.21(solid-js@1.7.11): + resolution: + { + integrity: sha512-73k3hfk6qSW4ok18DSHytHmbXh5vP1SXIBLu8N0lW6khhlHGdWt2q5Zu4iLhVoqO2kQ4zju/hcyDOx7UTablow==, + } + peerDependencies: + solid-js: ^1.6.12 + dependencies: + '@solid-primitives/event-listener': 2.3.0(solid-js@1.7.11) + '@solid-primitives/rootless': 1.4.2(solid-js@1.7.11) + '@solid-primitives/static-store': 0.0.5(solid-js@1.7.11) + '@solid-primitives/utils': 6.2.1(solid-js@1.7.11) + solid-js: 1.7.11 + dev: false + /@solid-primitives/rootless@1.4.2(solid-js@1.7.11): resolution: { @@ -5329,10 +5347,7 @@ packages: dev: false /is-module@1.0.0: - resolution: - { - integrity: sha512-51ypPSPCoTEIN9dy5Oy+h4pShgJmPCygKfyRCISBI+JoWT/2oJvK8QPxmwv7b/p239jXrm9M1mlQbyKJ5A152g==, - } + resolution: { integrity: sha1-Mlj7afeMFNW4FdZkM2tM/7ZEFZE= } dev: false /is-negative-zero@2.0.2: @@ -5362,10 +5377,7 @@ packages: dev: false /is-obj@1.0.1: - resolution: - { - integrity: sha512-l4RyHgRqGN4Y3+9JHVrNqO+tN0rV5My76uW5/nuO4K1b6vw5G8d/cmFjP9tRfEsdhZNt0IFdZuK/c2Vr4Nb+Qg==, - } + resolution: { integrity: sha1-PkcprB9f3gJc19g6iW2rn09n2w8= } engines: { node: '>=0.10.0' } dev: false @@ -5413,10 +5425,7 @@ packages: dev: false /is-regexp@1.0.0: - resolution: - { - integrity: sha512-7zjFAPO4/gwyQAAgRRmqeEeyIICSdmCqa3tsVHMdBzaXXRiqopZL4Cyghg/XulGWrtABTpbnYYzzIRffLkP4oA==, - } + resolution: { integrity: sha1-/S2INUXEa6xaYz57mgnof6LLUGk= } engines: { node: '>=0.10.0' } dev: false @@ -5586,10 +5595,7 @@ packages: dev: false /jsesc@0.5.0: - resolution: - { - integrity: sha512-uZz5UnB7u4T9LvwmFqXii7pZSouaRPorGs5who1Ip7VO0wxanFvBL7GkM6dTHlgX+jhBApRetaWpnDabOeTcnA==, - } + resolution: { integrity: sha1-597mbjXW/Bb3EP6R1c9p9w8IkR0= } hasBin: true dev: false @@ -5810,10 +5816,7 @@ packages: dev: false /lodash.debounce@4.0.8: - resolution: - { - integrity: sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==, - } + resolution: { integrity: sha1-gteb/zCmfEAF/9XiUVMArZyk168= } dev: false /lodash.isfunction@3.0.9: @@ -5859,10 +5862,7 @@ packages: dev: false /lodash.sortby@4.7.0: - resolution: - { - integrity: sha512-HDWXG8isMntAyRF5vZ7xKuEvOhT4AhlRt/3czTSjvGUxjYCBVRQY48ViDHyfYz9VIoBkW4TMGQNapx+l3RUwdA==, - } + resolution: { integrity: sha1-7dFMgk4sycHgsKG0K7UhBRakJDg= } dev: false /lodash.startcase@4.4.0: @@ -6915,7 +6915,6 @@ packages: { integrity: sha512-w3iIaU4OxcF52UUXiZNsNeuXIMDvFrr+ZXK6bFZ0Q60qyVfq4uLptoS4bbq3paG3x216eQllFZX7zt6TIImguQ==, } - deprecated: This package has been deprecated and is no longer maintained. Please use @rollup/plugin-terser peerDependencies: rollup: ^2.0.0 dependencies: @@ -7216,7 +7215,6 @@ packages: { integrity: sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==, } - deprecated: Please use @jridgewell/sourcemap-codec instead dev: false /spdx-correct@3.2.0: @@ -7744,10 +7742,7 @@ packages: dev: false /tr46@1.0.1: - resolution: - { - integrity: sha512-dTpowEjclQ7Kgx5SdBkqRzVhERQXov8/l9Ft9dVM9fmg0W0KQSVaXX9T4i6twCPNtYiZM53lpSSUAwJbFPOHxA==, - } + resolution: { integrity: sha1-qLE/1r/SSJUZZ0zN5VujaTtwbQk= } dependencies: punycode: 2.3.0 dev: false diff --git a/src/components/ForTwoColumns.tsx b/src/components/ForTwoColumns.tsx index b20b03e..e11da02 100644 --- a/src/components/ForTwoColumns.tsx +++ b/src/components/ForTwoColumns.tsx @@ -1,11 +1,11 @@ +import { createWindowSize } from '@solid-primitives/resize-observer' import { JSX, Show, createMemo } from 'solid-js' -import { useWindowWidth } from '~/helpers' import { renderInTwoColumn } from '~/signals' export const ForTwoColumns = (props: { subChild: JSX.Element[] }) => { - const { windowWidth } = useWindowWidth() + const windowSize = createWindowSize() const isShowTwoColumns = createMemo( - () => windowWidth() >= 640 && renderInTwoColumn(), + () => windowSize.width >= 640 && renderInTwoColumn(), ) // 640 is sm size in daisyui const leftCloumns = createMemo(() => props.subChild.filter((_, index) => index % 2 === 0 || !isShowTwoColumns()), diff --git a/src/helpers/global.ts b/src/helpers/global.ts index 3ce8c93..42c3624 100644 --- a/src/helpers/global.ts +++ b/src/helpers/global.ts @@ -1,22 +1,4 @@ -import { createSignal, onCleanup } from 'solid-js' - -export const useWindowWidth = () => { - const [windowWidth, setWindowWidth] = createSignal(0) - const set = () => { - setWindowWidth(document.body?.clientWidth ?? 0) - } - - set() - window.addEventListener('resize', set) - - onCleanup(() => { - window.removeEventListener('resize', set) - }) - - return { - windowWidth, - } -} +import { createSignal } from 'solid-js' export const useStringBooleanMap = () => { const [map, setMap] = createSignal>({})