@roomstay/frontend 2.1.19 → 2.1.20
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.d.ts +8 -0
- package/dist/src/components/generic/Select/InputSelect.js +56 -0
- package/dist/src/components/generic/Select/InputSelect.js.map +1 -0
- package/dist/src/components/generic/Select/Select.d.ts +3 -4
- package/dist/src/components/generic/Select/Select.js.map +1 -1
- package/dist/src/components/generic/TextArea.d.ts +6 -3
- package/dist/src/components/generic/TextArea.js +29 -6
- package/dist/src/components/generic/TextArea.js.map +1 -1
- package/dist/src/components/generic/TextBox.d.ts +2 -2
- package/dist/src/components/generic/TextBox.js +26 -4
- package/dist/src/components/generic/TextBox.js.map +1 -1
- package/dist/src/index.d.ts +1 -0
- package/dist/src/index.js +3 -1
- package/dist/src/index.js.map +1 -1
- package/dist/src/pages/steps/StepThanks/StepThanksComponent.js +3 -1
- package/dist/src/pages/steps/StepThanks/StepThanksComponent.js.map +1 -1
- package/dist/src/stories/Select.stories.d.ts +1 -18
- package/dist/src/stories/TextArea.stories.d.ts +2 -2
- package/dist/test.bundle.js +1 -1
- package/package.json +1 -1
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { ReactElement } from 'react';
|
|
2
|
+
import { TextBoxProps } from '../TextBox';
|
|
3
|
+
import { Option, SelectProps } from './Select';
|
|
4
|
+
type IInputSelectProps<TOption extends Option<KeyName>, KeyName extends string> = Pick<SelectProps<TOption, KeyName>, 'value' | 'onChange' | 'keyName' | 'labelName'> & Pick<TextBoxProps, 'label' | 'placeholder' | 'required'> & {
|
|
5
|
+
options: TOption[];
|
|
6
|
+
};
|
|
7
|
+
export default function InputSelect<TOption extends Option<KeyName>, KeyName extends string>({ value, onChange, options, keyName, labelName, label, placeholder, required, }: IInputSelectProps<TOption, KeyName>): ReactElement | null;
|
|
8
|
+
export {};
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
+
}) : function(o, v) {
|
|
16
|
+
o["default"] = v;
|
|
17
|
+
});
|
|
18
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
|
19
|
+
if (mod && mod.__esModule) return mod;
|
|
20
|
+
var result = {};
|
|
21
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
22
|
+
__setModuleDefault(result, mod);
|
|
23
|
+
return result;
|
|
24
|
+
};
|
|
25
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
26
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
27
|
+
};
|
|
28
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
29
|
+
const react_1 = __importStar(require("react"));
|
|
30
|
+
const TextBox_1 = __importDefault(require("../TextBox"));
|
|
31
|
+
const Select_1 = require("./Select");
|
|
32
|
+
const AutoFocusOnSelect_1 = require("../../../hooks/AutoFocusOnSelect");
|
|
33
|
+
function InputSelect({ value, onChange, options, keyName, labelName, label, placeholder, required, }) {
|
|
34
|
+
var _a;
|
|
35
|
+
const [container, setContainer] = (0, react_1.useState)(null);
|
|
36
|
+
const innerRef = (0, react_1.useRef)(null);
|
|
37
|
+
const getOption = (key) => {
|
|
38
|
+
return options.find((option) => option[keyName] === key);
|
|
39
|
+
};
|
|
40
|
+
const { onDropdownClosed, onItemSelected, onTriggerClicked, isDropdownOpen } = (0, AutoFocusOnSelect_1.useAutoFocusOnSelect)({
|
|
41
|
+
ref: innerRef.current,
|
|
42
|
+
});
|
|
43
|
+
return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
44
|
+
react_1.default.createElement(TextBox_1.default, { label: label, inputProps: {
|
|
45
|
+
onClick: onTriggerClicked,
|
|
46
|
+
}, value: ((_a = getOption(value)) === null || _a === void 0 ? void 0 : _a.text) || '', ref: innerRef, placeholder: placeholder, required: required }),
|
|
47
|
+
react_1.default.createElement("div", { ref: setContainer }),
|
|
48
|
+
react_1.default.createElement(Select_1.Select, { keyName: keyName, labelName: labelName, options: options, target: container, onClose: onDropdownClosed, onChange: (value) => {
|
|
49
|
+
onItemSelected();
|
|
50
|
+
onChange === null || onChange === void 0 ? void 0 : onChange(value);
|
|
51
|
+
}, open: isDropdownOpen, overlay: {
|
|
52
|
+
className: 'w-100',
|
|
53
|
+
} })));
|
|
54
|
+
}
|
|
55
|
+
exports.default = InputSelect;
|
|
56
|
+
//# sourceMappingURL=InputSelect.js.map
|
|
@@ -0,0 +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;AAOjE,SAAwB,WAAW,CAA0D,EACzF,KAAK,EACL,QAAQ,EACR,OAAO,EACP,OAAO,EACP,SAAS,EACT,KAAK,EACL,WAAW,EACX,QAAQ,GAC0B;;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;aAC5B,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,GACpB;QACF,uCAAK,GAAG,EAAE,YAAY,GAAI;QAC1B,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,EACpB,OAAO,EAAE;gBACL,SAAS,EAAE,OAAO;aACrB,GACH,CACH,CACN,CAAC;AACN,CAAC;AAnDD,8BAmDC","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\ntype IInputSelectProps<TOption extends Option<KeyName>, KeyName extends string> = Pick<SelectProps<TOption, KeyName>, 'value' | 'onChange' | 'keyName' | 'labelName'> &\n Pick<TextBoxProps, 'label' | 'placeholder' | 'required'> & {\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}: 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 }}\n value={getOption(value)?.text || ''}\n ref={innerRef}\n placeholder={placeholder}\n required={required}\n />\n <div ref={setContainer} />\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 overlay={{\n className: 'w-100',\n }}\n />\n </>\n );\n}\n"]}
|
|
@@ -11,7 +11,7 @@ export type TOptionGroup<T> = {
|
|
|
11
11
|
options: T[];
|
|
12
12
|
};
|
|
13
13
|
export type TSelectOptionKey<T> = TOptionGroup<T> | T;
|
|
14
|
-
type
|
|
14
|
+
export type SelectProps<TOption extends Option<KeyName>, KeyName extends string> = {
|
|
15
15
|
options: TSelectOptionKey<TOption>[];
|
|
16
16
|
keyName: KeyName;
|
|
17
17
|
value?: TOption[KeyName];
|
|
@@ -28,12 +28,11 @@ type Select<TOption extends Option<KeyName>, KeyName extends string> = {
|
|
|
28
28
|
overlay?: Partial<Omit<OverlayProps, 'children' | 'open' | 'container' | 'followElement' | 'onClose' | 'overlayRef'>>;
|
|
29
29
|
hideExpandIcon?: boolean;
|
|
30
30
|
};
|
|
31
|
-
export declare const InnerSelect: <TOption extends Option<KeyName>, KeyName extends string>({ target, open, onClose, options, value, onChange, keyName, labelName, className, offset, renderOption, nativeOnMobile, overlay, renderLabel, hideExpandIcon, }:
|
|
32
|
-
export declare const Select: <TOption extends Option<KeyName>, KeyName extends string>(p:
|
|
31
|
+
export declare const InnerSelect: <TOption extends Option<KeyName>, KeyName extends string>({ target, open, onClose, options, value, onChange, keyName, labelName, className, offset, renderOption, nativeOnMobile, overlay, renderLabel, hideExpandIcon, }: SelectProps<TOption, KeyName>, ref: Ref<HTMLDivElement | null>) => JSX.Element;
|
|
32
|
+
export declare const Select: <TOption extends Option<KeyName>, KeyName extends string>(p: SelectProps<TOption, KeyName> & {
|
|
33
33
|
ref?: React.Ref<HTMLDivElement> | undefined;
|
|
34
34
|
}) => JSX.Element;
|
|
35
35
|
export interface IDefaultSelectOption {
|
|
36
36
|
value: string;
|
|
37
37
|
text: string;
|
|
38
38
|
}
|
|
39
|
-
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.js","sourceRoot":"/","sources":["src/components/generic/Select/Select.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { forwardRef, ReactElement, ReactNode, Ref, useImperativeHandle, useMemo, useRef } from 'react';\nimport Icon, { IconType } from '../Icon/Icon';\n\nimport classNames from 'classnames';\n\nimport './Select.global.scss';\nimport { Overlay, OverlayProps } from '@/components/generic/Overlay/Overlay';\nimport { useKeyboardControlOnSelect } from '@/hooks/KeyboardControlOnSelect';\nimport { Color } from '@/util/Color';\nimport { useCombinedState } from '@/hooks/CombineState';\nimport { useWindowSize } from '@/hooks/WindowSize';\nimport Text, { TextType } from '@/components/generic/Text';\n\nexport type Option<KeyName extends string> = {\n [keyName in KeyName]: string;\n} & Record<any, any> & { options?: Option<KeyName>[] };\n\nexport type TOptionGroup<T> = {\n name: string;\n options: T[];\n};\n\nexport type TSelectOptionKey<T> = TOptionGroup<T> | T;\n\ntype Select<TOption extends Option<KeyName>, KeyName extends string> = {\n options: TSelectOptionKey<TOption>[];\n keyName: KeyName;\n\n value?: TOption[KeyName];\n labelName?: TOption[keyof TOption];\n target?: HTMLElement | null;\n open?: boolean;\n onClose?: (e: Event) => void;\n onChange?: (value: TOption[KeyName]) => void;\n className?: string;\n offset?: [number, number];\n renderOption?: (option?: TOption) => ReactElement | null;\n renderLabel?: (option?: TOption | null) => ReactElement | null;\n nativeOnMobile?: boolean;\n overlay?: Partial<Omit<OverlayProps, 'children' | 'open' | 'container' | 'followElement' | 'onClose' | 'overlayRef'>>;\n hideExpandIcon?: boolean;\n};\n\nconst MOBILE_BREAKPOINT = 992;\n\nexport const InnerSelect = <TOption extends Option<KeyName>, KeyName extends string>(\n {\n target,\n open,\n onClose,\n options = [],\n value,\n onChange,\n keyName,\n labelName,\n className,\n offset,\n renderOption,\n nativeOnMobile = false,\n overlay,\n renderLabel,\n hideExpandIcon,\n }: Select<TOption, KeyName>,\n ref: Ref<HTMLDivElement | null>\n) => {\n const { width } = useWindowSize();\n const targetRef = useRef<HTMLSpanElement>(null);\n const optionRefs = useRef<{ [id: string]: HTMLDivElement | null }>({});\n const optionContainerRef = useRef<HTMLDivElement | null>(null);\n const [_open, _setIsOpen] = useCombinedState<boolean>(open, false);\n const flattenOptions = useMemo<TOption[]>(() => {\n return options.reduce<TOption[]>((result, optionGroupProbably) => {\n if (optionGroupProbably.options) return result.concat(optionGroupProbably.options);\n return result.concat(optionGroupProbably as TOption);\n }, []);\n }, [options]);\n\n // TODO: Force to fix later\n nativeOnMobile = false;\n\n const _onClose = (e: Event): void => {\n _setIsOpen(false);\n onClose?.(e);\n };\n\n const overlayRef = useRef<HTMLDivElement | null>(null);\n useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(ref, () => overlayRef.current);\n\n const _onSelected = (value: TOption[KeyName]) => {\n onChange?.(value);\n _setIsOpen(false);\n };\n\n const _getOption = (value?: TOption[KeyName]): TOption | undefined => {\n for (const option of options) {\n if (option.options && Array.isArray(option.options)) {\n for (const childOption of option.options) {\n if (childOption[keyName] === value) {\n return childOption;\n }\n }\n } else {\n // If we're in here it means that this option doesn't have children and is in fact an individual group\n if ((option as TOption)[keyName] === value) {\n return option as TOption;\n }\n }\n }\n };\n\n const { selectingItem, onItemMouseMove, onItemMouseLeave, onItemMouseEnter } = useKeyboardControlOnSelect<TOption, KeyName>({\n onSelected: (item) => _onSelected(item[keyName]),\n isEnabled: !!_open,\n options,\n idName: keyName,\n overlayRef: overlayRef.current,\n defaultOption: _getOption(value),\n optionRefs,\n optionContainerRef,\n });\n\n const _getStringLabel = (value?: TOption[KeyName]): string => {\n const option = _getOption(value);\n return option?.[labelName] || value || '';\n };\n\n const _getLabel = (value?: TOption[KeyName]): string | ReactNode => {\n const option = _getOption(value);\n\n if (renderLabel) {\n return renderLabel(option);\n }\n\n return _getStringLabel(value);\n };\n\n const _renderOptions = (options?: TSelectOptionKey<TOption>[]): ReactElement | JSX.Element[] | null => {\n if (!options) return null;\n return options.map((option, index) => {\n const isGroup = option.options;\n\n if (isGroup) {\n return _renderGroup(option.name, option.options);\n }\n\n return _renderOption({ option: option as TOption, key: index });\n });\n };\n\n const _renderGroup = (name: string, options?: TSelectOptionKey<TOption>[]) => {\n return (\n <>\n <div className=\"rs-select--suggest-list-item --group-title\">\n <Text type={TextType.Small} color={Color.DarkGrey}>\n {name}\n </Text>\n </div>\n {_renderOptions(options)}\n </>\n );\n };\n\n const _renderOption = ({ option, key }: { option: TOption; key: any }) => {\n const isSelected = option[keyName] === value;\n const isSelecting = option[keyName] === selectingItem?.[keyName];\n\n return (\n <div\n ref={(ref) => (optionRefs.current[option[keyName]] = ref)}\n key={key}\n className={classNames('rs-select--suggest-list-item', { '--selected': isSelected || isSelecting })}\n onClick={() => _onSelected(option[keyName])}\n onMouseEnter={() => {\n onItemMouseEnter(option);\n }}\n onMouseLeave={() => onItemMouseLeave()}\n onMouseMove={() => onItemMouseMove()}\n >\n <Text type={TextType.Small} className=\"rs-select--suggest-list-option-name\">\n {renderOption ? renderOption(option) : labelName ? option[labelName] : ''}\n </Text>\n {isSelected && (\n <span className=\"rs-select--suggest-list-option-icon\">\n <Icon icon={IconType.Check} />\n </span>\n )}\n </div>\n );\n };\n\n const native = width && width < MOBILE_BREAKPOINT && nativeOnMobile;\n\n return (\n <>\n {(native || !target) && (\n <span className={classNames('be-select', className)} onClick={() => _setIsOpen(true)} ref={targetRef}>\n {native ? (\n <select value={value} onChange={(e) => onChange?.(e.target.value as TOption[KeyName])}>\n {flattenOptions.map((item) => {\n return <option value={value} key={item[keyName]} label={_getStringLabel(item[keyName])}></option>;\n })}\n </select>\n ) : (\n _getLabel(value)\n )}\n {hideExpandIcon ? null : <Icon icon={IconType.Dropdown} color={Color.DarkGrey} />}\n </span>\n )}\n {!native && (\n <Overlay\n offset={offset}\n usePortal={overlay?.usePortal ?? true}\n followElement={target || targetRef.current || undefined}\n placement={overlay?.placement ?? 'bottom-start'}\n strategy={overlay?.strategy}\n open={open === undefined ? !!_open : open}\n onClose={_onClose}\n containerClassName={overlay?.containerClassName}\n overlayRef={overlayRef}\n hideStyles={overlay?.hideStyles}\n >\n <div ref={optionContainerRef} className={classNames('rs-select--suggest-list', overlay?.className)}>\n {_renderOptions(options)}\n </div>\n </Overlay>\n )}\n </>\n );\n};\n\nexport const Select = forwardRef(InnerSelect) as <TOption extends Option<KeyName>, KeyName extends string>(\n p: Select<TOption, KeyName> & { ref?: Ref<HTMLDivElement> }\n) => JSX.Element;\n\nexport interface IDefaultSelectOption {\n value: string;\n text: string;\n}\n"]}
|
|
1
|
+
{"version":3,"file":"Select.js","sourceRoot":"/","sources":["src/components/generic/Select/Select.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { forwardRef, ReactElement, ReactNode, Ref, useImperativeHandle, useMemo, useRef } from 'react';\nimport Icon, { IconType } from '../Icon/Icon';\n\nimport classNames from 'classnames';\n\nimport './Select.global.scss';\nimport { Overlay, OverlayProps } from '@/components/generic/Overlay/Overlay';\nimport { useKeyboardControlOnSelect } from '@/hooks/KeyboardControlOnSelect';\nimport { Color } from '@/util/Color';\nimport { useCombinedState } from '@/hooks/CombineState';\nimport { useWindowSize } from '@/hooks/WindowSize';\nimport Text, { TextType } from '@/components/generic/Text';\n\nexport type Option<KeyName extends string> = {\n [keyName in KeyName]: string;\n} & Record<any, any> & { options?: Option<KeyName>[] };\n\nexport type TOptionGroup<T> = {\n name: string;\n options: T[];\n};\n\nexport type TSelectOptionKey<T> = TOptionGroup<T> | T;\n\nexport type SelectProps<TOption extends Option<KeyName>, KeyName extends string> = {\n options: TSelectOptionKey<TOption>[];\n keyName: KeyName;\n\n value?: TOption[KeyName];\n labelName?: TOption[keyof TOption];\n target?: HTMLElement | null;\n open?: boolean;\n onClose?: (e: Event) => void;\n onChange?: (value: TOption[KeyName]) => void;\n className?: string;\n offset?: [number, number];\n renderOption?: (option?: TOption) => ReactElement | null;\n renderLabel?: (option?: TOption | null) => ReactElement | null;\n nativeOnMobile?: boolean;\n overlay?: Partial<Omit<OverlayProps, 'children' | 'open' | 'container' | 'followElement' | 'onClose' | 'overlayRef'>>;\n hideExpandIcon?: boolean;\n};\n\nconst MOBILE_BREAKPOINT = 992;\n\nexport const InnerSelect = <TOption extends Option<KeyName>, KeyName extends string>(\n {\n target,\n open,\n onClose,\n options = [],\n value,\n onChange,\n keyName,\n labelName,\n className,\n offset,\n renderOption,\n nativeOnMobile = false,\n overlay,\n renderLabel,\n hideExpandIcon,\n }: SelectProps<TOption, KeyName>,\n ref: Ref<HTMLDivElement | null>\n) => {\n const { width } = useWindowSize();\n const targetRef = useRef<HTMLSpanElement>(null);\n const optionRefs = useRef<{ [id: string]: HTMLDivElement | null }>({});\n const optionContainerRef = useRef<HTMLDivElement | null>(null);\n const [_open, _setIsOpen] = useCombinedState<boolean>(open, false);\n const flattenOptions = useMemo<TOption[]>(() => {\n return options.reduce<TOption[]>((result, optionGroupProbably) => {\n if (optionGroupProbably.options) return result.concat(optionGroupProbably.options);\n return result.concat(optionGroupProbably as TOption);\n }, []);\n }, [options]);\n\n // TODO: Force to fix later\n nativeOnMobile = false;\n\n const _onClose = (e: Event): void => {\n _setIsOpen(false);\n onClose?.(e);\n };\n\n const overlayRef = useRef<HTMLDivElement | null>(null);\n useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(ref, () => overlayRef.current);\n\n const _onSelected = (value: TOption[KeyName]) => {\n onChange?.(value);\n _setIsOpen(false);\n };\n\n const _getOption = (value?: TOption[KeyName]): TOption | undefined => {\n for (const option of options) {\n if (option.options && Array.isArray(option.options)) {\n for (const childOption of option.options) {\n if (childOption[keyName] === value) {\n return childOption;\n }\n }\n } else {\n // If we're in here it means that this option doesn't have children and is in fact an individual group\n if ((option as TOption)[keyName] === value) {\n return option as TOption;\n }\n }\n }\n };\n\n const { selectingItem, onItemMouseMove, onItemMouseLeave, onItemMouseEnter } = useKeyboardControlOnSelect<TOption, KeyName>({\n onSelected: (item) => _onSelected(item[keyName]),\n isEnabled: !!_open,\n options,\n idName: keyName,\n overlayRef: overlayRef.current,\n defaultOption: _getOption(value),\n optionRefs,\n optionContainerRef,\n });\n\n const _getStringLabel = (value?: TOption[KeyName]): string => {\n const option = _getOption(value);\n return option?.[labelName] || value || '';\n };\n\n const _getLabel = (value?: TOption[KeyName]): string | ReactNode => {\n const option = _getOption(value);\n\n if (renderLabel) {\n return renderLabel(option);\n }\n\n return _getStringLabel(value);\n };\n\n const _renderOptions = (options?: TSelectOptionKey<TOption>[]): ReactElement | JSX.Element[] | null => {\n if (!options) return null;\n return options.map((option, index) => {\n const isGroup = option.options;\n\n if (isGroup) {\n return _renderGroup(option.name, option.options);\n }\n\n return _renderOption({ option: option as TOption, key: index });\n });\n };\n\n const _renderGroup = (name: string, options?: TSelectOptionKey<TOption>[]) => {\n return (\n <>\n <div className=\"rs-select--suggest-list-item --group-title\">\n <Text type={TextType.Small} color={Color.DarkGrey}>\n {name}\n </Text>\n </div>\n {_renderOptions(options)}\n </>\n );\n };\n\n const _renderOption = ({ option, key }: { option: TOption; key: any }) => {\n const isSelected = option[keyName] === value;\n const isSelecting = option[keyName] === selectingItem?.[keyName];\n\n return (\n <div\n ref={(ref) => (optionRefs.current[option[keyName]] = ref)}\n key={key}\n className={classNames('rs-select--suggest-list-item', { '--selected': isSelected || isSelecting })}\n onClick={() => _onSelected(option[keyName])}\n onMouseEnter={() => {\n onItemMouseEnter(option);\n }}\n onMouseLeave={() => onItemMouseLeave()}\n onMouseMove={() => onItemMouseMove()}\n >\n <Text type={TextType.Small} className=\"rs-select--suggest-list-option-name\">\n {renderOption ? renderOption(option) : labelName ? option[labelName] : ''}\n </Text>\n {isSelected && (\n <span className=\"rs-select--suggest-list-option-icon\">\n <Icon icon={IconType.Check} />\n </span>\n )}\n </div>\n );\n };\n\n const native = width && width < MOBILE_BREAKPOINT && nativeOnMobile;\n\n return (\n <>\n {(native || !target) && (\n <span className={classNames('be-select', className)} onClick={() => _setIsOpen(true)} ref={targetRef}>\n {native ? (\n <select value={value} onChange={(e) => onChange?.(e.target.value as TOption[KeyName])}>\n {flattenOptions.map((item) => {\n return <option value={value} key={item[keyName]} label={_getStringLabel(item[keyName])}></option>;\n })}\n </select>\n ) : (\n _getLabel(value)\n )}\n {hideExpandIcon ? null : <Icon icon={IconType.Dropdown} color={Color.DarkGrey} />}\n </span>\n )}\n {!native && (\n <Overlay\n offset={offset}\n usePortal={overlay?.usePortal ?? true}\n followElement={target || targetRef.current || undefined}\n placement={overlay?.placement ?? 'bottom-start'}\n strategy={overlay?.strategy}\n open={open === undefined ? !!_open : open}\n onClose={_onClose}\n containerClassName={overlay?.containerClassName}\n overlayRef={overlayRef}\n hideStyles={overlay?.hideStyles}\n >\n <div ref={optionContainerRef} className={classNames('rs-select--suggest-list', overlay?.className)}>\n {_renderOptions(options)}\n </div>\n </Overlay>\n )}\n </>\n );\n};\n\nexport const Select = forwardRef(InnerSelect) as <TOption extends Option<KeyName>, KeyName extends string>(\n p: SelectProps<TOption, KeyName> & { ref?: Ref<HTMLDivElement> }\n) => JSX.Element;\n\nexport interface IDefaultSelectOption {\n value: string;\n text: string;\n}\n"]}
|
|
@@ -1,4 +1,7 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
export type TextAreaProps = JSX.IntrinsicElements['textarea']
|
|
3
|
-
|
|
1
|
+
import React, { ReactNode } from 'react';
|
|
2
|
+
export type TextAreaProps = JSX.IntrinsicElements['textarea'] & {
|
|
3
|
+
label?: ReactNode;
|
|
4
|
+
required?: boolean;
|
|
5
|
+
};
|
|
6
|
+
declare const _default: React.ForwardRefExoticComponent<Pick<TextAreaProps, "label" | "key" | keyof React.TextareaHTMLAttributes<HTMLTextAreaElement>> & React.RefAttributes<HTMLTextAreaElement>>;
|
|
4
7
|
export default _default;
|
|
@@ -1,12 +1,35 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var
|
|
3
|
-
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
+
}) : function(o, v) {
|
|
16
|
+
o["default"] = v;
|
|
17
|
+
});
|
|
18
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
|
19
|
+
if (mod && mod.__esModule) return mod;
|
|
20
|
+
var result = {};
|
|
21
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
22
|
+
__setModuleDefault(result, mod);
|
|
23
|
+
return result;
|
|
4
24
|
};
|
|
5
25
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
const react_1 =
|
|
7
|
-
const react_2 = require("react");
|
|
26
|
+
const react_1 = __importStar(require("react"));
|
|
8
27
|
const TextArea = (props, ref) => {
|
|
9
|
-
return react_1.default.createElement(
|
|
28
|
+
return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
29
|
+
props.label && (react_1.default.createElement("label", { className: "u-marg-bottom--lighter text-bold d-flex" },
|
|
30
|
+
props.label,
|
|
31
|
+
(props === null || props === void 0 ? void 0 : props.required) && react_1.default.createElement("div", { style: { color: 'red' } }, "*"))),
|
|
32
|
+
react_1.default.createElement("textarea", Object.assign({}, props, { ref: ref }))));
|
|
10
33
|
};
|
|
11
|
-
exports.default = (0,
|
|
34
|
+
exports.default = (0, react_1.forwardRef)(TextArea);
|
|
12
35
|
//# sourceMappingURL=TextArea.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextArea.js","sourceRoot":"/","sources":["src/components/generic/TextArea.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"TextArea.js","sourceRoot":"/","sources":["src/components/generic/TextArea.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA+E;AAO/E,MAAM,QAAQ,GAAiE,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IAC1F,OAAO,CACH;QACK,KAAK,CAAC,KAAK,IAAI,CACZ,yCAAO,SAAS,EAAC,yCAAyC;YACrD,KAAK,CAAC,KAAK;YACX,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,QAAQ,KAAI,uCAAK,KAAK,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,QAAS,CACrD,CACX;QACD,4DAAc,KAAK,IAAE,GAAG,EAAE,GAAG,IAAI,CAClC,CACN,CAAC;AACN,CAAC,CAAC;AAEF,kBAAe,IAAA,kBAAU,EAAC,QAAQ,CAAC,CAAC","sourcesContent":["import React, { forwardRef, ForwardRefRenderFunction, ReactNode } from 'react';\n\nexport type TextAreaProps = JSX.IntrinsicElements['textarea'] & {\n label?: ReactNode;\n required?: boolean;\n};\n\nconst TextArea: ForwardRefRenderFunction<HTMLTextAreaElement, TextAreaProps> = (props, ref) => {\n return (\n <>\n {props.label && (\n <label className=\"u-marg-bottom--lighter text-bold d-flex\">\n {props.label}\n {props?.required && <div style={{ color: 'red' }}>*</div>}\n </label>\n )}\n <textarea {...props} ref={ref} />\n </>\n );\n};\n\nexport default forwardRef(TextArea);\n"]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React from 'react';
|
|
1
|
+
import React, { ReactNode } from 'react';
|
|
2
2
|
import { IconType } from './Icon/Icon';
|
|
3
3
|
export interface TextBoxProps {
|
|
4
4
|
icon?: IconType;
|
|
@@ -7,7 +7,7 @@ export interface TextBoxProps {
|
|
|
7
7
|
type?: 'text' | 'tel' | 'password' | 'email';
|
|
8
8
|
name?: string;
|
|
9
9
|
required?: boolean;
|
|
10
|
-
label?:
|
|
10
|
+
label?: ReactNode;
|
|
11
11
|
validationStatus?: 'success' | 'error';
|
|
12
12
|
value?: string;
|
|
13
13
|
className?: string;
|
|
@@ -1,14 +1,36 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
14
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
15
|
+
}) : function(o, v) {
|
|
16
|
+
o["default"] = v;
|
|
17
|
+
});
|
|
18
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
|
19
|
+
if (mod && mod.__esModule) return mod;
|
|
20
|
+
var result = {};
|
|
21
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
22
|
+
__setModuleDefault(result, mod);
|
|
23
|
+
return result;
|
|
24
|
+
};
|
|
2
25
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
26
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
27
|
};
|
|
5
28
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
const react_1 =
|
|
7
|
-
const react_2 = require("react");
|
|
29
|
+
const react_1 = __importStar(require("react"));
|
|
8
30
|
const Icon_1 = __importDefault(require("./Icon/Icon"));
|
|
9
31
|
const classnames_1 = __importDefault(require("classnames"));
|
|
10
32
|
const TextBox = (props, ref) => {
|
|
11
|
-
const [selected, setSelected] = (0,
|
|
33
|
+
const [selected, setSelected] = (0, react_1.useState)(false);
|
|
12
34
|
const type = props.type ? props.type : 'text';
|
|
13
35
|
const inputProperties = Object.assign({ type, className: 'text-small', placeholder: props.placeholder }, props.inputProps);
|
|
14
36
|
if (props.name) {
|
|
@@ -45,7 +67,7 @@ const TextBox = (props, ref) => {
|
|
|
45
67
|
};
|
|
46
68
|
const id = `${props.name}${type}Input`;
|
|
47
69
|
return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
48
|
-
props.label && (react_1.default.createElement("label", { className: "text-bold", htmlFor: id },
|
|
70
|
+
props.label && (react_1.default.createElement("label", { className: "text-bold d-flex u-marg-bottom--lighter", htmlFor: id },
|
|
49
71
|
react_1.default.createElement(react_1.default.Fragment, null,
|
|
50
72
|
props.label,
|
|
51
73
|
(props === null || props === void 0 ? void 0 : props.required) && react_1.default.createElement("div", { style: { color: 'red' } }, "*")))),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextBox.js","sourceRoot":"/","sources":["src/components/generic/TextBox.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"TextBox.js","sourceRoot":"/","sources":["src/components/generic/TextBox.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA6E;AAC7E,0EAAgE;AAEhE,4DAAoC;AAwBpC,MAAM,OAAO,GAA6D,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IACrF,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAEhD,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC;IAC9C,MAAM,eAAe,mBACjB,IAAI,EACJ,SAAS,EAAE,YAAY,EACvB,WAAW,EAAE,KAAK,CAAC,WAAW,IAC3B,KAAK,CAAC,UAAU,CACtB,CAAC;IAEF,IAAI,KAAK,CAAC,IAAI,EAAE;QACZ,eAAe,CAAC,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC;KACrC;IAED,IAAI,KAAK,CAAC,QAAQ,EAAE;QAChB,eAAe,CAAC,QAAQ,GAAG,KAAK,CAAC,QAAQ,CAAC;KAC7C;IAED,MAAM,QAAQ,GAA+C,CAAC,CAAC,EAAE,EAAE;QAC/D,IAAI,KAAK,CAAC,QAAQ,EAAE;YAChB,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;SACrB;IACL,CAAC,CAAC;IAEF,IAAI,KAAK,CAAC,QAAQ,EAAE;QAChB,eAAe,CAAC,QAAQ,GAAG,QAAQ,CAAC;KACvC;IAED,IAAI,IAAI,GAAc,EAAE,CAAC;IAEzB,IAAI,KAAK,CAAC,IAAI,EAAE;QACZ,IAAI,GAAG,8BAAC,cAAI,IAAC,IAAI,EAAE,KAAK,CAAC,IAAI,EAAE,IAAI,EAAC,KAAK,GAAG,CAAC;KAChD;IAED,MAAM,OAAO,GAAG,IAAA,oBAAU,EACtB,iBAAiB,EACjB;QACI,YAAY,EAAE,CAAC,CAAC,IAAI;QACpB,YAAY,EAAE,QAAQ;QACtB,QAAQ,EAAE,KAAK,CAAC,IAAI;QACpB,WAAW,EAAE,KAAK,CAAC,gBAAgB,KAAK,SAAS;QACjD,SAAS,EAAE,KAAK,CAAC,gBAAgB,KAAK,OAAO;QAC7C,YAAY,EAAE,eAAe,CAAC,QAAQ;KACzC,EACD,KAAK,CAAC,SAAS,CAClB,CAAC;IACF,MAAM,cAAc,GAAG,GAAG,EAAE;QACxB,OAAO,WAAW,CAAC,IAAI,CAAC,CAAC;IAC7B,CAAC,CAAC;IACF,MAAM,aAAa,GAAG,GAAG,EAAE;QACvB,OAAO,WAAW,CAAC,KAAK,CAAC,CAAC;IAC9B,CAAC,CAAC;IAEF,MAAM,EAAE,GAAG,GAAG,KAAK,CAAC,IAAI,GAAG,IAAI,OAAO,CAAC;IAEvC,OAAO,CACH;QACK,KAAK,CAAC,KAAK,IAAI,CACZ,yCAAO,SAAS,EAAC,yCAAyC,EAAC,OAAO,EAAE,EAAE;YAClE;gBACK,KAAK,CAAC,KAAK;gBACX,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,QAAQ,KAAI,uCAAK,KAAK,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,QAAS,CAC1D,CACC,CACX;QACD,yCAAO,SAAS,EAAE,OAAO;YACpB,IAAI;YACL,yDAAW,eAAe,IAAE,EAAE,EAAE,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,OAAO,EAAE,cAAc,EAAE,MAAM,EAAE,aAAa,EAAE,UAAU,EAAE,KAAK,CAAC,UAAU,IAAI,CAC9I,CACT,CACN,CAAC;AACN,CAAC,CAAC;AAEF,kBAAe,eAAK,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC","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 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 }\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 '--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 const id = `${props.name}${type}Input`;\n\n return (\n <>\n {props.label && (\n <label className=\"text-bold d-flex u-marg-bottom--lighter\" htmlFor={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} id={id} ref={ref} value={props.value} onFocus={onFocusHandler} onBlur={onBlurHandler} onKeyPress={props.onKeyPress} />\n </label>\n </>\n );\n};\n\nexport default React.forwardRef(TextBox);\n"]}
|
package/dist/src/index.d.ts
CHANGED
|
@@ -10,6 +10,7 @@ export * from './engines/CustomEngine/CustomEngine';
|
|
|
10
10
|
export { default as Icon } from './components/generic/Icon/Icon';
|
|
11
11
|
export * from './components/generic/Icon/Icon';
|
|
12
12
|
export * from './components/generic/Text';
|
|
13
|
+
export { default as InputSelect } from './components/generic/Select/InputSelect';
|
|
13
14
|
export { default as TextBox } from './components/generic/TextBox';
|
|
14
15
|
export { default as TextArea } from './components/generic/TextArea';
|
|
15
16
|
export { default as InputGroup } from './components/generic/InputGroup/InputGroup';
|
package/dist/src/index.js
CHANGED
|
@@ -17,7 +17,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
17
17
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
18
18
|
};
|
|
19
19
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
20
|
-
exports.Version = exports.events = exports.RoomstayEventManager = exports.StepThanks = exports.StepRoom = exports.StepHotel = exports.StepConfirmation = exports.StepDate = exports.StepAddon = exports.StepManager = exports.API = exports.DataLayer = exports.withDI = exports.registerReplacement = exports.RoomstayThemeEngine = exports.SessionProvider = exports.FullPageEngineSmallSpacingFeature = exports.E164PhoneNumberFieldFeature = exports.ShowIATANumberOnCheckoutFeature = exports.RoomUpsellFeature = exports.InlineAddonStepFeature = exports.FeaturedPromoFeature = exports.DatePickerTypeFeature = exports.ConfirmationVerifyFeature = exports.RatePillProvider = exports.FeatureProvider = exports.CurrencyProvider = exports.SmallSpinner = exports.StepNoRoomBestRateAlert = exports.StepConfirmationCountrySelector = exports.NoRoomsFoundBlock = exports.BE_NO_ROOMS_FOUND_BLOCK = exports.BEButton = exports.Alert = exports.Headline = exports.AutoAutoHeight = exports.LineBreak = exports.Checkbox = exports.RadioFields = exports.InputGroup = exports.TextArea = exports.TextBox = exports.Icon = exports.Link = exports.useTranslation = exports.react = void 0;
|
|
20
|
+
exports.Version = exports.events = exports.RoomstayEventManager = exports.StepThanks = exports.StepRoom = exports.StepHotel = exports.StepConfirmation = exports.StepDate = exports.StepAddon = exports.StepManager = exports.API = exports.DataLayer = exports.withDI = exports.registerReplacement = exports.RoomstayThemeEngine = exports.SessionProvider = exports.FullPageEngineSmallSpacingFeature = exports.E164PhoneNumberFieldFeature = exports.ShowIATANumberOnCheckoutFeature = exports.RoomUpsellFeature = exports.InlineAddonStepFeature = exports.FeaturedPromoFeature = exports.DatePickerTypeFeature = exports.ConfirmationVerifyFeature = exports.RatePillProvider = exports.FeatureProvider = exports.CurrencyProvider = exports.SmallSpinner = exports.StepNoRoomBestRateAlert = exports.StepConfirmationCountrySelector = exports.NoRoomsFoundBlock = exports.BE_NO_ROOMS_FOUND_BLOCK = exports.BEButton = exports.Alert = exports.Headline = exports.AutoAutoHeight = exports.LineBreak = exports.Checkbox = exports.RadioFields = exports.InputGroup = exports.TextArea = exports.TextBox = exports.InputSelect = exports.Icon = exports.Link = exports.useTranslation = exports.react = void 0;
|
|
21
21
|
const StepConfirmation_1 = __importDefault(require("./pages/steps/StepConfirmation/StepConfirmation"));
|
|
22
22
|
const StepDate_1 = __importDefault(require("./pages/steps/StepDate/StepDate"));
|
|
23
23
|
const StepRoom_1 = __importDefault(require("./pages/steps/StepRoom/StepRoom"));
|
|
@@ -41,6 +41,8 @@ var Icon_1 = require("./components/generic/Icon/Icon");
|
|
|
41
41
|
Object.defineProperty(exports, "Icon", { enumerable: true, get: function () { return __importDefault(Icon_1).default; } });
|
|
42
42
|
__exportStar(require("./components/generic/Icon/Icon"), exports);
|
|
43
43
|
__exportStar(require("./components/generic/Text"), exports);
|
|
44
|
+
var InputSelect_1 = require("./components/generic/Select/InputSelect");
|
|
45
|
+
Object.defineProperty(exports, "InputSelect", { enumerable: true, get: function () { return __importDefault(InputSelect_1).default; } });
|
|
44
46
|
var TextBox_1 = require("./components/generic/TextBox");
|
|
45
47
|
Object.defineProperty(exports, "TextBox", { enumerable: true, get: function () { return __importDefault(TextBox_1).default; } });
|
|
46
48
|
var TextArea_1 = require("./components/generic/TextArea");
|
package/dist/src/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"/","sources":["src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA,uGAA+E;AAC/E,+EAAuD;AACvD,+EAAuD;AACvD,qFAA6D;AAC7D,qEAA6C;AAE7C,kCAAkC;AAClC,kDAA6B;AAC7B,yFAAiE;AAEpD,QAAA,KAAK,GAAG,eAAQ,CAAC;AAE9B,+CAA+C;AAAtC,+GAAA,cAAc,OAAA;AACvB,qDAAwC;AAA/B,wGAAA,IAAI,OAAA;AAEb,aAAa;AACb,wFAAsE;AACtE,sFAAoE;AACpE,sFAAoE;AACpE,oFAAkE;AAClE,sEAAoD;AAEpD,uDAAiE;AAAxD,6GAAA,OAAO,OAAQ;AACxB,iEAA+C;AAC/C,4DAA0C;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"/","sources":["src/index.ts"],"names":[],"mappings":"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","sourcesContent":["import StepConfirmation from '@/pages/steps/StepConfirmation/StepConfirmation';\nimport StepDate from '@/pages/steps/StepDate/StepDate';\nimport StepRoom from '@/pages/steps/StepRoom/StepRoom';\nimport StepThanks from '@/pages/steps/StepThanks/StepThanks';\nimport StepManager from '@/util/StepManager';\n\n// TODO: Look into resolving this.\nimport ReactRaw from 'react';\nimport RoomstayEventManager from './events/RoomstayEventManager';\n\nexport const react = ReactRaw;\n\nexport { useTranslation } from 'react-i18next';\nexport { Link } from 'react-router-dom';\n\n// Components\nexport * from '@/engines/FullPageBookingEngine/FullPageBookingEngine';\nexport * from '@/engines/InlineRoomMiniEngine/InlineRoomMiniEngine';\nexport * from '@/engines/RecentSearchesEngine/RecentSearchesEngine';\nexport * from '@/engines/BookingWizardEngine/BookingWizardEngine';\nexport * from '@/engines/CustomEngine/CustomEngine';\n\nexport { default as Icon } from '@/components/generic/Icon/Icon';\nexport * from '@/components/generic/Icon/Icon';\nexport * from '@/components/generic/Text';\nexport { default as InputSelect } from '@/components/generic/Select/InputSelect';\n\nexport { default as TextBox } from '@/components/generic/TextBox';\nexport { default as TextArea } from '@/components/generic/TextArea';\nexport { default as InputGroup } from '@/components/generic/InputGroup/InputGroup';\nexport { default as RadioFields } from '@/components/generic/radio/RadioFields';\nexport { default as Checkbox } from '@/components/generic/Checkbox/Checkbox';\n\nexport { default as LineBreak } from '@/components/generic/LineBreak';\nexport { default as AutoAutoHeight } from '@/animations/AutoAutoHeight';\nexport { default as Headline } from '@/components/generic/Headline';\n\nexport * from '@/components/generic/Alert';\nexport { default as Alert } from '@/components/generic/Alert';\nexport { default as BEButton } from '@/components/generic/BEButton';\n\nexport { BE_NO_ROOMS_FOUND_BLOCK } from '@/components/steps/room/NoRoomsFoundBlock';\nexport { default as NoRoomsFoundBlock } from '@/components/steps/room/NoRoomsFoundBlock';\n\nexport { default as StepConfirmationCountrySelector } from '@/components/steps/confirmation/StepConfirmationCountrySelector';\n\nexport * from '@/components/steps/confirmation/StepConfirmationCommentsComponent';\nexport * from '@/components/summary/BESummaryPerkBlock';\n\nexport * from '@/components/summary/BESummary';\n\nexport * from '@/components/steps/room/StepRoomBestRateAlert';\nexport { default as StepNoRoomBestRateAlert } from '@/components/steps/room/StepRoomBestRateAlert';\n\n// Loaders\nexport { default as SmallSpinner } from '@/components/generic/loader/SmallSpinner';\n\n// Providers\nexport * from '@/providers/LanguageProvider';\nexport * from '@/providers/CurrencyProvider';\nexport { default as CurrencyProvider } from '@/providers/CurrencyProvider';\nexport { default as FeatureProvider } from '@/providers/FeatureProvider';\nexport { default as RatePillProvider } from '@/providers/RatePillProvider';\nexport * from '@/providers/PromotionProvider';\n\n// Features\n\nexport { default as ConfirmationVerifyFeature } from '@/providers/feature/ConfirmationVerifyFeature';\nexport { default as DatePickerTypeFeature } from '@/providers/feature/DatePickerTypeFeature';\nexport { default as FeaturedPromoFeature } from '@/providers/feature/FeaturedPromoFeature';\nexport { default as InlineAddonStepFeature } from '@/providers/feature/InlineAddonStepFeature';\nexport { default as RoomUpsellFeature } from '@/providers/feature/RoomUpsellFeature';\nexport { default as ShowIATANumberOnCheckoutFeature } from '@/providers/feature/ShowIATANumberOnCheckoutFeature';\nexport { default as E164PhoneNumberFieldFeature } from '@/providers/feature/E164PhoneNumberFieldFeature';\nexport { default as FullPageEngineSmallSpacingFeature } from '@/providers/feature/FullPageEngineSmallSpacingFeature';\n\n// Contexts\nexport * from '@frontend/contexts';\n\nexport { default as SessionProvider } from '@/providers/SessionProvider';\nexport * from '@/providers/RoomstayThemeEngine';\nexport { default as RoomstayThemeEngine } from '@/providers/RoomstayThemeEngine';\nexport { registerReplacement, withDI } from '@/providers/DIProvider';\n\nexport { default as DataLayer } from '@/util/DataLayer';\nexport * from '@/util/DataLayer';\n\n// Models\nexport * from '@/models/Client/Hotel/Hotel';\nexport * from '@/models/Client/Hotel/HotelPerk';\n\nexport * from '@/models/Client/Hotel/DistanceUnitType.types';\nexport * from '@/models/Client/Hotel/WeekdayStartsOn.types';\n\nexport * from '@/models/Client/Hotel/Company';\n\nexport { default as API } from '@/api/BookingAPI';\n\n// Steps\nexport { default as StepManager } from '@/util/StepManager';\n\nexport { default as StepAddon } from '@/pages/steps/StepAddon/StepAddon';\nexport { default as StepDate } from '@/pages/steps/StepDate/StepDate';\nexport { default as StepConfirmation } from '@/pages/steps/StepConfirmation/StepConfirmation';\nexport { default as StepHotel } from '@/pages/steps/StepHotel/StepHotel';\nexport { default as StepRoom } from '@/pages/steps/StepRoom/StepRoom';\nexport { default as StepThanks } from '@/pages/steps/StepThanks/StepThanks';\n\nexport * from '@/translations/Translation';\n\n// Util\n\nexport * from '@/util/Color';\n\n// Hooks\n\nexport * from '@/hooks/CurrentHotelHook';\nexport * from '@/hooks/EventHook';\n\nexport * from '@/events/index';\n\n/** @deprecated use `roomstay.events` instead */\nexport { default as RoomstayEventManager } from '@/events/RoomstayEventManager';\n\nexport const events = {\n on: RoomstayEventManager.addEvent,\n raise: RoomstayEventManager.raise,\n};\n\ndeclare const RS_VERSION: string;\nexport const Version = RS_VERSION;\n\nStepManager.currentSteps = {\n 0: StepDate,\n 10: StepRoom,\n 20: StepConfirmation,\n 30: StepThanks,\n};\n"]}
|
|
@@ -111,7 +111,9 @@ function StepThanksComponent() {
|
|
|
111
111
|
comments.length >= 1 && (react_1.default.createElement("div", { className: "u-marg-bottom--heavy" },
|
|
112
112
|
react_1.default.createElement("div", { className: "u-marg-bottom" },
|
|
113
113
|
react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Label, color: Color_1.Color.Grey }, t(Translation_1.Translation.Step.Confirmation.Comments))),
|
|
114
|
-
comments.map((comment, index) => (react_1.default.createElement(Text_1.default, {
|
|
114
|
+
comments.map((comment, index) => (react_1.default.createElement(Text_1.default, { style: {
|
|
115
|
+
whiteSpace: 'pre',
|
|
116
|
+
}, key: index, type: Text_1.TextType.Small }, comment))))),
|
|
115
117
|
react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Small, align: TextAlignment_1.TextAlign.Right }, t(Translation_1.Translation.Misc.Total)),
|
|
116
118
|
react_1.default.createElement(Headline_1.default, { bold: true, size: "large", align: TextAlignment_1.TextAlign.Right },
|
|
117
119
|
react_1.default.createElement(Currency_1.default, null, total)),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StepThanksComponent.js","sourceRoot":"/","sources":["src/pages/steps/StepThanks/StepThanksComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useCallback, useContext } from 'react';\nimport Headline from '@/components/generic/Headline';\nimport Icon, { IconType } from '@/components/generic/Icon/Icon';\nimport { Color } from '@/util/Color';\nimport Text, { TextType } from '@/components/generic/Text';\nimport BEButton from '@/components/generic/BEButton';\nimport { Link } from 'react-router-dom';\nimport Currency from '@/components/generic/Currency';\nimport LineBreak from '@/components/generic/LineBreak';\nimport { TextAlign } from '@/util/TextAlignment';\nimport { Translation } from 'translations/Translation';\nimport { useTranslation } from 'react-i18next';\nimport { BasketContext, CompanyContext } from '@frontend/contexts';\nimport { ReservationAddonDTO, ReservationDTO } from '@/models/Api/ReservationsDTO';\nimport ReservationRow from '@/pages/findReservation/ReservationRow';\nimport dayjs from 'dayjs';\n\nimport { useCurrentHotel, useEvent } from '@frontend/hooks';\nimport { CommonAddonSummary } from '@/components/steps/common/CommonAddonSummary/CommonAddonSummary';\nimport { calculateTotalForReservation } from '@/util/TotalCalculator';\nimport { StepThanksViewEvent } from '@/events';\nimport { IEventReservation } from '@/models/Api/IEventReservation';\n\nexport default function StepThanksComponent() {\n const basketContext = useContext(BasketContext);\n\n const { hotel } = useCurrentHotel();\n const ccx = useContext(CompanyContext);\n const { raise } = useEvent();\n\n const checkoutData = basketContext.reservationData;\n\n const { t } = useTranslation();\n\n const total = useCallback(() => {\n if (checkoutData?.reservations) {\n const reservations: IEventReservation[] = checkoutData?.reservations?.map((obj: ReservationDTO) => {\n const nightKeys = Object.keys(obj.nights);\n const dateFormat = 'YYYY-MM-DDTHH:mm:ss';\n\n return {\n reservationId: obj.reservationNumber,\n checkInTime: dayjs(nightKeys[0]).format(dateFormat),\n checkOutTime: dayjs(nightKeys[nightKeys.length - 1])\n .add(1, 'day')\n .format(dateFormat),\n totalPrice: obj.total.afterTax,\n priceCurrency: ccx.currentCurrency,\n };\n });\n\n const event = new StepThanksViewEvent(reservations);\n raise(event);\n\n return calculateTotalForReservation(checkoutData);\n }\n\n return 0;\n }, [checkoutData]);\n\n const addons: ReservationAddonDTO[] = [];\n const comments: string[] = [];\n\n return (\n <div className=\"container u-marg-top--heavy\">\n <div className=\"row justify-content-center\">\n <div className=\"col-lg-8 col-md-12 u-flex align-items-center u-flex-direction-column\">\n <div className=\"u-marg-bottom\">\n <Icon icon={IconType.Check} size=\"48px\" color={Color.White} backgroundColor={Color.Accent} borderRadius=\"round\" noPadding />\n </div>\n <div className=\"u-marg-bottom\" style={{ maxWidth: '530px' }}>\n <Headline size=\"large\" align={TextAlign.Center}>\n {t(Translation.Step.Thanks.ThankYouHeadline, { hotel: hotel?.name })}\n </Headline>\n </div>\n <div className=\"u-marg-bottom--heavy\">\n <Text color={Color.DarkGrey}>\n {t(Translation.Step.Thanks.InvoiceNumber)} {checkoutData.itineraryNumber}\n </Text>\n </div>\n <div className=\"u-marg-bottom--massive\">\n <Link to=\"/\">\n <BEButton>{t(Translation.Step.Thanks.GoBackHome)}</BEButton>\n </Link>\n </div>\n <>\n <div className=\"u-marg-top w-100\">\n {checkoutData?.reservations?.map((obj: ReservationDTO) => {\n if (obj.addons) {\n const nights = Object.keys(obj.nights);\n obj.addons.forEach((addon) => addons.push({ ...addon, nights: nights.length }));\n }\n\n if (obj.comments) {\n obj.comments.map((comment: string) => {\n comments.push(comment);\n });\n }\n\n return <ReservationRow reservation={obj} key={obj.reservationNumber} />;\n })}\n </div>\n <LineBreak />\n\n <div className=\"w-100\">\n <CommonAddonSummary addons={addons} />\n {comments.length >= 1 && (\n <div className=\"u-marg-bottom--heavy\">\n <div className=\"u-marg-bottom\">\n <Text type={TextType.Label} color={Color.Grey}>\n {t(Translation.Step.Confirmation.Comments)}\n </Text>\n </div>\n {comments.map((comment, index) => (\n <Text key={index} type={TextType.Small}>\n {comment}\n </Text>\n ))}\n </div>\n )}\n <Text type={TextType.Small} align={TextAlign.Right}>\n {t(Translation.Misc.Total)}\n </Text>\n <Headline bold size=\"large\" align={TextAlign.Right}>\n <Currency>{total}</Currency>\n </Headline>\n <Text type={TextType.Small} align={TextAlign.Right} color={Color.DarkGrey}>\n {t(Translation.Step.Thanks.IncludingTaxes)}\n </Text>\n </div>\n </>\n </div>\n </div>\n {checkoutData?.reservations?.map((obj: ReservationDTO, index) => {\n const nightKeys = Object.keys(obj.nights);\n\n const firstNight = dayjs(nightKeys[0]);\n const lastNight = dayjs(nightKeys[nightKeys.length - 1]).add(1, 'day');\n\n return (\n <script key={index} type=\"application/ld+json\">\n {JSON.stringify({\n '@context': 'http://schema.org',\n '@type': 'LodgingReservation',\n reservationId: obj.reservationNumber,\n reservationStatus: 'http://schema.org/ReservationConfirmed',\n checkinTime: firstNight.format('YYYY-MM-DDTHH:mm:ss'),\n checkoutTime: lastNight.format('YYYY-MM-DDTHH:mm:ss'),\n totalPrice: obj.total.afterTax,\n priceCurrency: 'AUD',\n })}\n </script>\n );\n })}\n </div>\n );\n}\n"]}
|
|
1
|
+
{"version":3,"file":"StepThanksComponent.js","sourceRoot":"/","sources":["src/pages/steps/StepThanks/StepThanksComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useCallback, useContext } from 'react';\nimport Headline from '@/components/generic/Headline';\nimport Icon, { IconType } from '@/components/generic/Icon/Icon';\nimport { Color } from '@/util/Color';\nimport Text, { TextType } from '@/components/generic/Text';\nimport BEButton from '@/components/generic/BEButton';\nimport { Link } from 'react-router-dom';\nimport Currency from '@/components/generic/Currency';\nimport LineBreak from '@/components/generic/LineBreak';\nimport { TextAlign } from '@/util/TextAlignment';\nimport { Translation } from 'translations/Translation';\nimport { useTranslation } from 'react-i18next';\nimport { BasketContext, CompanyContext } from '@frontend/contexts';\nimport { ReservationAddonDTO, ReservationDTO } from '@/models/Api/ReservationsDTO';\nimport ReservationRow from '@/pages/findReservation/ReservationRow';\nimport dayjs from 'dayjs';\n\nimport { useCurrentHotel, useEvent } from '@frontend/hooks';\nimport { CommonAddonSummary } from '@/components/steps/common/CommonAddonSummary/CommonAddonSummary';\nimport { calculateTotalForReservation } from '@/util/TotalCalculator';\nimport { StepThanksViewEvent } from '@/events';\nimport { IEventReservation } from '@/models/Api/IEventReservation';\n\nexport default function StepThanksComponent() {\n const basketContext = useContext(BasketContext);\n\n const { hotel } = useCurrentHotel();\n const ccx = useContext(CompanyContext);\n const { raise } = useEvent();\n\n const checkoutData = basketContext.reservationData;\n\n const { t } = useTranslation();\n\n const total = useCallback(() => {\n if (checkoutData?.reservations) {\n const reservations: IEventReservation[] = checkoutData?.reservations?.map((obj: ReservationDTO) => {\n const nightKeys = Object.keys(obj.nights);\n const dateFormat = 'YYYY-MM-DDTHH:mm:ss';\n\n return {\n reservationId: obj.reservationNumber,\n checkInTime: dayjs(nightKeys[0]).format(dateFormat),\n checkOutTime: dayjs(nightKeys[nightKeys.length - 1])\n .add(1, 'day')\n .format(dateFormat),\n totalPrice: obj.total.afterTax,\n priceCurrency: ccx.currentCurrency,\n };\n });\n\n const event = new StepThanksViewEvent(reservations);\n raise(event);\n\n return calculateTotalForReservation(checkoutData);\n }\n\n return 0;\n }, [checkoutData]);\n\n const addons: ReservationAddonDTO[] = [];\n const comments: string[] = [];\n\n return (\n <div className=\"container u-marg-top--heavy\">\n <div className=\"row justify-content-center\">\n <div className=\"col-lg-8 col-md-12 u-flex align-items-center u-flex-direction-column\">\n <div className=\"u-marg-bottom\">\n <Icon icon={IconType.Check} size=\"48px\" color={Color.White} backgroundColor={Color.Accent} borderRadius=\"round\" noPadding />\n </div>\n <div className=\"u-marg-bottom\" style={{ maxWidth: '530px' }}>\n <Headline size=\"large\" align={TextAlign.Center}>\n {t(Translation.Step.Thanks.ThankYouHeadline, { hotel: hotel?.name })}\n </Headline>\n </div>\n <div className=\"u-marg-bottom--heavy\">\n <Text color={Color.DarkGrey}>\n {t(Translation.Step.Thanks.InvoiceNumber)} {checkoutData.itineraryNumber}\n </Text>\n </div>\n <div className=\"u-marg-bottom--massive\">\n <Link to=\"/\">\n <BEButton>{t(Translation.Step.Thanks.GoBackHome)}</BEButton>\n </Link>\n </div>\n <>\n <div className=\"u-marg-top w-100\">\n {checkoutData?.reservations?.map((obj: ReservationDTO) => {\n if (obj.addons) {\n const nights = Object.keys(obj.nights);\n obj.addons.forEach((addon) => addons.push({ ...addon, nights: nights.length }));\n }\n\n if (obj.comments) {\n obj.comments.map((comment: string) => {\n comments.push(comment);\n });\n }\n\n return <ReservationRow reservation={obj} key={obj.reservationNumber} />;\n })}\n </div>\n <LineBreak />\n\n <div className=\"w-100\">\n <CommonAddonSummary addons={addons} />\n {comments.length >= 1 && (\n <div className=\"u-marg-bottom--heavy\">\n <div className=\"u-marg-bottom\">\n <Text type={TextType.Label} color={Color.Grey}>\n {t(Translation.Step.Confirmation.Comments)}\n </Text>\n </div>\n {comments.map((comment, index) => (\n <Text\n style={{\n whiteSpace: 'pre',\n }}\n key={index}\n type={TextType.Small}\n >\n {comment}\n </Text>\n ))}\n </div>\n )}\n <Text type={TextType.Small} align={TextAlign.Right}>\n {t(Translation.Misc.Total)}\n </Text>\n <Headline bold size=\"large\" align={TextAlign.Right}>\n <Currency>{total}</Currency>\n </Headline>\n <Text type={TextType.Small} align={TextAlign.Right} color={Color.DarkGrey}>\n {t(Translation.Step.Thanks.IncludingTaxes)}\n </Text>\n </div>\n </>\n </div>\n </div>\n {checkoutData?.reservations?.map((obj: ReservationDTO, index) => {\n const nightKeys = Object.keys(obj.nights);\n\n const firstNight = dayjs(nightKeys[0]);\n const lastNight = dayjs(nightKeys[nightKeys.length - 1]).add(1, 'day');\n\n return (\n <script key={index} type=\"application/ld+json\">\n {JSON.stringify({\n '@context': 'http://schema.org',\n '@type': 'LodgingReservation',\n reservationId: obj.reservationNumber,\n reservationStatus: 'http://schema.org/ReservationConfirmed',\n checkinTime: firstNight.format('YYYY-MM-DDTHH:mm:ss'),\n checkoutTime: lastNight.format('YYYY-MM-DDTHH:mm:ss'),\n totalPrice: obj.total.afterTax,\n priceCurrency: 'AUD',\n })}\n </script>\n );\n })}\n </div>\n );\n}\n"]}
|
|
@@ -1,23 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { ComponentMeta } from '@storybook/react';
|
|
3
|
-
|
|
4
|
-
declare const _default: ComponentMeta<(<TOption extends import("../components/generic/Select/Select").Option<KeyName>, KeyName extends string>(p: {
|
|
5
|
-
options: TSelectOptionKey<TOption>[];
|
|
6
|
-
keyName: KeyName;
|
|
7
|
-
value?: TOption[KeyName] | undefined;
|
|
8
|
-
labelName?: TOption[keyof TOption] | undefined;
|
|
9
|
-
target?: HTMLElement | null | undefined;
|
|
10
|
-
open?: boolean | undefined;
|
|
11
|
-
onClose?: ((e: Event) => void) | undefined;
|
|
12
|
-
onChange?: ((value: TOption[KeyName]) => void) | undefined;
|
|
13
|
-
className?: string | undefined;
|
|
14
|
-
offset?: [number, number] | undefined;
|
|
15
|
-
renderOption?: ((option?: TOption | undefined) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null) | undefined;
|
|
16
|
-
renderLabel?: ((option?: TOption | null | undefined) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null) | undefined;
|
|
17
|
-
nativeOnMobile?: boolean | undefined;
|
|
18
|
-
overlay?: Partial<Omit<import("../components/generic/Overlay/Overlay").OverlayProps, "children" | "open" | "onClose" | "container" | "followElement" | "overlayRef">> | undefined;
|
|
19
|
-
hideExpandIcon?: boolean | undefined;
|
|
20
|
-
} & {
|
|
3
|
+
declare const _default: ComponentMeta<(<TOption extends import("../components/generic/Select/Select").Option<KeyName>, KeyName extends string>(p: import("../components/generic/Select/Select").SelectProps<TOption, KeyName> & {
|
|
21
4
|
ref?: React.Ref<HTMLDivElement> | undefined;
|
|
22
5
|
}) => JSX.Element)>;
|
|
23
6
|
export default _default;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { ComponentStory, ComponentMeta } from '@storybook/react';
|
|
3
|
-
declare const _default: ComponentMeta<React.ForwardRefExoticComponent<Pick<
|
|
3
|
+
declare const _default: ComponentMeta<React.ForwardRefExoticComponent<Pick<import("../components/generic/TextArea").TextAreaProps, "label" | "key" | keyof React.TextareaHTMLAttributes<HTMLTextAreaElement>> & React.RefAttributes<HTMLTextAreaElement>>>;
|
|
4
4
|
export default _default;
|
|
5
|
-
export declare const Default: ComponentStory<React.ForwardRefExoticComponent<Pick<
|
|
5
|
+
export declare const Default: ComponentStory<React.ForwardRefExoticComponent<Pick<import("../components/generic/TextArea").TextAreaProps, "label" | "key" | keyof React.TextareaHTMLAttributes<HTMLTextAreaElement>> & React.RefAttributes<HTMLTextAreaElement>>>;
|