@kwiz/fluentui 1.0.2 → 1.0.3

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.
Files changed (5) hide show
  1. package/dist/controls/dropdown.d.ts +16 -5
  2. package/dist/controls/dropdown.js +11 -6
  3. package/dist/controls/dropdown.js.map +1 -1
  4. package/package.json +1 -1
  5. package/src/controls/dropdown.tsx +30 -16
package/dist/controls/dropdown.d.ts CHANGED
@@ -1,18 +1,29 @@
1
+ import { DropdownProps } from '@fluentui/react-components';
1
2
  import React from 'react';
2
- interface IProps<dataType, keyType extends string = string> {
3
- selected: keyType[];
3
+ type ForwardProps = Omit<DropdownProps, "onSelect" | "selectedOptions" | "clearable">;
4
+ interface IProps<dataType, keyType extends string = string> extends ForwardProps {
5
+ required?: boolean;
6
+ selected: keyType | keyType[];
4
7
  items: {
5
8
  key: keyType;
6
9
  value: string;
7
10
  data?: dataType;
11
+ /** display complex controls in the drop down */
8
12
  option?: JSX.Element;
9
13
  }[];
10
- onSelect: (item: {
14
+ onSelect: (
15
+ /** the specific option that was selected/unselected */
16
+ option: {
11
17
  key: keyType;
12
18
  value: string;
13
19
  data?: dataType;
14
- }) => void;
15
- placeholder?: string;
20
+ },
21
+ /** only sent for multi select - all selected options, in case of multi select */
22
+ options?: {
23
+ key: keyType;
24
+ value: string;
25
+ data?: dataType;
26
+ }[]) => void;
16
27
  }
17
28
  export declare const DropdownEX: React.ForwardRefExoticComponent<IProps<unknown, string> & React.RefAttributes<HTMLButtonElement>>;
18
29
  export {};
package/dist/controls/dropdown.js CHANGED
@@ -1,13 +1,18 @@
1
1
  import { jsx as _jsx } from "react/jsx-runtime";
2
2
  import { Dropdown, Option } from '@fluentui/react-components';
3
- import { filterEmptyEntries, firstOrNull } from '@kwiz/common';
3
+ import { firstOrNull, isNullOrUndefined } from '@kwiz/common';
4
4
  import React from 'react';
5
5
  function $DropdownEX(props, ref) {
6
- let text = filterEmptyEntries(props.selected.map(s => {
7
- let v = firstOrNull(props.items, i => i.key === s);
8
- return v ? v.value : '';
9
- })).join(', ');
10
- return (_jsx(Dropdown, { placeholder: props.placeholder, ref: ref, appearance: 'underline', selectedOptions: props.selected, value: text, children: props.items.map(i => _jsx(Option, { value: i.key, onClick: () => { props.onSelect(i); }, text: i.value, children: i.option ? i.option : i.value }, i.key)) }));
6
+ const selected = Array.isArray(props.selected) ? props.selected : isNullOrUndefined(props.selected) ? [] : [props.selected];
7
+ return (_jsx(Dropdown, Object.assign({}, props, { onSelect: undefined, ref: ref, clearable: !props.required && !props.multiselect, appearance: 'underline', selectedOptions: selected, onOptionSelect: (e, data) => {
8
+ let o = firstOrNull(props.items, i => i.key === data.optionValue);
9
+ if (props.multiselect) {
10
+ let current = data.selectedOptions.map(s => firstOrNull(props.items, i => i.key === s));
11
+ props.onSelect(o, current);
12
+ }
13
+ else
14
+ props.onSelect(o);
15
+ }, children: props.items.map(i => _jsx(Option, { value: i.key, text: i.value, children: i.option ? i.option : i.value }, i.key)) })));
11
16
  }
12
17
  export const DropdownEX = React.forwardRef($DropdownEX);
13
18
  //# sourceMappingURL=dropdown.js.map
package/dist/controls/dropdown.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"dropdown.js","sourceRoot":"","sources":["../../src/controls/dropdown.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAC9D,OAAO,EAAE,kBAAkB,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAC/D,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,SAAS,WAAW,CAAoD,KAAgC,EAAE,GAA0C;IAChJ,IAAI,IAAI,GAAG,kBAAkB,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE;QACjD,IAAI,CAAC,GAAG,WAAW,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC;QACnD,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAA;IAC3B,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACf,OAAO,CACH,KAAC,QAAQ,IAAC,WAAW,EAAE,KAAK,CAAC,WAAW,EAAE,GAAG,EAAE,GAAG,EAAE,UAAU,EAAC,WAAW,EAAC,eAAe,EAAE,KAAK,CAAC,QAAQ,EAAE,KAAK,EAAE,IAAI,YAClH,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,KAAC,MAAM,IAAa,KAAK,EAAE,CAAC,CAAC,GAAG,EAClD,OAAO,EAAE,GAAG,EAAE,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EACrC,IAAI,EAAE,CAAC,CAAC,KAAK,YACf,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,IAHI,CAAC,CAAC,GAAG,CAGC,CAAC,GACnC,CAEd,CAAC;AACN,CAAC;AAED,MAAM,CAAC,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC"}
1
+ {"version":3,"file":"dropdown.js","sourceRoot":"","sources":["../../src/controls/dropdown.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAiB,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAC7E,OAAO,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAC9D,OAAO,KAAK,MAAM,OAAO,CAAC;AAmB1B,SAAS,WAAW,CAAoD,KAAgC,EAAE,GAA0C;IAEhJ,MAAM,QAAQ,GAAc,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,iBAAiB,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;IAEvI,OAAO,CACH,KAAC,QAAQ,oBAAU,KAAK,IAAE,QAAQ,EAAE,SAAS,EAAI,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,CAAC,KAAK,CAAC,QAAQ,IAAI,CAAC,KAAK,CAAC,WAAW,EACvG,UAAU,EAAC,WAAW,EAAC,eAAe,EAAE,QAAQ,EAAE,cAAc,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,EAAE;YAC1E,IAAI,CAAC,GAAG,WAAW,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,KAAK,IAAI,CAAC,WAAW,CAAC,CAAC;YAClE,IAAI,KAAK,CAAC,WAAW,EAAE,CAAC;gBACpB,IAAI,OAAO,GAAG,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,WAAW,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC;gBACxF,KAAK,CAAC,QAAQ,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC;YAC/B,CAAC;;gBACI,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;QAC3B,CAAC,YACA,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,KAAC,MAAM,IAAa,KAAK,EAAE,CAAC,CAAC,GAAG,EAAE,IAAI,EAAE,CAAC,CAAC,KAAK,YAAG,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,IAAlE,CAAC,CAAC,GAAG,CAAuE,CAAC,IACzG,CAEd,CAAC;AACN,CAAC;AAED,MAAM,CAAC,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kwiz/fluentui",
3
- "version": "1.0.2",
3
+ "version": "1.0.3",
4
4
  "description": "KWIZ common controls for FluentUI",
5
5
  "module": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
package/src/controls/dropdown.tsx CHANGED
@@ -1,25 +1,39 @@
1
- import { Dropdown, Option } from '@fluentui/react-components';
2
- import { filterEmptyEntries, firstOrNull } from '@kwiz/common';
1
+ import { Dropdown, DropdownProps, Option } from '@fluentui/react-components';
2
+ import { firstOrNull, isNullOrUndefined } from '@kwiz/common';
3
3
  import React from 'react';
4
4
 
5
- interface IProps<dataType, keyType extends string = string> {
6
- selected: keyType[];
7
- items: { key: keyType, value: string, data?: dataType, option?: JSX.Element; }[];
8
- onSelect: (item: { key: keyType, value: string, data?: dataType }) => void;
9
- placeholder?: string;
5
+ type ForwardProps = Omit<DropdownProps, "onSelect" | "selectedOptions" | "clearable">;
6
+
7
+ interface IProps<dataType, keyType extends string = string> extends ForwardProps {
8
+ required?: boolean;
9
+ selected: keyType | keyType[];
10
+ items: {
11
+ key: keyType, value: string, data?: dataType,
12
+ /** display complex controls in the drop down */
13
+ option?: JSX.Element;
14
+ }[];
15
+ onSelect: (
16
+ /** the specific option that was selected/unselected */
17
+ option: { key: keyType, value: string, data?: dataType },
18
+ /** only sent for multi select - all selected options, in case of multi select */
19
+ options?: { key: keyType, value: string, data?: dataType }[]) => void;
10
20
  }
11
21
 
12
22
  function $DropdownEX<keyType extends string = string, dataType = never>(props: IProps<dataType, keyType>, ref: React.ForwardedRef<HTMLButtonElement>) {
13
- let text = filterEmptyEntries(props.selected.map(s => {
14
- let v = firstOrNull(props.items, i => i.key === s);
15
- return v ? v.value : ''
16
- })).join(', ');
23
+
24
+ const selected: keyType[] = Array.isArray(props.selected) ? props.selected : isNullOrUndefined(props.selected) ? [] : [props.selected];
25
+
17
26
  return (
18
- <Dropdown placeholder={props.placeholder} ref={ref} appearance='underline' selectedOptions={props.selected} value={text} >
19
- {props.items.map(i => <Option key={i.key} value={i.key}
20
- onClick={() => { props.onSelect(i); }}
21
- text={i.value}
22
- >{i.option ? i.option : i.value}</Option>)}
27
+ <Dropdown {...{ ...props, onSelect: undefined }} ref={ref} clearable={!props.required && !props.multiselect}
28
+ appearance='underline' selectedOptions={selected} onOptionSelect={(e, data) => {
29
+ let o = firstOrNull(props.items, i => i.key === data.optionValue);
30
+ if (props.multiselect) {
31
+ let current = data.selectedOptions.map(s => firstOrNull(props.items, i => i.key === s));
32
+ props.onSelect(o, current);
33
+ }
34
+ else props.onSelect(o);
35
+ }}>
36
+ {props.items.map(i => <Option key={i.key} value={i.key} text={i.value}>{i.option ? i.option : i.value}</Option>)}
23
37
  </Dropdown>
24
38
 
25
39
  );