nurseitaly-components 0.0.14 → 0.0.15

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,14 @@
1
+ import { FieldValues, UseFormReturn } from 'react-hook-form';
2
+ import type { SelectItem } from '../SelectField/SelectField';
3
+ import '../CheckboxField/style.scss';
4
+ import './style.scss';
5
+ type CheckboxGroupFieldProps<TFieldValues extends FieldValues = FieldValues, TContext = any, TTransformedValues = TFieldValues> = {
6
+ attr: string;
7
+ createdForm: UseFormReturn<TFieldValues, TContext, TTransformedValues>;
8
+ options: SelectItem[];
9
+ disabled?: boolean;
10
+ className?: string;
11
+ onChange?: (attr: string, value: Array<string | number>) => void;
12
+ };
13
+ export default function CheckboxGroupField<TFieldValues extends FieldValues = FieldValues, TContext = any, TTransformedValues = TFieldValues>({ attr, createdForm, options, disabled, className, onChange, }: CheckboxGroupFieldProps<TFieldValues, TContext, TTransformedValues>): import("react").JSX.Element;
14
+ export {};
@@ -0,0 +1,29 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import { Checkbox, FormControlLabel } from '@mui/material';
3
+ import cx from 'classnames';
4
+ import { Controller, } from 'react-hook-form';
5
+ import '../CheckboxField/style.scss';
6
+ import './style.scss';
7
+ function toValueList(value) {
8
+ if (!Array.isArray(value)) {
9
+ return [];
10
+ }
11
+ return value;
12
+ }
13
+ export default function CheckboxGroupField({ attr, createdForm, options = [], disabled = false, className, onChange, }) {
14
+ const fieldName = attr;
15
+ const { control } = createdForm;
16
+ return (_jsx(Controller, { name: fieldName, control: control, render: ({ field }) => {
17
+ const selected = toValueList(field.value);
18
+ const toggle = (optionValue, checked) => {
19
+ const next = checked
20
+ ? selected.includes(optionValue)
21
+ ? selected
22
+ : [...selected, optionValue]
23
+ : selected.filter((v) => v !== optionValue);
24
+ field.onChange(next);
25
+ onChange?.(attr, next);
26
+ };
27
+ return (_jsx("div", { className: cx('ds-checkbox-group', className), children: options.map((option) => (_jsx(FormControlLabel, { className: "ds-checkbox", disabled: disabled, control: _jsx(Checkbox, { checked: selected.includes(option.value), onChange: (e) => toggle(option.value, e.target.checked), onBlur: field.onBlur, inputRef: field.ref }), label: option.label }, String(option.value)))) }));
28
+ } }));
29
+ }
@@ -0,0 +1,2 @@
1
+ import CheckboxGroupField from './CheckboxGroupField';
2
+ export default CheckboxGroupField;
@@ -0,0 +1,2 @@
1
+ import CheckboxGroupField from './CheckboxGroupField';
2
+ export default CheckboxGroupField;
@@ -0,0 +1,5 @@
1
+ .ds-checkbox-group {
2
+ display: flex;
3
+ flex-direction: column;
4
+ gap: 8px;
5
+ }
@@ -3,6 +3,7 @@ export { default as Badge } from './Badge';
3
3
  export { default as Button } from './Button';
4
4
  export type { ButtonDSColors, ButtonDSModes, ButtonDSPositions, ButtonDSSizes, } from './Button/Button';
5
5
  export { default as CheckboxField } from './CheckboxField';
6
+ export { default as CheckboxGroupField } from './CheckboxGroupField';
6
7
  export { default as DatePickerField } from './DatePickerField';
7
8
  export { default as DropdownButton } from './DropdownButton';
8
9
  export { default as DropdownList } from './DropdownList';
@@ -4,6 +4,7 @@ export { default as Avatar } from './Avatar';
4
4
  export { default as Badge } from './Badge';
5
5
  export { default as Button } from './Button';
