@mrshmllw/smores-react 2.7.0 → 2.8.0
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.
- package/dist/ConfirmationRadioButtons/Confirmation.js +8 -2
- package/dist/ConfirmationRadioButtons/Confirmation.js.map +1 -1
- package/dist/Modal/Modal.js +1 -0
- package/dist/Modal/Modal.js.map +1 -1
- package/dist/RadioButton/RadioButton.js +8 -2
- package/dist/RadioButton/RadioButton.js.map +1 -1
- package/dist/RadioGroup/RadioGroup.d.ts +1 -0
- package/dist/RadioGroup/RadioGroup.js +1 -1
- package/dist/RadioGroup/RadioGroup.js.map +1 -1
- package/dist/RadioGroup/RadioGroup.stories.d.ts +2 -1
- package/dist/RadioGroup/RadioGroup.stories.js +9 -6
- package/dist/RadioGroup/RadioGroup.stories.js.map +1 -1
- package/dist/RadioGroup/RadioItem.d.ts +2 -1
- package/dist/RadioGroup/RadioItem.js +22 -6
- package/dist/RadioGroup/RadioItem.js.map +1 -1
- package/dist/RadioGroup/types.d.ts +1 -1
- package/dist/SearchInput/Container.js +1 -1
- package/dist/SearchInput/Container.js.map +1 -1
- package/dist/SearchInput/SearchInput.d.ts +1 -0
- package/dist/SearchInput/SearchInput.js +44 -70
- package/dist/SearchInput/SearchInput.js.map +1 -1
- package/dist/SearchInput/SearchOptions.d.ts +13 -0
- package/dist/SearchInput/SearchOptions.js +48 -0
- package/dist/SearchInput/SearchOptions.js.map +1 -0
- package/dist/fields/components/InternalField.js +3 -4
- package/dist/fields/components/InternalField.js.map +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.js +1 -0
- package/dist/index.js.map +1 -1
- package/dist/utils/useControlledState.d.ts +5 -0
- package/dist/utils/useControlledState.js +13 -0
- package/dist/utils/useControlledState.js.map +1 -0
- package/package.json +6 -6
@@ -16,8 +16,14 @@ import { Box } from '../Box';
|
|
16
16
|
import { Text } from '../Text';
|
17
17
|
import { RadioButton } from './RadioButtonStyled';
|
18
18
|
import { useUniqueId } from '../utils/id';
|
19
|
-
|
20
|
-
|
19
|
+
import { useDeprecatedWarning } from '../utils/deprecated';
|
20
|
+
export const Confirmation = (props) => {
|
21
|
+
const { checked, onChange, id: idProp, error = false, errorMsg = '', label, onBlur, sublabel, yesLabel = 'Yes', noLabel = 'No', required = false, disabled = false } = props, marginProps = __rest(props, ["checked", "onChange", "id", "error", "errorMsg", "label", "onBlur", "sublabel", "yesLabel", "noLabel", "required", "disabled"]);
|
22
|
+
useDeprecatedWarning({
|
23
|
+
title: 'Confirmation',
|
24
|
+
message: 'The Confirmation component has been deprecated. Please use the new RadioGroup component instead.',
|
25
|
+
componentProps: props,
|
26
|
+
});
|
21
27
|
const id = useUniqueId(idProp);
|
22
28
|
return (React.createElement(ConfirmationWrapper, Object.assign({}, marginProps),
|
23
29
|
(label || sublabel) && (React.createElement(TextWrapper, null,
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Confirmation.js","sourceRoot":"","sources":["../../src/ConfirmationRadioButtons/Confirmation.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAuC,MAAM,OAAO,CAAA;AAC3D,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAC/C,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAChC,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,WAAW,EAAa,MAAM,qBAAqB,CAAA;AAC5D,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;
|
1
|
+
{"version":3,"file":"Confirmation.js","sourceRoot":"","sources":["../../src/ConfirmationRadioButtons/Confirmation.tsx"],"names":[],"mappings":"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"}
|
package/dist/Modal/Modal.js
CHANGED
package/dist/Modal/Modal.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../src/Modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAA;AAC5C,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAC/C,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAEhC,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAyB9B,MAAM,CAAC,MAAM,KAAK,GAAmB,CAAC,EACpC,KAAK,GAAG,EAAE,EACV,IAAI,GAAG,EAAE,EACT,QAAQ,EACR,SAAS,GAAG,KAAK,EACjB,WAAW,EACX,MAAM,GAAG,IAAI,EACb,KAAK,GAAG,IAAI,EACZ,KAAK,EACL,cAAc,GACf,EAAE,EAAE,CAAC,CACJ,oBAAC,OAAO,IAAC,SAAS,EAAE,SAAS;IAC3B,oBAAC,OAAO,OAAG;IACX,oBAAC,SAAS,IACR,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK,IAAI,OAAO,EACvB,SAAS,EAAE,cAAc;QAEzB,oBAAC,GAAG,IAAC,IAAI,QAAC,UAAU,EAAC,YAAY,EAAC,cAAc,EAAC,eAAe,EAAC,EAAE,EAAC,KAAK;YACvE,oBAAC,aAAa,IAAC,IAAI,QAAC,SAAS,EAAC,QAAQ;gBACnC,IAAI,KAAK,EAAE,IAAI,CACd,oBAAC,IAAI,IAAC,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,EAAC,WAAW,EAAC,EAAE,EAAC,MAAM,GAAG,CAC7D;gBACD,oBAAC,IAAI,IAAC,GAAG,EAAC,IAAI,EAAC,IAAI,EAAC,eAAe,EAAC,KAAK,EAAC,MAAM,IAC7C,KAAK,CACD,CACO;YACf,KAAK,IAAI,CACR,oBAAC,aAAa,IAAC,OAAO,EAAE,WAAW;gBACjC,oBAAC,IAAI,IAAC,MAAM,EAAC,OAAO,EAAC,KAAK,EAAC,WAAW,EAAC,IAAI,EAAE,EAAE,GAAI,CACrC,CACjB,CACG;QACN,oBAAC,GAAG,IAAC,IAAI,QAAC,SAAS,EAAC,QAAQ,IACzB,QAAQ,CACL,CACI,CACJ,CACX,CAAA;AAED,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAC,CACzB,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;eACT,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM;;;;;;;;;GASvC,CACF,CAAA;AAED,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAA;;gBAEV,KAAK,CAAC,MAAM,CAAC,SAAS;;;;;;CAMrC,CAAA;AAED,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAC1B,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;kBACV,KAAK,CAAC,MAAM,CAAC,KAAK;wBACZ,KAAK,CAAC,MAAM,CAAC,OAAO
|
1
|
+
{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../src/Modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAA;AAC5C,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAC/C,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAEhC,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAyB9B,MAAM,CAAC,MAAM,KAAK,GAAmB,CAAC,EACpC,KAAK,GAAG,EAAE,EACV,IAAI,GAAG,EAAE,EACT,QAAQ,EACR,SAAS,GAAG,KAAK,EACjB,WAAW,EACX,MAAM,GAAG,IAAI,EACb,KAAK,GAAG,IAAI,EACZ,KAAK,EACL,cAAc,GACf,EAAE,EAAE,CAAC,CACJ,oBAAC,OAAO,IAAC,SAAS,EAAE,SAAS;IAC3B,oBAAC,OAAO,OAAG;IACX,oBAAC,SAAS,IACR,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK,IAAI,OAAO,EACvB,SAAS,EAAE,cAAc;QAEzB,oBAAC,GAAG,IAAC,IAAI,QAAC,UAAU,EAAC,YAAY,EAAC,cAAc,EAAC,eAAe,EAAC,EAAE,EAAC,KAAK;YACvE,oBAAC,aAAa,IAAC,IAAI,QAAC,SAAS,EAAC,QAAQ;gBACnC,IAAI,KAAK,EAAE,IAAI,CACd,oBAAC,IAAI,IAAC,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,EAAC,WAAW,EAAC,EAAE,EAAC,MAAM,GAAG,CAC7D;gBACD,oBAAC,IAAI,IAAC,GAAG,EAAC,IAAI,EAAC,IAAI,EAAC,eAAe,EAAC,KAAK,EAAC,MAAM,IAC7C,KAAK,CACD,CACO;YACf,KAAK,IAAI,CACR,oBAAC,aAAa,IAAC,OAAO,EAAE,WAAW;gBACjC,oBAAC,IAAI,IAAC,MAAM,EAAC,OAAO,EAAC,KAAK,EAAC,WAAW,EAAC,IAAI,EAAE,EAAE,GAAI,CACrC,CACjB,CACG;QACN,oBAAC,GAAG,IAAC,IAAI,QAAC,SAAS,EAAC,QAAQ,IACzB,QAAQ,CACL,CACI,CACJ,CACX,CAAA;AAED,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAC,CACzB,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;eACT,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM;;;;;;;;;GASvC,CACF,CAAA;AAED,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAA;;gBAEV,KAAK,CAAC,MAAM,CAAC,SAAS;;;;;;CAMrC,CAAA;AAED,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAC1B,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;kBACV,KAAK,CAAC,MAAM,CAAC,KAAK;wBACZ,KAAK,CAAC,MAAM,CAAC,OAAO;;;;;iBAK3B,KAAK;;;;;MAKhB,MAAM,KAAK,IAAI;IACjB,GAAG,CAAA;;;;;;;;;;;;KAYF;GACF,CACF,CAAA;AAED,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAA;;gBAEhB,KAAK,CAAC,MAAM,CAAC,UAAU;;;;;kBAKrB,KAAK,CAAC,MAAM,CAAC,UAAU;;;;;;CAMxC,CAAA;AAED,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAC,CAAA;;CAEhC,CAAA"}
|
@@ -15,8 +15,14 @@ import { focusOutline } from '../utils/focusOutline';
|
|
15
15
|
import { Box } from '../Box';
|
16
16
|
import { theme } from '../theme';
|
17
17
|
import { useUniqueId } from '../utils/id';
|
18
|
-
|
19
|
-
|
18
|
+
import { useDeprecatedWarning } from '../utils/deprecated';
|
19
|
+
export const RadioButton = (props) => {
|
20
|
+
const { id: idProp, label, checked, value, onChange } = props, marginProps = __rest(props, ["id", "label", "checked", "value", "onChange"]);
|
21
|
+
useDeprecatedWarning({
|
22
|
+
title: 'RadioButton',
|
23
|
+
message: 'The RadioButton component has been deprecated. Please use the new RadioGroup component instead.',
|
24
|
+
componentProps: props,
|
25
|
+
});
|
20
26
|
const id = useUniqueId(idProp);
|
21
27
|
return (React.createElement(Box, Object.assign({ flex: true, alignItems: "center" }, marginProps),
|
22
28
|
React.createElement(RadioInput, { id: id, type: "radio", checked: checked, value: value, onChange: onChange }),
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"RadioButton.js","sourceRoot":"","sources":["../../src/RadioButton/RadioButton.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAA0B,MAAM,OAAO,CAAA;AAC9C,OAAO,MAAM,MAAM,mBAAmB,CAAA;AACtC,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AAEpD,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAE5B,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAChC,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;
|
1
|
+
{"version":3,"file":"RadioButton.js","sourceRoot":"","sources":["../../src/RadioButton/RadioButton.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAA0B,MAAM,OAAO,CAAA;AAC9C,OAAO,MAAM,MAAM,mBAAmB,CAAA;AACtC,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AAEpD,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAE5B,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAChC,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AAEzC,OAAO,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAA;AAc1D,MAAM,CAAC,MAAM,WAAW,GAAyB,CAAC,KAAK,EAAE,EAAE;IACzD,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,KAAqB,KAAK,EAArB,WAAW,UAAK,KAAK,EAAvE,+CAA+D,CAAQ,CAAA;IAE7E,oBAAoB,CAAC;QACnB,KAAK,EAAE,aAAa;QACpB,OAAO,EACL,iGAAiG;QACnG,cAAc,EAAE,KAAK;KACtB,CAAC,CAAA;IAEF,MAAM,EAAE,GAAG,WAAW,CAAC,MAAM,CAAC,CAAA;IAE9B,OAAO,CACL,oBAAC,GAAG,kBAAC,IAAI,QAAC,UAAU,EAAC,QAAQ,IAAK,WAAW;QAC3C,oBAAC,UAAU,IACT,EAAE,EAAE,EAAE,EACN,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,GAClB;QAEF,oBAAC,UAAU,IAAC,OAAO,EAAE,EAAE;YACrB,oBAAC,SAAS,IAAC,OAAO,EAAE,OAAO,GAAI;YAC/B,oBAAC,IAAI,QAAE,KAAK,CAAQ,CACT,CACT,CACP,CAAA;AACH,CAAC,CAAA;AAED,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAY;;;;sBAIlB,KAAK,CAAC,MAAM,CAAC,KAAK;;YAE5B,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CACxB,OAAO;IACL,CAAC,CAAC,aAAa,KAAK,CAAC,MAAM,CAAC,OAAO,EAAE;IACrC,CAAC,CAAC,aAAa,KAAK,CAAC,MAAM,CAAC,OAAO,EAAE;CAC1C,CAAA;AAED,MAAM,UAAU,GAAG,MAAM,CAAC,KAAK,CAAA;;;;;WAKpB,KAAK,CAAC,MAAM,CAAC,SAAS;;;;CAIhC,CAAA;AAED,MAAM,UAAU,GAAG,MAAM,CAAC,KAAK,CAAA;;;;;;IAM3B,YAAY,CAAC;IACb,QAAQ,EAAE,qBAAqB,UAAU,IAAI,SAAS,EAAE;CACzD,CAAC;CACH,CAAA;AAED,wDAAwD;AACxD,MAAM,IAAI,GAAG,MAAM,CAAC,IAAI,CAAA;;;CAGvB,CAAA"}
|
@@ -3,6 +3,7 @@ import { CommonFieldProps } from '../fields/commonFieldTypes';
|
|
3
3
|
import { BaseValueType, DisplayType } from './types';
|
4
4
|
export declare type RadioGroupProps<Value extends BaseValueType = BaseValueType> = {
|
5
5
|
options: Array<{
|
6
|
+
visual?: string;
|
6
7
|
label: string;
|
7
8
|
value: Value;
|
8
9
|
}>;
|
@@ -19,7 +19,7 @@ export const RadioGroup = (_a) => {
|
|
19
19
|
var { options, onChange, value, displayType = 'normal', renderAsTitle = false, error = false } = _a, fieldProps = __rest(_a, ["options", "onChange", "value", "displayType", "renderAsTitle", "error"]);
|
20
20
|
const name = useUniqueId();
|
21
21
|
return (React.createElement(Fieldset, Object.assign({ renderAsTitle: renderAsTitle, error: error }, fieldProps),
|
22
|
-
React.createElement(RadioItemList, { displayType: displayType }, options.map((option) => (React.createElement(RadioItem, { key: `${option.value}`, name: name, label: option.label, value: option.value, checked: option.value === value, onChange: onChange, displayType: displayType, isError: error }))))));
|
22
|
+
React.createElement(RadioItemList, { displayType: displayType }, options.map((option) => (React.createElement(RadioItem, { key: `${option.value}`, name: name, visual: option.visual, label: option.label, value: option.value, checked: option.value === value, onChange: onChange, displayType: displayType, isError: error }))))));
|
23
23
|
};
|
24
24
|
const RadioItemList = styled.div `
|
25
25
|
display: flex;
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"RadioGroup.js","sourceRoot":"","sources":["../../src/RadioGroup/RadioGroup.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAEtC,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AAEzC,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAA;AAE7C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AAEvC,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;
|
1
|
+
{"version":3,"file":"RadioGroup.js","sourceRoot":"","sources":["../../src/RadioGroup/RadioGroup.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAEtC,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AAEzC,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAA;AAE7C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AAEvC,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AAatC,MAAM,CAAC,MAAM,UAAU,GAAG,CAA8B,EAQ/B,EAAE,EAAE;QAR2B,EACtD,OAAO,EACP,QAAQ,EACR,KAAK,EACL,WAAW,GAAG,QAAQ,EACtB,aAAa,GAAG,KAAK,EACrB,KAAK,GAAG,KAAK,OAEU,EADpB,UAAU,cAPyC,yEAQvD,CADc;IAEb,MAAM,IAAI,GAAG,WAAW,EAAE,CAAA;IAE1B,OAAO,CACL,oBAAC,QAAQ,kBAAC,aAAa,EAAE,aAAa,EAAE,KAAK,EAAE,KAAK,IAAM,UAAU;QAClE,oBAAC,aAAa,IAAC,WAAW,EAAE,WAAW,IACpC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CACvB,oBAAC,SAAS,IACR,GAAG,EAAE,GAAG,MAAM,CAAC,KAAK,EAAE,EACtB,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,CAAC,MAAM,EACrB,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,OAAO,EAAE,MAAM,CAAC,KAAK,KAAK,KAAK,EAC/B,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,WAAW,EACxB,OAAO,EAAE,KAAK,GACd,CACH,CAAC,CACY,CACP,CACZ,CAAA;AACH,CAAC,CAAA;AAED,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAsC;;SAE7D,QAAQ;;IAEb,CAAC,EAAE,WAAW,EAAE,EAAE,EAAE;IACpB,IAAI,WAAW,KAAK,iBAAiB,EAAE;QACrC,OAAO;;;OAGN,CAAA;KACF;IAED,OAAO,yBAAyB,CAAA;AAClC,CAAC;CACF,CAAA"}
|
@@ -10,8 +10,9 @@ declare const _default: {
|
|
10
10
|
};
|
11
11
|
};
|
12
12
|
export default _default;
|
13
|
+
export declare const Interactive: any;
|
13
14
|
export declare const Default: any;
|
14
15
|
export declare const Vertical: any;
|
15
16
|
export declare const Horizontal: any;
|
16
17
|
export declare const WithError: any;
|
17
|
-
export declare const
|
18
|
+
export declare const WithVisual: any;
|
@@ -1,5 +1,6 @@
|
|
1
1
|
import React, { useState } from 'react';
|
2
2
|
import { RadioGroup } from './RadioGroup';
|
3
|
+
import visualSvg from './assets/radio-visual.svg';
|
3
4
|
export default {
|
4
5
|
title: 'RadioGroup',
|
5
6
|
component: RadioGroup,
|
@@ -21,6 +22,12 @@ const defaultArgs = {
|
|
21
22
|
options,
|
22
23
|
displayType: 'normal',
|
23
24
|
};
|
25
|
+
const InteractiveStory = (props) => {
|
26
|
+
const [value, setValue] = useState('');
|
27
|
+
return (React.createElement(RadioGroup, Object.assign({}, props, { onChange: (nextValue) => setValue(nextValue), value: value })));
|
28
|
+
};
|
29
|
+
export const Interactive = InteractiveStory.bind({});
|
30
|
+
Interactive.args = defaultArgs;
|
24
31
|
const Template = (props) => React.createElement(RadioGroup, Object.assign({}, props));
|
25
32
|
export const Default = Template.bind({});
|
26
33
|
Default.args = defaultArgs;
|
@@ -30,10 +37,6 @@ export const Horizontal = Template.bind({});
|
|
30
37
|
Horizontal.args = Object.assign(Object.assign({}, defaultArgs), { displayType: 'horizontal-card' });
|
31
38
|
export const WithError = Template.bind({});
|
32
39
|
WithError.args = Object.assign(Object.assign({}, defaultArgs), { error: true, errorMsg: 'something', displayType: 'horizontal-card' });
|
33
|
-
const
|
34
|
-
|
35
|
-
return (React.createElement(RadioGroup, Object.assign({}, props, { onChange: (nextValue) => setValue(nextValue), value: value })));
|
36
|
-
};
|
37
|
-
export const Interactive = InteractiveStory.bind({});
|
38
|
-
Interactive.args = defaultArgs;
|
40
|
+
export const WithVisual = Template.bind({});
|
41
|
+
WithVisual.args = Object.assign(Object.assign({}, defaultArgs), { options: options.map((option) => (Object.assign(Object.assign({}, option), { visual: visualSvg }))), displayType: 'horizontal-card' });
|
39
42
|
//# sourceMappingURL=RadioGroup.stories.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"RadioGroup.stories.js","sourceRoot":"","sources":["../../src/RadioGroup/RadioGroup.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACvC,OAAO,EAAE,UAAU,EAAmB,MAAM,cAAc,CAAA;
|
1
|
+
{"version":3,"file":"RadioGroup.stories.js","sourceRoot":"","sources":["../../src/RadioGroup/RadioGroup.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACvC,OAAO,EAAE,UAAU,EAAmB,MAAM,cAAc,CAAA;AAC1D,OAAO,SAAS,MAAM,2BAA2B,CAAA;AAEjD,eAAe;IACb,KAAK,EAAE,YAAY;IACnB,SAAS,EAAE,UAAU;IACrB,QAAQ,EAAE,EAAE,QAAQ,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE;CAC9C,CAAA;AAED,MAAM,OAAO,GAAG;IACd,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE;IACpC,EAAE,KAAK,EAAE,sBAAsB,EAAE,KAAK,EAAE,kBAAkB,EAAE;IAC5D;QACE,KAAK,EAAE,qCAAqC;QAC5C,KAAK,EAAE,uBAAuB;KAC/B;IACD,EAAE,KAAK,EAAE,2BAA2B,EAAE,KAAK,EAAE,YAAY,EAAE;CAC5D,CAAA;AAED,MAAM,WAAW,GAAoB;IACnC,KAAK,EAAE,yBAAyB;IAChC,QAAQ,EAAE,CAAC,KAAa,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC;IAC/C,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,KAAK;IACvB,OAAO;IACP,WAAW,EAAE,QAAQ;CACtB,CAAA;AAED,MAAM,gBAAgB,GAAG,CAAC,KAA8B,EAAE,EAAE;IAC1D,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAA;IAEtC,OAAO,CACL,oBAAC,UAAU,oBACL,KAAK,IACT,QAAQ,EAAE,CAAC,SAAS,EAAE,EAAE,CAAC,QAAQ,CAAC,SAAS,CAAC,EAC5C,KAAK,EAAE,KAAK,IACZ,CACH,CAAA;AACH,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,WAAW,GAAG,gBAAgB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAEpD,WAAW,CAAC,IAAI,GAAG,WAAW,CAAA;AAE9B,MAAM,QAAQ,GAAG,CAAC,KAAsB,EAAE,EAAE,CAAC,oBAAC,UAAU,oBAAK,KAAK,EAAI,CAAA;AAEtE,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAExC,OAAO,CAAC,IAAI,GAAG,WAAW,CAAA;AAE1B,MAAM,CAAC,MAAM,QAAQ,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAEzC,QAAQ,CAAC,IAAI,mCACR,WAAW,KACd,WAAW,EAAE,eAAe,GAC7B,CAAA;AAED,MAAM,CAAC,MAAM,UAAU,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAE3C,UAAU,CAAC,IAAI,mCACV,WAAW,KACd,WAAW,EAAE,iBAAiB,GAC/B,CAAA;AAED,MAAM,CAAC,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAE1C,SAAS,CAAC,IAAI,mCACT,WAAW,KACd,KAAK,EAAE,IAAI,EACX,QAAQ,EAAE,WAAW,EACrB,WAAW,EAAE,iBAAiB,GAC/B,CAAA;AAED,MAAM,CAAC,MAAM,UAAU,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAE3C,UAAU,CAAC,IAAI,mCACV,WAAW,KACd,OAAO,EAAE,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,iCAAM,MAAM,KAAE,MAAM,EAAE,SAAS,IAAG,CAAC,EACpE,WAAW,EAAE,iBAAiB,GAC/B,CAAA"}
|
@@ -2,6 +2,7 @@
|
|
2
2
|
import { BaseValueType, DisplayType } from './types';
|
3
3
|
declare type RadioItemProps<Value extends BaseValueType = BaseValueType> = {
|
4
4
|
name: string;
|
5
|
+
visual?: string;
|
5
6
|
value: Value;
|
6
7
|
label: string;
|
7
8
|
checked: boolean;
|
@@ -9,5 +10,5 @@ declare type RadioItemProps<Value extends BaseValueType = BaseValueType> = {
|
|
9
10
|
displayType: DisplayType;
|
10
11
|
isError: boolean;
|
11
12
|
};
|
12
|
-
export declare const RadioItem: <Value extends BaseValueType>({ name, label, value, checked, onChange, displayType, isError, }: RadioItemProps<Value>) => JSX.Element;
|
13
|
+
export declare const RadioItem: <Value extends BaseValueType>({ name, visual, label, value, checked, onChange, displayType, isError, }: RadioItemProps<Value>) => JSX.Element;
|
13
14
|
export {};
|
@@ -4,16 +4,32 @@ import { useUniqueId } from '../utils/id';
|
|
4
4
|
import { theme } from '../theme';
|
5
5
|
import { RadioElement } from './RadioElement';
|
6
6
|
import { ITEM_GAP } from './constants';
|
7
|
-
|
7
|
+
import { Box } from '../Box';
|
8
|
+
export const RadioItem = ({ name, visual, label, value, checked, onChange, displayType, isError, }) => {
|
8
9
|
const id = useUniqueId();
|
9
10
|
return (React.createElement(Wrapper, { htmlFor: id, checked: checked, displayType: displayType },
|
10
|
-
React.createElement(
|
11
|
-
|
11
|
+
visual && (React.createElement(VisualWrapper, null,
|
12
|
+
React.createElement(Visual, { visualUrl: visual }))),
|
13
|
+
React.createElement(Box, { flex: true, direction: "row", alignItems: "flex-start" },
|
14
|
+
React.createElement(RadioElement, { name: name, id: id, value: value, checked: checked, onChange: onChange, isError: isError, mr: "8px" }),
|
15
|
+
React.createElement(RadioText, { isError: isError }, label))));
|
12
16
|
};
|
17
|
+
const VisualWrapper = styled.div `
|
18
|
+
width: 100%;
|
19
|
+
max-width: 120px;
|
20
|
+
margin: 0 auto 8px;
|
21
|
+
`;
|
22
|
+
const Visual = styled.div `
|
23
|
+
width: 100%;
|
24
|
+
padding-top: 100%;
|
25
|
+
background-image: url('${(p) => p.visualUrl}');
|
26
|
+
background-size: contain;
|
27
|
+
background-repeat: no-repeat;
|
28
|
+
background-position: center;
|
29
|
+
`;
|
13
30
|
const Wrapper = styled.label `
|
14
31
|
display: flex;
|
15
|
-
flex-direction:
|
16
|
-
align-items: flex-start;
|
32
|
+
flex-direction: column;
|
17
33
|
|
18
34
|
${({ displayType, checked }) => css `
|
19
35
|
${(displayType === 'horizontal-card' ||
|
@@ -33,7 +49,7 @@ const Wrapper = styled.label `
|
|
33
49
|
}
|
34
50
|
|
35
51
|
@media (min-width: 768px) {
|
36
|
-
width:
|
52
|
+
width: 201px;
|
37
53
|
}
|
38
54
|
`}
|
39
55
|
`}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"RadioItem.js","sourceRoot":"","sources":["../../src/RadioGroup/RadioItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAE/C,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AACzC,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAEhC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAE7C,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;
|
1
|
+
{"version":3,"file":"RadioItem.js","sourceRoot":"","sources":["../../src/RadioGroup/RadioItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAE/C,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AACzC,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAEhC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAE7C,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AACtC,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAa5B,MAAM,CAAC,MAAM,SAAS,GAAG,CAA8B,EACrD,IAAI,EACJ,MAAM,EACN,KAAK,EACL,KAAK,EACL,OAAO,EACP,QAAQ,EACR,WAAW,EACX,OAAO,GACe,EAAE,EAAE;IAC1B,MAAM,EAAE,GAAG,WAAW,EAAE,CAAA;IACxB,OAAO,CACL,oBAAC,OAAO,IAAC,OAAO,EAAE,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,WAAW;QAC7D,MAAM,IAAI,CACT,oBAAC,aAAa;YACZ,oBAAC,MAAM,IAAC,SAAS,EAAE,MAAM,GAAI,CACf,CACjB;QACD,oBAAC,GAAG,IAAC,IAAI,QAAC,SAAS,EAAC,KAAK,EAAC,UAAU,EAAC,YAAY;YAC/C,oBAAC,YAAY,IACX,IAAI,EAAE,IAAI,EACV,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,EAAE,EAAC,KAAK,GACR;YACF,oBAAC,SAAS,IAAC,OAAO,EAAE,OAAO,IAAG,KAAK,CAAa,CAC5C,CACE,CACX,CAAA;AACH,CAAC,CAAA;AAED,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAA;;;;CAI/B,CAAA;AAED,MAAM,MAAM,GAAG,MAAM,CAAC,GAAG,CAAuB;;;2BAGrB,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,SAAS;;;;CAI5C,CAAA;AAED,MAAM,OAAO,GAAG,MAAM,CAAC,KAAK,CAAiD;;;;IAIzE,CAAC,EAAE,WAAW,EAAE,OAAO,EAAE,EAAE,EAAE,CAC7B,GAAG,CAAA;QACC,CAAC,WAAW,KAAK,iBAAiB;IAClC,WAAW,KAAK,eAAe,CAAC;IAClC,GAAG,CAAA;;4BAEmB,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC;mBACvD,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM;UAClC,OAAO,IAAI,qBAAqB,KAAK,CAAC,MAAM,CAAC,SAAS,GAAG;OAC5D;QACC,WAAW,KAAK,iBAAiB;IACnC,GAAG,CAAA;;;;8BAIqB,QAAQ,GAAG,CAAC;;;;;;OAMnC;KACF;CACJ,CAAA;AAED,MAAM,SAAS,GAAG,MAAM,CAAC,IAAI,CAAsB;;;iBAGlC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM;WAC9B,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CACvB,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,SAAS;;CAExD,CAAA"}
|
@@ -1,2 +1,2 @@
|
|
1
1
|
export declare type DisplayType = 'normal' | 'vertical-card' | 'horizontal-card';
|
2
|
-
export declare type BaseValueType = string | boolean;
|
2
|
+
export declare type BaseValueType = string | boolean | null;
|
@@ -31,6 +31,6 @@ const list = [
|
|
31
31
|
},
|
32
32
|
];
|
33
33
|
export const Container = ({ outlined, showIcon }) => {
|
34
|
-
return (React.createElement(SearchInput, { id: "days", label: "Days", placeholder: "Search days", searchList: list, onFound: () => console.log('found'), outlined: outlined, showIcon: showIcon }));
|
34
|
+
return (React.createElement(SearchInput, { id: "days", label: "Days", placeholder: "Search days", searchList: list, onFound: (val) => console.log('found', val), outlined: outlined, showIcon: showIcon }));
|
35
35
|
};
|
36
36
|
//# sourceMappingURL=Container.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Container.js","sourceRoot":"","sources":["../../src/SearchInput/Container.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAa,MAAM,OAAO,CAAA;AACjC,OAAO,EAAE,WAAW,EAAoB,MAAM,eAAe,CAAA;AAE7D,MAAM,IAAI,GAAG;IACX;QACE,KAAK,EAAE,QAAQ;QACf,KAAK,EAAE,QAAQ;KAChB;IACD;QACE,KAAK,EAAE,SAAS;QAChB,KAAK,EAAE,SAAS;KACjB;IACD;QACE,KAAK,EAAE,WAAW;QAClB,KAAK,EAAE,WAAW;KACnB;IACD;QACE,KAAK,EAAE,UAAU;QACjB,KAAK,EAAE,UAAU;KAClB;IACD;QACE,KAAK,EAAE,QAAQ;QACf,KAAK,EAAE,QAAQ;KAChB;IACD;QACE,KAAK,EAAE,UAAU;QACjB,KAAK,EAAE,UAAU;KAClB;IACD;QACE,KAAK,EAAE,QAAQ;QACf,KAAK,EAAE,QAAQ;KAChB;CACF,CAAA;AAED,MAAM,CAAC,MAAM,SAAS,GAAyB,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,EAAE;IACxE,OAAO,CACL,oBAAC,WAAW,IACV,EAAE,EAAC,MAAM,EACT,KAAK,EAAC,MAAM,EACZ,WAAW,EAAC,aAAa,EACzB,UAAU,EAAE,IAAI,EAChB,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,
|
1
|
+
{"version":3,"file":"Container.js","sourceRoot":"","sources":["../../src/SearchInput/Container.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAa,MAAM,OAAO,CAAA;AACjC,OAAO,EAAE,WAAW,EAAoB,MAAM,eAAe,CAAA;AAE7D,MAAM,IAAI,GAAG;IACX;QACE,KAAK,EAAE,QAAQ;QACf,KAAK,EAAE,QAAQ;KAChB;IACD;QACE,KAAK,EAAE,SAAS;QAChB,KAAK,EAAE,SAAS;KACjB;IACD;QACE,KAAK,EAAE,WAAW;QAClB,KAAK,EAAE,WAAW;KACnB;IACD;QACE,KAAK,EAAE,UAAU;QACjB,KAAK,EAAE,UAAU;KAClB;IACD;QACE,KAAK,EAAE,QAAQ;QACf,KAAK,EAAE,QAAQ;KAChB;IACD;QACE,KAAK,EAAE,UAAU;QACjB,KAAK,EAAE,UAAU;KAClB;IACD;QACE,KAAK,EAAE,QAAQ;QACf,KAAK,EAAE,QAAQ;KAChB;CACF,CAAA;AAED,MAAM,CAAC,MAAM,SAAS,GAAyB,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,EAAE;IACxE,OAAO,CACL,oBAAC,WAAW,IACV,EAAE,EAAC,MAAM,EACT,KAAK,EAAC,MAAM,EACZ,WAAW,EAAC,aAAa,EACzB,UAAU,EAAE,IAAI,EAChB,OAAO,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,OAAO,EAAE,GAAG,CAAC,EAC3C,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,GAClB,CACH,CAAA;AACH,CAAC,CAAA"}
|
@@ -9,50 +9,65 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
9
9
|
}
|
10
10
|
return t;
|
11
11
|
};
|
12
|
-
import React, { useState } from 'react';
|
12
|
+
import React, { useMemo, useState } from 'react';
|
13
13
|
import styled from 'styled-components';
|
14
14
|
import { darken } from 'polished';
|
15
15
|
import { theme } from '../theme';
|
16
16
|
import { Icon } from '../Icon';
|
17
17
|
import { Field } from '../fields/Field';
|
18
18
|
import { useUniqueId } from '../utils/id';
|
19
|
+
import { useControllableState } from '../utils/useControlledState';
|
20
|
+
import { SearchOptions } from './SearchOptions';
|
19
21
|
export const SearchInput = (_a) => {
|
20
|
-
var { id: idProp, name = 'search_input', className = '', placeholder, searchList, onFound, resultsRelativePosition = false, outlined = false, showIcon = false, renderAsTitle = false, onBlur } = _a, otherProps = __rest(_a, ["id", "name", "className", "placeholder", "searchList", "onFound", "resultsRelativePosition", "outlined", "showIcon", "renderAsTitle", "onBlur"]);
|
22
|
+
var { id: idProp, name = 'search_input', className = '', placeholder, searchList, onFound, resultsRelativePosition = false, outlined = false, showIcon = false, renderAsTitle = false, onBlur, value } = _a, otherProps = __rest(_a, ["id", "name", "className", "placeholder", "searchList", "onFound", "resultsRelativePosition", "outlined", "showIcon", "renderAsTitle", "onBlur", "value"]);
|
21
23
|
const id = useUniqueId(idProp);
|
22
|
-
const [
|
23
|
-
const [
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
24
|
+
const [showOptions, setShowOptions] = useState(false);
|
25
|
+
const [selectedValue, setSelectedValue] = useControllableState({
|
26
|
+
initialState: null,
|
27
|
+
stateProp: value,
|
28
|
+
});
|
29
|
+
const [searchQuery, setSearchQuery] = useState(null);
|
30
|
+
const filteredList = useMemo(() => {
|
31
|
+
if (searchQuery === null || searchQuery === '') {
|
32
|
+
return searchList;
|
33
|
+
}
|
34
|
+
return searchList.filter(({ label }) => label.toLowerCase().includes(searchQuery.toLocaleLowerCase()));
|
35
|
+
}, [searchQuery]);
|
36
|
+
const getDisplayedInputText = () => {
|
37
|
+
var _a;
|
38
|
+
if (searchQuery !== null) {
|
39
|
+
return searchQuery;
|
40
|
+
}
|
41
|
+
if (selectedValue !== null) {
|
42
|
+
return (((_a = searchList.find((option) => option.value === selectedValue)) === null || _a === void 0 ? void 0 : _a.label) || '');
|
43
|
+
}
|
44
|
+
return '';
|
45
|
+
};
|
46
|
+
const isSelected = selectedValue !== null;
|
47
|
+
const displayedInputText = getDisplayedInputText();
|
48
|
+
const updateSearchQuery = (query) => {
|
49
|
+
setSearchQuery(query);
|
50
|
+
if (query === null) {
|
51
|
+
setShowOptions(false);
|
34
52
|
}
|
35
53
|
else {
|
36
|
-
|
54
|
+
setShowOptions(2 <= query.length);
|
37
55
|
}
|
38
56
|
};
|
39
|
-
const
|
40
|
-
const
|
41
|
-
|
57
|
+
const handleInputChange = (event) => {
|
58
|
+
const nextValue = event.currentTarget.value;
|
59
|
+
updateSearchQuery(nextValue);
|
42
60
|
};
|
43
|
-
const
|
44
|
-
|
45
|
-
|
46
|
-
onFound(
|
47
|
-
setSelected(true);
|
61
|
+
const handleSelect = (nextValue) => {
|
62
|
+
updateSearchQuery(null);
|
63
|
+
setSelectedValue(nextValue);
|
64
|
+
onFound(nextValue);
|
48
65
|
};
|
49
66
|
return (React.createElement(Field, Object.assign({ className: className, renderAsTitle: renderAsTitle, id: id, outlined: outlined }, otherProps),
|
50
|
-
React.createElement(
|
51
|
-
React.createElement(
|
52
|
-
|
53
|
-
|
54
|
-
React.createElement(StyledResultsContainer, { show: active, absolutePosition: !resultsRelativePosition, outlined: outlined },
|
55
|
-
React.createElement(ResultsList, { outlined: outlined }, list.length ? (list.map((el, i) => (React.createElement("li", { key: i, onClick: () => select(el) }, el.label)))) : (React.createElement("li", null, "No results")))))));
|
67
|
+
React.createElement(StyledInputBox, { outlined: outlined, selected: isSelected },
|
68
|
+
showIcon && React.createElement(SearchIcon, { size: 24, render: "search", color: "subtext" }),
|
69
|
+
React.createElement(StyledInput, { id: id, type: "text", name: name, placeholder: placeholder, autoComplete: "off", value: displayedInputText, onChange: handleInputChange, outlined: outlined, selected: isSelected, onBlur: onBlur })),
|
70
|
+
showOptions && (React.createElement(SearchOptions, { displayedList: filteredList, onSelect: handleSelect, outlined: outlined, positionRelative: resultsRelativePosition }))));
|
56
71
|
};
|
57
72
|
const StyledInputBox = styled.div `
|
58
73
|
display: flex;
|
@@ -96,47 +111,6 @@ const StyledInput = styled.input `
|
|
96
111
|
height: auto;
|
97
112
|
`}
|
98
113
|
`;
|
99
|
-
const StyledResultsContainer = styled.div `
|
100
|
-
box-sizing: border-box;
|
101
|
-
overflow-y: hidden;
|
102
|
-
${({ absolutePosition }) => absolutePosition && 'position: absolute;'}
|
103
|
-
width: 100%;
|
104
|
-
visibility: ${({ show }) => (show ? 'visible' : 'hidden')};
|
105
|
-
${({ outlined }) => outlined && 'left: 0px; top: 90%;'};
|
106
|
-
|
107
|
-
ul {
|
108
|
-
max-height: ${({ show }) => (show ? '192px' : '0px')};
|
109
|
-
}
|
110
|
-
`;
|
111
|
-
const ResultsList = styled.ul `
|
112
|
-
position: relative;
|
113
|
-
list-style: none;
|
114
|
-
overflow-y: auto;
|
115
|
-
padding: 0;
|
116
|
-
margin: 0;
|
117
|
-
background-color: ${theme.colors.white};
|
118
|
-
border: 1px solid ${theme.colors.outline};
|
119
|
-
border-bottom-left-radius: 8px;
|
120
|
-
border-bottom-right-radius: 8px;
|
121
|
-
z-index: 1000;
|
122
|
-
|
123
|
-
${({ outlined }) => outlined &&
|
124
|
-
`
|
125
|
-
border: 2px solid ${theme.colors.outline};
|
126
|
-
`}
|
127
|
-
|
128
|
-
li {
|
129
|
-
padding: 16px 14px;
|
130
|
-
box-sizing: border-box;
|
131
|
-
font-size: 16px;
|
132
|
-
color: ${theme.colors.secondary};
|
133
|
-
cursor: pointer;
|
134
|
-
|
135
|
-
&:hover {
|
136
|
-
background-color: ${theme.colors.background};
|
137
|
-
}
|
138
|
-
}
|
139
|
-
`;
|
140
114
|
const SearchIcon = styled(Icon) `
|
141
115
|
margin-right: 8px;
|
142
116
|
`;
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"SearchInput.js","sourceRoot":"","sources":["../../src/SearchInput/SearchInput.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,
|
1
|
+
{"version":3,"file":"SearchInput.js","sourceRoot":"","sources":["../../src/SearchInput/SearchInput.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAA+B,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAC7E,OAAO,MAAM,MAAM,mBAAmB,CAAA;AACtC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AAEjC,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAChC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,KAAK,EAAoB,MAAM,iBAAiB,CAAA;AACzD,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AACzC,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAA;AAClE,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAmB/C,MAAM,CAAC,MAAM,WAAW,GAAyB,CAAC,EAcjD,EAAE,EAAE;QAd6C,EAChD,EAAE,EAAE,MAAM,EACV,IAAI,GAAG,cAAc,EACrB,SAAS,GAAG,EAAE,EACd,WAAW,EACX,UAAU,EACV,OAAO,EACP,uBAAuB,GAAG,KAAK,EAC/B,QAAQ,GAAG,KAAK,EAChB,QAAQ,GAAG,KAAK,EAChB,aAAa,GAAG,KAAK,EACrB,MAAM,EACN,KAAK,OAEN,EADI,UAAU,cAbmC,0JAcjD,CADc;IAEb,MAAM,EAAE,GAAG,WAAW,CAAC,MAAM,CAAC,CAAA;IAC9B,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IACrD,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,oBAAoB,CAC5D;QACE,YAAY,EAAE,IAAI;QAClB,SAAS,EAAE,KAAK;KACjB,CACF,CAAA;IAED,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAgB,IAAI,CAAC,CAAA;IAEnE,MAAM,YAAY,GAAG,OAAO,CAAC,GAAG,EAAE;QAChC,IAAI,WAAW,KAAK,IAAI,IAAI,WAAW,KAAK,EAAE,EAAE;YAC9C,OAAO,UAAU,CAAA;SAClB;QAED,OAAO,UAAU,CAAC,MAAM,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CACrC,KAAK,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,WAAW,CAAC,iBAAiB,EAAE,CAAC,CAC9D,CAAA;IACH,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAA;IAEjB,MAAM,qBAAqB,GAAG,GAAG,EAAE;;QACjC,IAAI,WAAW,KAAK,IAAI,EAAE;YACxB,OAAO,WAAW,CAAA;SACnB;QAED,IAAI,aAAa,KAAK,IAAI,EAAE;YAC1B,OAAO,CACL,CAAA,MAAA,UAAU,CAAC,IAAI,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,KAAK,aAAa,CAAC,0CAAE,KAAK,KAAI,EAAE,CACzE,CAAA;SACF;QAED,OAAO,EAAE,CAAA;IACX,CAAC,CAAA;IAED,MAAM,UAAU,GAAG,aAAa,KAAK,IAAI,CAAA;IACzC,MAAM,kBAAkB,GAAG,qBAAqB,EAAE,CAAA;IAElD,MAAM,iBAAiB,GAAG,CAAC,KAAoB,EAAE,EAAE;QACjD,cAAc,CAAC,KAAK,CAAC,CAAA;QAErB,IAAI,KAAK,KAAK,IAAI,EAAE;YAClB,cAAc,CAAC,KAAK,CAAC,CAAA;SACtB;aAAM;YACL,cAAc,CAAC,CAAC,IAAI,KAAK,CAAC,MAAM,CAAC,CAAA;SAClC;IACH,CAAC,CAAA;IAED,MAAM,iBAAiB,GAAG,CAAC,KAAoC,EAAQ,EAAE;QACvE,MAAM,SAAS,GAAG,KAAK,CAAC,aAAa,CAAC,KAAK,CAAA;QAC3C,iBAAiB,CAAC,SAAS,CAAC,CAAA;IAC9B,CAAC,CAAA;IAED,MAAM,YAAY,GAAG,CAAC,SAAiB,EAAQ,EAAE;QAC/C,iBAAiB,CAAC,IAAI,CAAC,CAAA;QAEvB,gBAAgB,CAAC,SAAS,CAAC,CAAA;QAC3B,OAAO,CAAC,SAAS,CAAC,CAAA;IACpB,CAAC,CAAA;IAED,OAAO,CACL,oBAAC,KAAK,kBACJ,SAAS,EAAE,SAAS,EACpB,aAAa,EAAE,aAAa,EAC5B,EAAE,EAAE,EAAE,EACN,QAAQ,EAAE,QAAQ,IACd,UAAU;QAEd,oBAAC,cAAc,IAAC,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,UAAU;YACrD,QAAQ,IAAI,oBAAC,UAAU,IAAC,IAAI,EAAE,EAAE,EAAE,MAAM,EAAC,QAAQ,EAAC,KAAK,EAAC,SAAS,GAAG;YACrE,oBAAC,WAAW,IACV,EAAE,EAAE,EAAE,EACN,IAAI,EAAC,MAAM,EACX,IAAI,EAAE,IAAI,EACV,WAAW,EAAE,WAAW,EACxB,YAAY,EAAC,KAAK,EAClB,KAAK,EAAE,kBAAkB,EACzB,QAAQ,EAAE,iBAAiB,EAC3B,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,UAAU,EACpB,MAAM,EAAE,MAAM,GACd,CACa;QAEhB,WAAW,IAAI,CACd,oBAAC,aAAa,IACZ,aAAa,EAAE,YAAY,EAC3B,QAAQ,EAAE,YAAY,EACtB,QAAQ,EAAE,QAAQ,EAClB,gBAAgB,EAAE,uBAAuB,GACzC,CACH,CACK,CACT,CAAA;AACH,CAAC,CAAA;AAWD,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAAU;;;mBAGxB,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAChC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,aAAa,KAAK,CAAC,MAAM,CAAC,OAAO,EAAE;IACvD,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CACjB,QAAQ;IACR;wBACoB,KAAK,CAAC,MAAM,CAAC,KAAK;wBAClB,KAAK,CAAC,MAAM,CAAC,OAAO;;;GAGzC;aACU,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC;;;;;oBAKjD,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC;;;IAGjD,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CACjB,QAAQ;IACR;oBACgB,KAAK,CAAC,MAAM,CAAC,OAAO;GACrC;WACQ,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CACxB,QAAQ,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,MAAM,CAAC,SAAS,EAAE;CACrE,CAAA;AASD,MAAM,WAAW,GAAG,MAAM,CAAC,KAAK,CAAO;;;;;;;;;aAS1B,KAAK,CAAC,MAAM,CAAC,OAAO;;;IAG7B,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CACjB,QAAQ;IACR;;GAED;CACF,CAAA;AAED,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;CAE9B,CAAA"}
|
@@ -0,0 +1,13 @@
|
|
1
|
+
import { FC } from 'react';
|
2
|
+
declare type Option = {
|
3
|
+
label: string;
|
4
|
+
value: string;
|
5
|
+
};
|
6
|
+
declare type SearchOptionsProps = {
|
7
|
+
displayedList: Array<Option>;
|
8
|
+
onSelect: (option: string) => void;
|
9
|
+
positionRelative: boolean;
|
10
|
+
outlined: boolean;
|
11
|
+
};
|
12
|
+
export declare const SearchOptions: FC<SearchOptionsProps>;
|
13
|
+
export {};
|
@@ -0,0 +1,48 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import styled from 'styled-components';
|
3
|
+
import { theme } from '../theme';
|
4
|
+
export const SearchOptions = ({ displayedList, onSelect, outlined, positionRelative, }) => {
|
5
|
+
return (React.createElement(StyledResultsContainer, { positionRelative: positionRelative, outlined: outlined },
|
6
|
+
React.createElement(ResultsList, { outlined: outlined }, displayedList.length ? (displayedList.map((el, i) => (React.createElement("li", { key: i, onClick: () => onSelect(el.value) }, el.label)))) : (React.createElement("li", null, "No results")))));
|
7
|
+
};
|
8
|
+
const StyledResultsContainer = styled.div `
|
9
|
+
box-sizing: border-box;
|
10
|
+
overflow-y: hidden;
|
11
|
+
${({ positionRelative }) => !positionRelative && 'position: absolute;'}
|
12
|
+
width: 100%;
|
13
|
+
${({ outlined }) => outlined && 'left: 0px; top: 90%;'};
|
14
|
+
|
15
|
+
ul {
|
16
|
+
max-height: 192px;
|
17
|
+
}
|
18
|
+
`;
|
19
|
+
const ResultsList = styled.ul `
|
20
|
+
position: relative;
|
21
|
+
list-style: none;
|
22
|
+
overflow-y: auto;
|
23
|
+
padding: 0;
|
24
|
+
margin: 0;
|
25
|
+
background-color: ${theme.colors.white};
|
26
|
+
border: 1px solid ${theme.colors.outline};
|
27
|
+
border-bottom-left-radius: 8px;
|
28
|
+
border-bottom-right-radius: 8px;
|
29
|
+
z-index: 1000;
|
30
|
+
|
31
|
+
${({ outlined }) => outlined &&
|
32
|
+
`
|
33
|
+
border: 2px solid ${theme.colors.outline};
|
34
|
+
`}
|
35
|
+
|
36
|
+
li {
|
37
|
+
padding: 16px 14px;
|
38
|
+
box-sizing: border-box;
|
39
|
+
font-size: 16px;
|
40
|
+
color: ${theme.colors.secondary};
|
41
|
+
cursor: pointer;
|
42
|
+
|
43
|
+
&:hover {
|
44
|
+
background-color: ${theme.colors.background};
|
45
|
+
}
|
46
|
+
}
|
47
|
+
`;
|
48
|
+
//# sourceMappingURL=SearchOptions.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"SearchOptions.js","sourceRoot":"","sources":["../../src/SearchInput/SearchOptions.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAa,MAAM,OAAO,CAAA;AACjC,OAAO,MAAM,MAAM,mBAAmB,CAAA;AACtC,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAchC,MAAM,CAAC,MAAM,aAAa,GAA2B,CAAC,EACpD,aAAa,EACb,QAAQ,EACR,QAAQ,EACR,gBAAgB,GACjB,EAAE,EAAE;IACH,OAAO,CACL,oBAAC,sBAAsB,IACrB,gBAAgB,EAAE,gBAAgB,EAClC,QAAQ,EAAE,QAAQ;QAElB,oBAAC,WAAW,IAAC,QAAQ,EAAE,QAAQ,IAC5B,aAAa,CAAC,MAAM,CAAC,CAAC,CAAC,CACtB,aAAa,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,CAAC,EAAE,EAAE,CAAC,CAC3B,4BAAI,GAAG,EAAE,CAAC,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,KAAK,CAAC,IAC1C,EAAE,CAAC,KAAK,CACN,CACN,CAAC,CACH,CAAC,CAAC,CAAC,CACF,6CAAmB,CACpB,CACW,CACS,CAC1B,CAAA;AACH,CAAC,CAAA;AAED,MAAM,sBAAsB,GAAG,MAAM,CAAC,GAAG,CAExC;;;IAGG,CAAC,EAAE,gBAAgB,EAAE,EAAE,EAAE,CAAC,CAAC,gBAAgB,IAAI,qBAAqB;;IAEpE,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,QAAQ,IAAI,sBAAsB;;;;;CAKvD,CAAA;AAED,MAAM,WAAW,GAAG,MAAM,CAAC,EAAE,CAAsC;;;;;;sBAM7C,KAAK,CAAC,MAAM,CAAC,KAAK;sBAClB,KAAK,CAAC,MAAM,CAAC,OAAO;;;;;IAKtC,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CACjB,QAAQ;IACR;wBACoB,KAAK,CAAC,MAAM,CAAC,OAAO;GACzC;;;;;;aAMU,KAAK,CAAC,MAAM,CAAC,SAAS;;;;0BAIT,KAAK,CAAC,MAAM,CAAC,UAAU;;;CAGhD,CAAA"}
|
@@ -18,10 +18,9 @@ export const InternalField = (_a) => {
|
|
18
18
|
return (React.createElement(Container, Object.assign({ as: fieldType === 'field' ? 'div' : 'fieldset', className: className }, marginProps),
|
19
19
|
label && (React.createElement(React.Fragment, null, renderAsTitle ? (React.createElement(Box, { mb: "16px" },
|
20
20
|
React.createElement(Text, { tag: fieldType === 'field' ? 'label' : 'legend', typo: "heading-small", htmlFor: htmlFor }, label),
|
21
|
-
assistiveText && (React.createElement(Text, { tag: "p", color: "subtext", mt: { custom: 4 } }, assistiveText)))) : (React.createElement(
|
22
|
-
|
23
|
-
|
24
|
-
required && (React.createElement(Text, { tag: "span", typo: "body-small", color: "error" }, "*"))))))),
|
21
|
+
assistiveText && (React.createElement(Text, { tag: "p", color: "subtext", mt: { custom: 4 } }, assistiveText)))) : (React.createElement(Text, { tag: "label", typo: "label", color: "subtext", htmlFor: htmlFor, mb: { custom: outlined ? 4 : 0 } },
|
22
|
+
label,
|
23
|
+
required && (React.createElement(Text, { tag: "span", typo: "body-small", color: "error" }, "*")))))),
|
25
24
|
React.createElement(Box, null, children),
|
26
25
|
error && (React.createElement(Text, { tag: "span", typo: "caption", color: "error", mt: "8px" }, errorMsg))));
|
27
26
|
};
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"InternalField.js","sourceRoot":"","sources":["../../../src/fields/components/InternalField.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAoB,MAAM,OAAO,CAAA;AACxC,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAEtC,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAA;AACjC,OAAO,EAAE,GAAG,EAAE,MAAM,WAAW,CAAA;AAW/B,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,EAaT,EAAE,EAAE;QAbK,EAC5B,QAAQ,EACR,SAAS,EACT,aAAa,EACb,OAAO,EACP,SAAS,EACT,KAAK,EACL,aAAa,EACb,QAAQ,GAAG,KAAK,EAChB,KAAK,EACL,QAAQ,EACR,QAAQ,OAEW,EADhB,WAAW,cAZc,yIAa7B,CADe;IAEd,OAAO,CACL,oBAAC,SAAS,kBACR,EAAE,EAAE,SAAS,KAAK,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,UAAU,EAC9C,SAAS,EAAE,SAAS,IAChB,WAAW;QAEd,KAAK,IAAI,CACR,0CACG,aAAa,CAAC,CAAC,CAAC,CACf,oBAAC,GAAG,IAAC,EAAE,EAAC,MAAM;YACZ,oBAAC,IAAI,IACH,GAAG,EAAE,SAAS,KAAK,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,EAC/C,IAAI,EAAC,eAAe,EACpB,OAAO,EAAE,OAAO,IAEf,KAAK,CACD;YAEN,aAAa,IAAI,CAChB,oBAAC,IAAI,IAAC,GAAG,EAAC,GAAG,EAAC,KAAK,EAAC,SAAS,EAAC,EAAE,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,IAC5C,aAAa,CACT,CACR,CACG,CACP,CAAC,CAAC,CAAC,CACF,oBAAC,
|
1
|
+
{"version":3,"file":"InternalField.js","sourceRoot":"","sources":["../../../src/fields/components/InternalField.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAoB,MAAM,OAAO,CAAA;AACxC,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAEtC,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAA;AACjC,OAAO,EAAE,GAAG,EAAE,MAAM,WAAW,CAAA;AAW/B,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,EAaT,EAAE,EAAE;QAbK,EAC5B,QAAQ,EACR,SAAS,EACT,aAAa,EACb,OAAO,EACP,SAAS,EACT,KAAK,EACL,aAAa,EACb,QAAQ,GAAG,KAAK,EAChB,KAAK,EACL,QAAQ,EACR,QAAQ,OAEW,EADhB,WAAW,cAZc,yIAa7B,CADe;IAEd,OAAO,CACL,oBAAC,SAAS,kBACR,EAAE,EAAE,SAAS,KAAK,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,UAAU,EAC9C,SAAS,EAAE,SAAS,IAChB,WAAW;QAEd,KAAK,IAAI,CACR,0CACG,aAAa,CAAC,CAAC,CAAC,CACf,oBAAC,GAAG,IAAC,EAAE,EAAC,MAAM;YACZ,oBAAC,IAAI,IACH,GAAG,EAAE,SAAS,KAAK,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,EAC/C,IAAI,EAAC,eAAe,EACpB,OAAO,EAAE,OAAO,IAEf,KAAK,CACD;YAEN,aAAa,IAAI,CAChB,oBAAC,IAAI,IAAC,GAAG,EAAC,GAAG,EAAC,KAAK,EAAC,SAAS,EAAC,EAAE,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,IAC5C,aAAa,CACT,CACR,CACG,CACP,CAAC,CAAC,CAAC,CACF,oBAAC,IAAI,IACH,GAAG,EAAC,OAAO,EACX,IAAI,EAAC,OAAO,EACZ,KAAK,EAAC,SAAS,EACf,OAAO,EAAE,OAAO,EAChB,EAAE,EAAE,EAAE,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE;YAE/B,KAAK;YACL,QAAQ,IAAI,CACX,oBAAC,IAAI,IAAC,GAAG,EAAC,MAAM,EAAC,IAAI,EAAC,YAAY,EAAC,KAAK,EAAC,OAAO,QAEzC,CACR,CACI,CACR,CACA,CACJ;QAED,oBAAC,GAAG,QAAE,QAAQ,CAAO;QAEpB,KAAK,IAAI,CACR,oBAAC,IAAI,IAAC,GAAG,EAAC,MAAM,EAAC,IAAI,EAAC,SAAS,EAAC,KAAK,EAAC,OAAO,EAAC,EAAE,EAAC,KAAK,IACnD,QAAQ,CACJ,CACR,CACS,CACb,CAAA;AACH,CAAC,CAAA;AAED,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAC,CAAA;;;;;;;;CAQ5B,CAAA"}
|
package/dist/index.d.ts
CHANGED
@@ -31,6 +31,7 @@ export * from './Textarea';
|
|
31
31
|
export * from './TextInput';
|
32
32
|
export * from './theme';
|
33
33
|
export * from './Toggle';
|
34
|
+
export * from './fields/Field';
|
34
35
|
export * from './fields/Fieldset';
|
35
36
|
export * from './fontStyle';
|
36
37
|
export { MarginProps, PaddingProps } from './utils/space';
|
package/dist/index.js
CHANGED
package/dist/index.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA;AAC3B,cAAc,kBAAkB,CAAA;AAChC,cAAc,OAAO,CAAA;AACrB,cAAc,UAAU,CAAA;AACxB,cAAc,QAAQ,CAAA;AACtB,cAAc,YAAY,CAAA;AAC1B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,QAAQ,CAAA;AACtB,cAAc,4BAA4B,CAAA;AAC1C,cAAc,cAAc,CAAA;AAC5B,cAAc,WAAW,CAAA;AACzB,cAAc,YAAY,CAAA;AAC1B,cAAc,SAAS,CAAA;AACvB,cAAc,QAAQ,CAAA;AACtB,cAAc,eAAe,CAAA;AAC7B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,QAAQ,CAAA;AACtB,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,SAAS,CAAA;AACvB,cAAc,eAAe,CAAA;AAC7B,cAAc,cAAc,CAAA;AAC5B,cAAc,eAAe,CAAA;AAC7B,cAAc,cAAc,CAAA;AAC5B,cAAc,OAAO,CAAA;AACrB,cAAc,eAAe,CAAA;AAC7B,cAAc,kBAAkB,CAAA;AAChC,cAAc,OAAO,CAAA;AACrB,cAAc,QAAQ,CAAA;AACtB,cAAc,YAAY,CAAA;AAC1B,cAAc,aAAa,CAAA;AAC3B,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,mBAAmB,CAAA;AACjC,cAAc,aAAa,CAAA"}
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA;AAC3B,cAAc,kBAAkB,CAAA;AAChC,cAAc,OAAO,CAAA;AACrB,cAAc,UAAU,CAAA;AACxB,cAAc,QAAQ,CAAA;AACtB,cAAc,YAAY,CAAA;AAC1B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,QAAQ,CAAA;AACtB,cAAc,4BAA4B,CAAA;AAC1C,cAAc,cAAc,CAAA;AAC5B,cAAc,WAAW,CAAA;AACzB,cAAc,YAAY,CAAA;AAC1B,cAAc,SAAS,CAAA;AACvB,cAAc,QAAQ,CAAA;AACtB,cAAc,eAAe,CAAA;AAC7B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,QAAQ,CAAA;AACtB,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,SAAS,CAAA;AACvB,cAAc,eAAe,CAAA;AAC7B,cAAc,cAAc,CAAA;AAC5B,cAAc,eAAe,CAAA;AAC7B,cAAc,cAAc,CAAA;AAC5B,cAAc,OAAO,CAAA;AACrB,cAAc,eAAe,CAAA;AAC7B,cAAc,kBAAkB,CAAA;AAChC,cAAc,OAAO,CAAA;AACrB,cAAc,QAAQ,CAAA;AACtB,cAAc,YAAY,CAAA;AAC1B,cAAc,aAAa,CAAA;AAC3B,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,mBAAmB,CAAA;AACjC,cAAc,aAAa,CAAA"}
|
@@ -0,0 +1,13 @@
|
|
1
|
+
import { useCallback, useState } from 'react';
|
2
|
+
export const useControllableState = ({ initialState, stateProp, }) => {
|
3
|
+
const [state, setState] = useState(initialState);
|
4
|
+
const returnedState = stateProp !== undefined ? stateProp : state;
|
5
|
+
const returnedSetState = useCallback((nextState) => {
|
6
|
+
if (stateProp !== undefined) {
|
7
|
+
return;
|
8
|
+
}
|
9
|
+
setState(nextState);
|
10
|
+
}, [state, stateProp]);
|
11
|
+
return [returnedState, returnedSetState];
|
12
|
+
};
|
13
|
+
//# sourceMappingURL=useControlledState.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"useControlledState.js","sourceRoot":"","sources":["../../src/utils/useControlledState.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAE7C,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAY,EAC9C,YAAY,EACZ,SAAS,GAIV,EAAE,EAAE;IACH,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,YAAY,CAAC,CAAA;IAEhD,MAAM,aAAa,GAAG,SAAS,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAA;IACjE,MAAM,gBAAgB,GAAG,WAAW,CAGlC,CAAC,SAAS,EAAE,EAAE;QACZ,IAAI,SAAS,KAAK,SAAS,EAAE;YAC3B,OAAM;SACP;QAED,QAAQ,CAAC,SAAS,CAAC,CAAA;IACrB,CAAC,EACD,CAAC,KAAK,EAAE,SAAS,CAAC,CACnB,CAAA;IAED,OAAO,CAAC,aAAa,EAAE,gBAAgB,CAAU,CAAA;AACnD,CAAC,CAAA"}
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@mrshmllw/smores-react",
|
3
|
-
"version": "2.
|
3
|
+
"version": "2.8.0",
|
4
4
|
"main": "./dist/index.js",
|
5
5
|
"description": "Collection of React components used by Marshmallow Technology",
|
6
6
|
"keywords": [
|
@@ -41,7 +41,7 @@
|
|
41
41
|
"@testing-library/jest-dom": "^5.11.4",
|
42
42
|
"@testing-library/react": "^12.0.0",
|
43
43
|
"@testing-library/react-hooks": "^8.0.0",
|
44
|
-
"@types/jest": "^
|
44
|
+
"@types/jest": "^29.0.0",
|
45
45
|
"@types/node": "^18.0.0",
|
46
46
|
"@types/react": "^17.0.0",
|
47
47
|
"@types/react-dom": "^17.0.9",
|
@@ -51,16 +51,16 @@
|
|
51
51
|
"@typescript-eslint/eslint-plugin": "^5.31.0",
|
52
52
|
"@typescript-eslint/parser": "^5.31.0",
|
53
53
|
"babel-eslint": "^10.1.0",
|
54
|
-
"babel-jest": "^
|
54
|
+
"babel-jest": "^29.0.2",
|
55
55
|
"babel-loader": "^8.1.0",
|
56
56
|
"eslint": "^7.9.0",
|
57
57
|
"eslint-config-prettier": "^8.2.0",
|
58
|
-
"eslint-plugin-jest": "^
|
58
|
+
"eslint-plugin-jest": "^27.0.1",
|
59
59
|
"eslint-plugin-react": "^7.29.2",
|
60
60
|
"eslint-plugin-react-hooks": "^4.1.2",
|
61
61
|
"husky": "^8.0.1",
|
62
|
-
"jest": "^
|
63
|
-
"jest-environment-jsdom": "^
|
62
|
+
"jest": "^29.0.2",
|
63
|
+
"jest-environment-jsdom": "^29.0.2",
|
64
64
|
"jest-styled-components": "^7.0.3",
|
65
65
|
"lint-staged": "^13.0.0",
|
66
66
|
"prettier": "^2.1.2",
|