@roomstay/frontend 2.1.25 → 2.1.26
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/main.bundle.js +1 -1
- package/dist/src/components/generic/Select/InputSelect.js +6 -5
- package/dist/src/components/generic/Select/InputSelect.js.map +1 -1
- package/dist/src/components/generic/TextBox.d.ts +1 -0
- package/dist/src/components/generic/TextBox.js +4 -3
- package/dist/src/components/generic/TextBox.js.map +1 -1
- package/dist/test.bundle.js +1 -1
- package/package.json +1 -1
|
@@ -30,6 +30,8 @@ const react_1 = __importStar(require("react"));
|
|
|
30
30
|
const TextBox_1 = __importDefault(require("../TextBox"));
|
|
31
31
|
const Select_1 = require("./Select");
|
|
32
32
|
const AutoFocusOnSelect_1 = require("../../../hooks/AutoFocusOnSelect");
|
|
33
|
+
const InputSelect_module_scss_1 = __importDefault(require("./InputSelect.module.scss"));
|
|
34
|
+
const Icon_1 = require("../Icon/Icon");
|
|
33
35
|
function InputSelect({ value, onChange, options, keyName, labelName, label, placeholder, required, validationStatus, }) {
|
|
34
36
|
var _a;
|
|
35
37
|
const [container, setContainer] = (0, react_1.useState)(null);
|
|
@@ -43,14 +45,13 @@ function InputSelect({ value, onChange, options, keyName, labelName, label, plac
|
|
|
43
45
|
return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
44
46
|
react_1.default.createElement(TextBox_1.default, { label: label, inputProps: {
|
|
45
47
|
onClick: onTriggerClicked,
|
|
46
|
-
|
|
47
|
-
|
|
48
|
+
autoComplete: 'off',
|
|
49
|
+
}, value: ((_a = getOption(value)) === null || _a === void 0 ? void 0 : _a.text) || '', ref: innerRef, placeholder: placeholder, required: required, validationStatus: validationStatus, className: InputSelect_module_scss_1.default['text-input'], icon: Icon_1.IconType.ArrowDown2, iconPosition: "right" }),
|
|
50
|
+
react_1.default.createElement("div", { ref: setContainer, style: { width: '100%', display: 'block' } }),
|
|
48
51
|
react_1.default.createElement(Select_1.Select, { keyName: keyName, labelName: labelName, options: options, target: container, onClose: onDropdownClosed, onChange: (value) => {
|
|
49
52
|
onItemSelected();
|
|
50
53
|
onChange === null || onChange === void 0 ? void 0 : onChange(value);
|
|
51
|
-
}, open: isDropdownOpen
|
|
52
|
-
className: 'w-100',
|
|
53
|
-
} })));
|
|
54
|
+
}, open: isDropdownOpen })));
|
|
54
55
|
}
|
|
55
56
|
exports.default = InputSelect;
|
|
56
57
|
//# sourceMappingURL=InputSelect.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InputSelect.js","sourceRoot":"/","sources":["src/components/generic/Select/InputSelect.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA8D;AAC9D,2EAAqE;AACrE,+DAAiF;AACjF,iEAAiE;
|
|
1
|
+
{"version":3,"file":"InputSelect.js","sourceRoot":"/","sources":["src/components/generic/Select/InputSelect.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA8D;AAC9D,2EAAqE;AACrE,+DAAiF;AACjF,iEAAiE;AAEjE,wFAA+C;AAC/C,uCAAwC;AAOxC,SAAwB,WAAW,CAA0D,EACzF,KAAK,EACL,QAAQ,EACR,OAAO,EACP,OAAO,EACP,SAAS,EACT,KAAK,EACL,WAAW,EACX,QAAQ,EACR,gBAAgB,GACkB;;IAClC,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,IAAA,gBAAQ,EAAwB,IAAI,CAAC,CAAC;IACxE,MAAM,QAAQ,GAAG,IAAA,cAAM,EAAmB,IAAI,CAAC,CAAC;IAEhD,MAAM,SAAS,GAAG,CAAC,GAAsB,EAAuB,EAAE;QAC9D,OAAO,OAAO,CAAC,IAAI,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,CAAC,KAAK,GAAG,CAAC,CAAC;IAC7D,CAAC,CAAC;IAEF,MAAM,EAAE,gBAAgB,EAAE,cAAc,EAAE,gBAAgB,EAAE,cAAc,EAAE,GAAG,IAAA,wCAAoB,EAAC;QAChG,GAAG,EAAE,QAAQ,CAAC,OAAO;KACxB,CAAC,CAAC;IAEH,OAAO,CACH;QACI,8BAAC,iBAAO,IACJ,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE;gBACR,OAAO,EAAE,gBAAgB;gBACzB,YAAY,EAAE,KAAK;aACtB,EACD,KAAK,EAAE,CAAA,MAAA,SAAS,CAAC,KAAK,CAAC,0CAAE,IAAI,KAAI,EAAE,EACnC,GAAG,EAAE,QAAQ,EACb,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,EAClB,gBAAgB,EAAE,gBAAgB,EAClC,SAAS,EAAE,iCAAM,CAAC,YAAY,CAAC,EAC/B,IAAI,EAAE,eAAQ,CAAC,UAAU,EACzB,YAAY,EAAC,OAAO,GACtB;QACF,uCAAK,GAAG,EAAE,YAAY,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,GAAI;QACtE,8BAAC,eAAM,IACH,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,SAAS,EACjB,OAAO,EAAE,gBAAgB,EACzB,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;gBAChB,cAAc,EAAE,CAAC;gBACjB,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,KAAK,CAAC,CAAC;YACtB,CAAC,EACD,IAAI,EAAE,cAAc,GACtB,CACH,CACN,CAAC;AACN,CAAC;AAtDD,8BAsDC","sourcesContent":["import React, { ReactElement, useRef, useState } from 'react';\nimport TextBox, { TextBoxProps } from '@/components/generic/TextBox';\nimport { Option, Select, SelectProps } from '@/components/generic/Select/Select';\nimport { useAutoFocusOnSelect } from '@/hooks/AutoFocusOnSelect';\n\nimport styles from './InputSelect.module.scss';\nimport { IconType } from '../Icon/Icon';\n\ntype IInputSelectProps<TOption extends Option<KeyName>, KeyName extends string> = Pick<SelectProps<TOption, KeyName>, 'value' | 'onChange' | 'keyName' | 'labelName'> &\n Pick<TextBoxProps, 'label' | 'placeholder' | 'required' | 'validationStatus'> & {\n options: TOption[];\n };\n\nexport default function InputSelect<TOption extends Option<KeyName>, KeyName extends string>({\n value,\n onChange,\n options,\n keyName,\n labelName,\n label,\n placeholder,\n required,\n validationStatus,\n}: IInputSelectProps<TOption, KeyName>): ReactElement | null {\n const [container, setContainer] = useState<HTMLDivElement | null>(null);\n const innerRef = useRef<HTMLInputElement>(null);\n\n const getOption = (key?: TOption[KeyName]): TOption | undefined => {\n return options.find((option) => option[keyName] === key);\n };\n\n const { onDropdownClosed, onItemSelected, onTriggerClicked, isDropdownOpen } = useAutoFocusOnSelect({\n ref: innerRef.current,\n });\n\n return (\n <>\n <TextBox\n label={label}\n inputProps={{\n onClick: onTriggerClicked,\n autoComplete: 'off',\n }}\n value={getOption(value)?.text || ''}\n ref={innerRef}\n placeholder={placeholder}\n required={required}\n validationStatus={validationStatus}\n className={styles['text-input']}\n icon={IconType.ArrowDown2}\n iconPosition=\"right\"\n />\n <div ref={setContainer} style={{ width: '100%', display: 'block' }} />\n <Select<TOption, KeyName>\n keyName={keyName}\n labelName={labelName}\n options={options}\n target={container}\n onClose={onDropdownClosed}\n onChange={(value) => {\n onItemSelected();\n onChange?.(value);\n }}\n open={isDropdownOpen}\n />\n </>\n );\n}\n"]}
|
|
@@ -35,6 +35,7 @@ const TextBox = (props, ref) => {
|
|
|
35
35
|
const inputProperties = Object.assign({ type, className: 'text-small', placeholder: props.placeholder }, props.inputProps);
|
|
36
36
|
if (props.name) {
|
|
37
37
|
inputProperties.name = props.name;
|
|
38
|
+
inputProperties.id = `${props.name}${type}Input`;
|
|
38
39
|
}
|
|
39
40
|
if (props.required) {
|
|
40
41
|
inputProperties.required = props.required;
|
|
@@ -53,6 +54,7 @@ const TextBox = (props, ref) => {
|
|
|
53
54
|
}
|
|
54
55
|
const classes = (0, classnames_1.default)('textbox c-input', {
|
|
55
56
|
'--has-icon': !!icon,
|
|
57
|
+
[`--icon-${props.iconPosition}`]: !!props.iconPosition,
|
|
56
58
|
'--selected': selected,
|
|
57
59
|
'--wide': props.wide,
|
|
58
60
|
'--success': props.validationStatus === 'success',
|
|
@@ -65,15 +67,14 @@ const TextBox = (props, ref) => {
|
|
|
65
67
|
const onBlurHandler = () => {
|
|
66
68
|
return setSelected(false);
|
|
67
69
|
};
|
|
68
|
-
const id = `${props.name}${type}Input`;
|
|
69
70
|
return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
70
|
-
props.label && (react_1.default.createElement("label", { className: "text-bold d-flex u-marg-bottom--lighter", htmlFor: id },
|
|
71
|
+
props.label && (react_1.default.createElement("label", { className: "text-bold d-flex u-marg-bottom--lighter", htmlFor: inputProperties.id },
|
|
71
72
|
react_1.default.createElement(react_1.default.Fragment, null,
|
|
72
73
|
props.label,
|
|
73
74
|
(props === null || props === void 0 ? void 0 : props.required) && react_1.default.createElement("div", { style: { color: 'red' } }, "*")))),
|
|
74
75
|
react_1.default.createElement("label", { className: classes },
|
|
75
76
|
icon,
|
|
76
|
-
react_1.default.createElement("input", Object.assign({}, inputProperties, {
|
|
77
|
+
react_1.default.createElement("input", Object.assign({}, inputProperties, { ref: ref, value: props.value, onFocus: onFocusHandler, onBlur: onBlurHandler, onKeyPress: props.onKeyPress })))));
|
|
77
78
|
};
|
|
78
79
|
exports.default = react_1.default.forwardRef(TextBox);
|
|
79
80
|
//# sourceMappingURL=TextBox.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextBox.js","sourceRoot":"/","sources":["src/components/generic/TextBox.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA6E;AAC7E,0EAAgE;AAEhE,4DAAoC;
|
|
1
|
+
{"version":3,"file":"TextBox.js","sourceRoot":"/","sources":["src/components/generic/TextBox.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { ForwardRefRenderFunction, ReactNode, useState } from 'react';\nimport Icon, { IconType } from '@/components/generic/Icon/Icon';\n\nimport classNames from 'classnames';\n\nexport interface TextBoxProps {\n icon?: IconType;\n iconPosition?: 'left' | 'right';\n placeholder?: string;\n wide?: boolean;\n type?: 'text' | 'tel' | 'password' | 'email';\n name?: string;\n required?: boolean;\n label?: ReactNode;\n\n validationStatus?: 'success' | 'error';\n\n value?: string;\n\n className?: string;\n\n onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;\n\n inputProps?: Omit<JSX.IntrinsicElements['input'], 'id' | 'ref' | 'value' | 'onFocus' | 'onBlur' | 'onKeyPress'>;\n\n onKeyPress?: JSX.IntrinsicElements['input']['onKeyPress'];\n}\n\nconst TextBox: ForwardRefRenderFunction<HTMLInputElement, TextBoxProps> = (props, ref) => {\n const [selected, setSelected] = useState(false);\n\n const type = props.type ? props.type : 'text';\n const inputProperties: JSX.IntrinsicElements['input'] = {\n type,\n className: 'text-small',\n placeholder: props.placeholder,\n ...props.inputProps,\n };\n\n if (props.name) {\n inputProperties.name = props.name;\n inputProperties.id = `${props.name}${type}Input`;\n }\n\n if (props.required) {\n inputProperties.required = props.required;\n }\n\n const onChange: JSX.IntrinsicElements['input']['onChange'] = (e) => {\n if (props.onChange) {\n props.onChange(e);\n }\n };\n\n if (props.onChange) {\n inputProperties.onChange = onChange;\n }\n\n let icon: ReactNode = '';\n\n if (props.icon) {\n icon = <Icon icon={props.icon} size=\"1em\" />;\n }\n\n const classes = classNames(\n 'textbox c-input',\n {\n '--has-icon': !!icon,\n [`--icon-${props.iconPosition}`]: !!props.iconPosition,\n '--selected': selected,\n '--wide': props.wide,\n '--success': props.validationStatus === 'success',\n '--error': props.validationStatus === 'error',\n '--disabled': inputProperties.disabled,\n },\n props.className\n );\n const onFocusHandler = () => {\n return setSelected(true);\n };\n const onBlurHandler = () => {\n return setSelected(false);\n };\n\n return (\n <>\n {props.label && (\n <label className=\"text-bold d-flex u-marg-bottom--lighter\" htmlFor={inputProperties.id}>\n <>\n {props.label}\n {props?.required && <div style={{ color: 'red' }}>*</div>}\n </>\n </label>\n )}\n <label className={classes}>\n {icon}\n <input {...inputProperties} ref={ref} value={props.value} onFocus={onFocusHandler} onBlur={onBlurHandler} onKeyPress={props.onKeyPress} />\n </label>\n </>\n );\n};\n\nexport default React.forwardRef(TextBox);\n"]}
|