6
6
  export { default as CheckboxField } from './CheckboxField';
7
+ export { default as CheckboxGroupField } from './CheckboxGroupField';
7
8
  export { default as DatePickerField } from './DatePickerField';
8
9
  export { default as DropdownButton } from './DropdownButton';
9
10
  export { default as DropdownList } from './DropdownList';
@@ -1,5 +1,5 @@
1
1
  import { jsx as _jsx } from "react/jsx-runtime";
2
- import { AsyncSelectField, CheckboxField, DatePickerField, SelectField, SelectMultipleField, SwitchField, TextField, } from "../../basic";
2
+ import { AsyncSelectField, CheckboxField, CheckboxGroupField, DatePickerField, SelectField, SelectMultipleField, SwitchField, TextField, } from "../../basic";
3
3
  import FormColorField from "./FormColorField";
4
4
  import { getFieldFlexStyle, groupFieldsIntoRows } from "./groupFieldsIntoRows";
5
5
  import "./style.scss";
@@ -47,6 +47,10 @@ export default function AppForm({ fields, form, prefix, onChangeFunctions = {},
47
47
  return (_jsx(SelectField, { ...selectProps, allowEmpty: field.allowEmpty }, name));
48
48
  }
49
49
  if (field.type === "check") {
50
+ if (field.multiple) {
51
+ const checkOptions = getOptions(field.attr) || field.options || [];
52
+ return (_jsx(CheckboxGroupField, { attr: name, createdForm: form, options: checkOptions, disabled: field.disabled, onChange: (_attr, value) => handleChange?.(value) }, name));
53
+ }
50
54
  return (_jsx(CheckboxField, { attr: name, label: field.name, createdForm: form, disabled: field.disabled }, name));
51
55
  }
52
56
  if (field.type === "switch") {
@@ -79,11 +79,9 @@ body {
79
79
  display: flex !important;
80
80
  }
81
81
 
82
- .tablet-only {
83
- display: none !important;
84
- }
85
-
86
- .mobile-only {
82
+ .tablet-only,
83
+ .mobile-only,
84
+ .desktop-never {
87
85
  display: none !important;
88
86
  }
89
87
 
@@ -94,7 +92,8 @@ body {
94
92
  display: none !important;
95
93
  }
96
94
 
97
- .tablet-only {
95
+ .tablet-only,
96
+ .desktop-never {
98
97
  display: flex !important;
99
98
  }
100
99
  }
@@ -106,7 +105,8 @@ body {
106
105
  display: none !important;
107
106
  }
108
107
 
109
- .mobile-only {
108
+ .mobile-only,
109
+ .desktop-never {
110
110
  display: flex !important;
111
111
  }
112
112
  }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "nurseitaly-components",
3
3
  "private": false,
4
- "version": "0.0.14",
4
+ "version": "0.0.15",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
7
7
  "exports": {
@@ -1,9 +0,0 @@
1
- import './styles.scss';
2
- export declare const DummyModes: readonly ["white", "blue"];
3
- type DummyModes = (typeof DummyModes)[number];
4
- export type Props = {
5
- className?: string;
6
- mode?: DummyModes;
7
- };
8
- export default function Dummy({ className, mode }: Props): import("react").JSX.Element;
9
- export {};
@@ -1,8 +0,0 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
2
- import cx from 'classnames';
3
- import './styles.scss';
4
- export const DummyModes = ['white', 'blue'];
5
- export default function Dummy({ className, mode = 'blue' }) {
6
- const getClassNames = cx('ds-dummy', className, mode);
7
- return _jsx("div", { className: getClassNames, children: "aaaa" });
8
- }
@@ -1,2 +0,0 @@
1
- import Dummy from './Dummy';
2
- export default Dummy;
@@ -1,2 +0,0 @@
1
- import Dummy from './Dummy';
2
- export default Dummy;
@@ -1,4 +0,0 @@
1
- .ds-dummy {
2
- display: flex;
3
- align-items: center;
4
- }