From 38c27da898ffa4e86dc6de8810bff4a405626c5a Mon Sep 17 00:00:00 2001 From: Sacha Weatherstone Date: Tue, 9 Nov 2021 22:55:15 +1100 Subject: [PATCH] Remove old Select, change Switch for Checkbox --- package.json | 3 +- pnpm-lock.yaml | 25 +----- snowpack.config.mjs | 2 + src/components/Channel.tsx | 4 +- src/components/chat/MessageBar.tsx | 4 +- src/components/generic/Select.tsx | 84 ------------------- src/components/generic/Toggle.tsx | 73 ---------------- src/components/generic/form/Checkbox.tsx | 49 +++++++++++ src/components/generic/form/Input.tsx | 2 +- src/components/generic/form/Label.tsx | 3 +- .../form/{EnumSelect.tsx => Select.tsx} | 4 +- src/pages/Messages.tsx | 4 +- src/pages/Nodes/Node.tsx | 4 +- src/pages/Plugins/RangeTest.tsx | 28 ++----- src/pages/settings/Channels.tsx | 8 +- src/pages/settings/Connection.tsx | 10 +-- src/pages/settings/Device.tsx | 4 +- src/pages/settings/Interface.tsx | 34 ++------ src/pages/settings/Radio.tsx | 15 ++-- 19 files changed, 105 insertions(+), 255 deletions(-) delete mode 100644 src/components/generic/Select.tsx delete mode 100644 src/components/generic/Toggle.tsx create mode 100644 src/components/generic/form/Checkbox.tsx rename src/components/generic/form/{EnumSelect.tsx => Select.tsx} (91%) diff --git a/package.json b/package.json index db92e021..d0e6f1bd 100644 --- a/package.json +++ b/package.json @@ -12,7 +12,7 @@ }, "dependencies": { "@headlessui/react": "^1.4.2", - "@meshtastic/meshtasticjs": "^0.6.24", + "@meshtastic/meshtasticjs": "^0.6.25", "@reduxjs/toolkit": "^1.6.2", "apexcharts": "^3.29.0", "boring-avatars": "^1.5.8", @@ -23,7 +23,6 @@ "react-apexcharts": "^1.3.9", "react-dom": "^17.0.2", "react-file-icon": "^1.1.0", - "react-flags-select": "^2.1.2", "react-hook-form": "^7.19.1", "react-i18next": "^11.13.0", "react-icons": "^4.3.1", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 22e59893..02b792a2 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -2,7 +2,7 @@ lockfileVersion: 5.3 specifiers: '@headlessui/react': ^1.4.2 - '@meshtastic/meshtasticjs': ^0.6.24 + '@meshtastic/meshtasticjs': ^0.6.25 '@reduxjs/toolkit': ^1.6.2 '@snowpack/plugin-dotenv': ^2.2.0 '@snowpack/plugin-postcss': ^1.4.3 @@ -39,7 +39,6 @@ specifiers: react-apexcharts: ^1.3.9 react-dom: ^17.0.2 react-file-icon: ^1.1.0 - react-flags-select: ^2.1.2 react-hook-form: ^7.19.1 react-i18next: ^11.13.0 react-icons: ^4.3.1 @@ -54,7 +53,7 @@ specifiers: dependencies: '@headlessui/react': 1.4.2_react-dom@17.0.2+react@17.0.2 - '@meshtastic/meshtasticjs': 0.6.24 + '@meshtastic/meshtasticjs': 0.6.25 '@reduxjs/toolkit': 1.6.2_react-redux@7.2.6+react@17.0.2 apexcharts: 3.29.0 boring-avatars: 1.5.8 @@ -65,7 +64,6 @@ dependencies: react-apexcharts: 1.3.9_apexcharts@3.29.0+react@17.0.2 react-dom: 17.0.2_react@17.0.2 react-file-icon: 1.1.0_react-dom@17.0.2+react@17.0.2 - react-flags-select: 2.1.2_react-dom@17.0.2+react@17.0.2 react-hook-form: 7.19.1_react@17.0.2 react-i18next: 11.13.0_i18next@21.4.1+react@17.0.2 react-icons: 4.3.1_react@17.0.2 @@ -426,8 +424,8 @@ packages: resolution: {integrity: sha512-SQ7Kzhh9+D+ZW9MA0zkYv3VXhIDNx+LzM6EJ+/65I3QY+enU6Itte7E5XX7EWrqLW2FN4n06GWzBnPoC3th2aQ==} dev: true - /@meshtastic/meshtasticjs/0.6.24: - resolution: {integrity: sha512-zdIxyIL6a+UUgZdZvxeRhK/xVhLYB0ZeB5OuA9peRFVE/ICHmAhkmNb58G1hDr0Lq3mPtmlsnh0DiPkI5O4TnQ==} + /@meshtastic/meshtasticjs/0.6.25: + resolution: {integrity: sha512-/FVmKIFpzSo2xguJ0+HfnpN9/6TS3ReMOXL29U7CsPnqGwePC3JJd3THNn2+ofOa//Iy7xGTYah0nF+LH1znJQ==} dependencies: '@protobuf-ts/runtime': 2.0.7 node-fetch: 3.1.0 @@ -1582,10 +1580,6 @@ packages: resolution: {integrity: sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA==} dev: true - /classnames/2.3.1: - resolution: {integrity: sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==} - dev: false - /clean-stack/2.2.0: resolution: {integrity: sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A==} engines: {node: '>=6'} @@ -4466,17 +4460,6 @@ packages: tinycolor2: 1.4.2 dev: false - /react-flags-select/2.1.2_react-dom@17.0.2+react@17.0.2: - resolution: {integrity: sha512-nx/6mY/nKVJB9sVZOylJoSI6idTYZfu0dtUQ0N1L+cD8VAPNl5c/lxL7yyi9vtn66hDRFy6Sr16GzsBj3aoZfQ==} - peerDependencies: - react: '>=16.8.0' - react-dom: '>=16.8.0' - dependencies: - classnames: 2.3.1 - react: 17.0.2 - react-dom: 17.0.2_react@17.0.2 - dev: false - /react-hook-form/7.19.1_react@17.0.2: resolution: {integrity: sha512-e0Oii07qNAa72JeGUT5czVCMwdAFPxmxYvd1Y9oPy2KVD6ZGblN6DG1G7AwL9Bz2lOPFZu15SRNnn0Vpx/eGdg==} peerDependencies: diff --git a/snowpack.config.mjs b/snowpack.config.mjs index 5c5b60c3..89e01a8b 100644 --- a/snowpack.config.mjs +++ b/snowpack.config.mjs @@ -1,3 +1,5 @@ +//@ts-check + /** @type {import("snowpack").SnowpackUserConfig } */ export default { mount: { diff --git a/src/components/Channel.tsx b/src/components/Channel.tsx index 7e4ec634..e0c60ee0 100644 --- a/src/components/Channel.tsx +++ b/src/components/Channel.tsx @@ -6,8 +6,8 @@ import { FiEdit3, FiSave } from 'react-icons/fi'; import { Protobuf } from '@meshtastic/meshtasticjs'; import { connection } from '../core/connection.js'; -import { EnumSelect } from './generic/form/EnumSelect.jsx'; import { Input } from './generic/form/Input.jsx'; +import { Select } from './generic/form/Select.jsx'; import { IconButton } from './generic/IconButton.jsx'; export interface ChannelProps { @@ -77,7 +77,7 @@ export const Channel = ({ channel }: ChannelProps): JSX.Element => {
- { @@ -40,7 +40,7 @@ export const MessageBar = (): JSX.Element => { sendMessage(); }} > - { setDestinationNode(parseInt(e.target.value)); }} diff --git a/src/components/generic/Select.tsx b/src/components/generic/Select.tsx deleted file mode 100644 index 77794204..00000000 --- a/src/components/generic/Select.tsx +++ /dev/null @@ -1,84 +0,0 @@ -import React from 'react'; - -import { FiChevronDown } from 'react-icons/fi'; - -import { Listbox } from '@headlessui/react'; - -export interface SelectProps { - label: string; - options: { - name: string; - value: string; - icon: JSX.Element; - }[]; - id: string; - active: { - name: string; - value: string; - icon: JSX.Element; - }; - onChange: (value: string) => void; -} - -export const Select = ({ - label, - options, - id, - active, - onChange, -}: SelectProps): JSX.Element => { - return ( -
- - - -
- -
{active.icon}
- {active.name} - - - - - - {options.map((option) => ( - - `cursor-default select-none relative py-2 pr-4 first:rounded-t-md last:rounded-b-md dark:text-white ${ - active || selected - ? 'bg-gray-200 dark:bg-primaryDark' - : 'text-gray-900' - }` - } - value={option.value} - > - {({ selected }): JSX.Element => ( - <> - -
{option.icon}
- {option.name} - - - )} - - ))} - -
- -
- ); -}; diff --git a/src/components/generic/Toggle.tsx b/src/components/generic/Toggle.tsx deleted file mode 100644 index 240585a6..00000000 --- a/src/components/generic/Toggle.tsx +++ /dev/null @@ -1,73 +0,0 @@ -import React from 'react'; - -import { Switch } from '@headlessui/react'; - -import { Label } from './form/Label.jsx'; - -type DefaultButtonProps = JSX.IntrinsicElements['button']; - -interface ToggleProps extends DefaultButtonProps { - action?: (enabled: boolean) => void; - label: string; - valid?: boolean; - validationMessage?: string; - checked?: boolean; -} - -export const Toggle = ({ - action, - label, - valid, - validationMessage, - checked, - id, - ...props -}: ToggleProps): JSX.Element => { - const [enabled, setEnabled] = React.useState(false); - React.useEffect(() => { - if (checked !== undefined) { - setEnabled(checked); - } - }, [checked]); - - const handleToggle = (enabled: boolean) => { - setEnabled(enabled); - if (action) { - action(enabled); - } - }; - - return ( -
-
- ); -}; diff --git a/src/components/generic/form/Checkbox.tsx b/src/components/generic/form/Checkbox.tsx new file mode 100644 index 00000000..137f6783 --- /dev/null +++ b/src/components/generic/form/Checkbox.tsx @@ -0,0 +1,49 @@ +import React from 'react'; + +import { Label } from './Label.jsx'; + +type DefaultInputProps = JSX.IntrinsicElements['input']; + +interface CheckboxProps extends DefaultInputProps { + action?: (enabled: boolean) => void; + label: string; + valid?: boolean; + validationMessage?: string; + error?: boolean; +} + +export const Checkbox = ({ + label, + valid, + validationMessage, + id, + error, + ...props +}: CheckboxProps): JSX.Element => { + return ( +
+
+ ); +}; diff --git a/src/components/generic/form/Input.tsx b/src/components/generic/form/Input.tsx index 5152a924..b934301a 100644 --- a/src/components/generic/form/Input.tsx +++ b/src/components/generic/form/Input.tsx @@ -19,7 +19,7 @@ export const Input = React.forwardRef( {action &&
{action}
} diff --git a/src/components/generic/form/Label.tsx b/src/components/generic/form/Label.tsx index dd0ef22d..8ad3911e 100644 --- a/src/components/generic/form/Label.tsx +++ b/src/components/generic/form/Label.tsx @@ -6,8 +6,9 @@ export interface LabelProps { } export const Label = ({ label, error }: LabelProps): JSX.Element => ( -