@popsure/dirty-swan 0.41.6 → 0.41.8
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/cjs/index.js +8 -7
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/lib/components/card/index.d.ts +1 -0
- package/dist/cjs/lib/components/input/currency/index.d.ts +2 -2
- package/dist/esm/components/card/index.js +7 -6
- package/dist/esm/components/card/index.js.map +1 -1
- package/dist/esm/components/input/currency/index.js +1 -1
- package/dist/esm/components/input/currency/index.js.map +1 -1
- package/dist/esm/components/input/currency/input.stories.js.map +1 -1
- package/dist/esm/lib/components/card/index.d.ts +1 -0
- package/dist/esm/lib/components/input/currency/index.d.ts +2 -2
- package/package.json +1 -1
- package/src/lib/components/card/index.tsx +28 -24
- package/src/lib/components/card/style.module.scss +2 -1
- package/src/lib/components/input/currency/index.tsx +3 -3
- package/src/lib/components/input/currency/input.stories.tsx +2 -2
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { InputProps } from '..';
|
|
2
2
|
export declare type CurrencyInputProps = {
|
|
3
|
-
value?: number
|
|
3
|
+
value?: number;
|
|
4
4
|
placeholder?: string;
|
|
5
|
-
onChange?: (value: number
|
|
5
|
+
onChange?: (value: number) => void;
|
|
6
6
|
} & Omit<InputProps, 'onChange' | 'value' | 'ref'>;
|
|
7
7
|
declare const CurrencyInput: ({ value, onChange, type, ...props }: CurrencyInputProps) => JSX.Element;
|
|
8
8
|
export { CurrencyInput };
|
|
@@ -6,7 +6,7 @@ import { s as styleInject } from '../../style-inject.es-1f59c1d0.js';
|
|
|
6
6
|
import 'react';
|
|
7
7
|
import '../icon/IconWrapper/IconWrapper.js';
|
|
8
8
|
|
|
9
|
-
var css_248z = ".style-module_button__KWY7b {\n border: 1px solid transparent;\n color: #26262e;\n outline-color: #8e8cee;\n transition: all 0.2s ease-in-out;\n}\n.style-module_button__KWY7b:hover {\n border-color: #8e8cee;\n color: #8e8cee;\n}\n\n.style-module_icon__N6B2P {\n margin-right: 12px;\n}\n.style-module_iconbalanced__3JdKC {\n margin-right: 16px;\n}\n.style-module_iconspacious__36ovv {\n margin-right: 24px;\n}\n\n.style-module_actionIcon__2klnb {\n margin-left: 12px;\n}\n.style-module_actionIconbalanced__1duYl {\n margin-left: 16px;\n}\n.style-module_actionIconspacious__1sjsd {\n margin-left: 24px;\n}";
|
|
9
|
+
var css_248z = ".style-module_button__KWY7b {\n background-color: transparent;\n border: 1px solid transparent;\n color: #26262e;\n outline-color: #8e8cee;\n transition: all 0.2s ease-in-out;\n}\n.style-module_button__KWY7b:hover {\n border-color: #8e8cee;\n color: #8e8cee;\n}\n\n.style-module_icon__N6B2P {\n margin-right: 12px;\n}\n.style-module_iconbalanced__3JdKC {\n margin-right: 16px;\n}\n.style-module_iconspacious__36ovv {\n margin-right: 24px;\n}\n\n.style-module_actionIcon__2klnb {\n margin-left: 12px;\n}\n.style-module_actionIconbalanced__1duYl {\n margin-left: 16px;\n}\n.style-module_actionIconspacious__1sjsd {\n margin-left: 24px;\n}";
|
|
10
10
|
var styles = {"button":"style-module_button__KWY7b","icon":"style-module_icon__N6B2P","iconbalanced":"style-module_iconbalanced__3JdKC","iconspacious":"style-module_iconspacious__36ovv","actionIcon":"style-module_actionIcon__2klnb","actionIconbalanced":"style-module_actionIconbalanced__1duYl","actionIconspacious":"style-module_actionIconspacious__1sjsd"};
|
|
11
11
|
styleInject(css_248z);
|
|
12
12
|
|
|
@@ -15,9 +15,9 @@ var CardContent = function (_a) {
|
|
|
15
15
|
return (jsxs("section", __assign({ className: classNames('d-flex fd-column jc-center br8 bg-white w100 ta-left', { 'bs-sm': dropShadow }, {
|
|
16
16
|
compact: 'p16',
|
|
17
17
|
balanced: 'p24',
|
|
18
|
-
spacious: 'p32'
|
|
19
|
-
}[density], classNames$1 === null || classNames$1 === void 0 ? void 0 : classNames$1.wrapper) }, { children: [jsxs("div", __assign({ className:
|
|
20
|
-
jsxs("div", __assign({ className:
|
|
18
|
+
spacious: 'p32',
|
|
19
|
+
}[density], classNames$1 === null || classNames$1 === void 0 ? void 0 : classNames$1.wrapper) }, { children: [jsxs("div", __assign({ className: "d-flex w100" }, { children: [icon && (jsx("div", __assign({ className: classNames("d-flex ai-center tc-primary-500", styles.icon, styles["icon" + density], classNames$1 === null || classNames$1 === void 0 ? void 0 : classNames$1.icon) }, { children: icon }), void 0)),
|
|
20
|
+
jsxs("div", __assign({ className: "d-flex jc-between w100" }, { children: [jsxs("div", __assign({ className: "d-flex jc-center gap8 fd-column tc-grey-900 w100" }, { children: [label && (jsx("h3", __assign({ className: classNames('p-p--small', classNames$1 === null || classNames$1 === void 0 ? void 0 : classNames$1.label) }, { children: label }), void 0)),
|
|
21
21
|
title && (jsx("h2", __assign({ className: classNames(classNames$1 === null || classNames$1 === void 0 ? void 0 : classNames$1.title, {
|
|
22
22
|
large: 'p-h3',
|
|
23
23
|
medium: 'p-h4',
|
|
@@ -25,12 +25,13 @@ var CardContent = function (_a) {
|
|
|
25
25
|
}[titleVariant]) }, { children: title }), void 0)),
|
|
26
26
|
description && (jsx("div", __assign({ className: classNames('tc-grey-600', classNames$1 === null || classNames$1 === void 0 ? void 0 : classNames$1.description, descriptionVariant === 'small' ? 'p-p--small' : 'p-p') }, { children: description }), void 0))] }), void 0),
|
|
27
27
|
onClick && (jsx("div", __assign({ className: classNames(styles.actionIcon, classNames$1 === null || classNames$1 === void 0 ? void 0 : classNames$1.actionIcon, styles["actionIcon" + density], 'd-flex ai-center') }, { children: actionIcon || jsx(ChevronRightIcon, { size: 24 }, void 0) }), void 0))] }), void 0)] }), void 0),
|
|
28
|
-
children &&
|
|
28
|
+
children && jsx("div", __assign({ className: classNames$1 === null || classNames$1 === void 0 ? void 0 : classNames$1.children }, { children: children }), void 0)] }), void 0));
|
|
29
29
|
};
|
|
30
30
|
var Card = function (props) {
|
|
31
|
+
var _a;
|
|
31
32
|
var onClick = props.onClick;
|
|
32
33
|
if (onClick) {
|
|
33
|
-
return (jsx("button", __assign({ className: classNames('c-pointer d-flex w100 br8', styles.button), onClick: onClick, type: "button" }, { children: jsx(CardContent, __assign({}, props), void 0) }), void 0));
|
|
34
|
+
return (jsx("button", __assign({ className: classNames('c-pointer d-flex w100 br8', styles.button, (_a = props.classNames) === null || _a === void 0 ? void 0 : _a.buttonWrapper), onClick: onClick, type: "button" }, { children: jsx(CardContent, __assign({}, props), void 0) }), void 0));
|
|
34
35
|
}
|
|
35
36
|
return jsx(CardContent, __assign({}, props), void 0);
|
|
36
37
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../../src/lib/components/card/index.tsx"],"sourcesContent":["import { ReactNode } from 'react';\nimport classNamesUtil from 'classnames';\nimport { ChevronRightIcon } from '../icon';\n\nimport styles from './style.module.scss';\n\nexport interface CardProps {\n children?: ReactNode;\n classNames?: {\n wrapper?: string;\n label?: string;\n title?: string;\n description?: string;\n children?: string;\n icon?: string;\n actionIcon?: string;\n };\n density?: 'balanced' | 'compact' | 'spacious';\n dropShadow?: boolean;\n icon?: ReactNode;\n title?: ReactNode;\n titleVariant?: 'small' | 'medium' | 'large';\n description?: ReactNode;\n descriptionVariant?: 'small' | 'large';\n label?: ReactNode;\n onClick?: () => void;\n actionIcon?: ReactNode;\n}
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../../src/lib/components/card/index.tsx"],"sourcesContent":["import { ReactNode } from 'react';\nimport classNamesUtil from 'classnames';\nimport { ChevronRightIcon } from '../icon';\n\nimport styles from './style.module.scss';\n\nexport interface CardProps {\n children?: ReactNode;\n classNames?: {\n buttonWrapper?: string;\n wrapper?: string;\n label?: string;\n title?: string;\n description?: string;\n children?: string;\n icon?: string;\n actionIcon?: string;\n };\n density?: 'balanced' | 'compact' | 'spacious';\n dropShadow?: boolean;\n icon?: ReactNode;\n title?: ReactNode;\n titleVariant?: 'small' | 'medium' | 'large';\n description?: ReactNode;\n descriptionVariant?: 'small' | 'large';\n label?: ReactNode;\n onClick?: () => void;\n actionIcon?: ReactNode;\n}\n\nconst CardContent = ({\n children,\n classNames,\n density = 'balanced',\n description,\n descriptionVariant = 'large',\n dropShadow = true,\n icon,\n label,\n onClick,\n actionIcon,\n title,\n titleVariant = 'large',\n}: CardProps) => (\n <section\n className={classNamesUtil(\n 'd-flex fd-column jc-center br8 bg-white w100 ta-left',\n { 'bs-sm': dropShadow },\n {\n compact: 'p16',\n balanced: 'p24',\n spacious: 'p32',\n }[density],\n classNames?.wrapper\n )}\n >\n <div className=\"d-flex w100\">\n {icon && (\n <div\n className={classNamesUtil(\n `d-flex ai-center tc-primary-500`,\n styles.icon,\n styles[`icon${density}`],\n classNames?.icon\n )}\n >\n {icon}\n </div>\n )}\n\n <div className=\"d-flex jc-between w100\">\n <div className=\"d-flex jc-center gap8 fd-column tc-grey-900 w100\">\n {label && (\n <h3 className={classNamesUtil('p-p--small', classNames?.label)}>\n {label}\n </h3>\n )}\n\n {title && (\n <h2\n className={classNamesUtil(\n classNames?.title,\n {\n large: 'p-h3',\n medium: 'p-h4',\n small: 'p-p',\n }[titleVariant]\n )}\n >\n {title}\n </h2>\n )}\n\n {description && (\n <div\n className={classNamesUtil(\n 'tc-grey-600',\n classNames?.description,\n descriptionVariant === 'small' ? 'p-p--small' : 'p-p'\n )}\n >\n {description}\n </div>\n )}\n </div>\n\n {onClick && (\n <div\n className={classNamesUtil(\n styles.actionIcon,\n classNames?.actionIcon,\n styles[`actionIcon${density}`],\n 'd-flex ai-center'\n )}\n >\n {actionIcon || <ChevronRightIcon size={24} />}\n </div>\n )}\n </div>\n </div>\n\n {children && <div className={classNames?.children}>{children}</div>}\n </section>\n);\n\nconst Card = (props: CardProps) => {\n const { onClick } = props;\n\n if (onClick) {\n return (\n <button\n className={classNamesUtil(\n 'c-pointer d-flex w100 br8',\n styles.button,\n props.classNames?.buttonWrapper\n )}\n onClick={onClick}\n type=\"button\"\n >\n <CardContent {...props} />\n </button>\n );\n }\n\n return <CardContent {...props} />;\n};\n\nexport { Card };\n"],"names":["classNames","_jsxs","classNamesUtil","_jsx"],"mappings":";;;;;;;;;;;;AA8BA,IAAM,WAAW,GAAG,UAAC,EAaT;QAZV,QAAQ,cAAA,EACRA,YAAU,gBAAA,EACV,eAAoB,EAApB,OAAO,mBAAG,UAAU,KAAA,EACpB,WAAW,iBAAA,EACX,0BAA4B,EAA5B,kBAAkB,mBAAG,OAAO,KAAA,EAC5B,kBAAiB,EAAjB,UAAU,mBAAG,IAAI,KAAA,EACjB,IAAI,UAAA,EACJ,KAAK,WAAA,EACL,OAAO,aAAA,EACP,UAAU,gBAAA,EACV,KAAK,WAAA,EACL,oBAAsB,EAAtB,YAAY,mBAAG,OAAO,KAAA;IACP,QACfC,2BACE,SAAS,EAAEC,UAAc,CACvB,sDAAsD,EACtD,EAAE,OAAO,EAAE,UAAU,EAAE,EACvB;YACE,OAAO,EAAE,KAAK;YACd,QAAQ,EAAE,KAAK;YACf,QAAQ,EAAE,KAAK;SAChB,CAAC,OAAO,CAAC,EACVF,YAAU,aAAVA,YAAU,uBAAVA,YAAU,CAAE,OAAO,CACpB,iBAEDC,uBAAK,SAAS,EAAC,aAAa,iBACzB,IAAI,KACHE,sBACE,SAAS,EAAED,UAAc,CACvB,iCAAiC,EACjC,MAAM,CAAC,IAAI,EACX,MAAM,CAAC,SAAO,OAAS,CAAC,EACxBF,YAAU,aAAVA,YAAU,uBAAVA,YAAU,CAAE,IAAI,CACjB,gBAEA,IAAI,YACD,CACP;oBAEDC,uBAAK,SAAS,EAAC,wBAAwB,iBACrCA,uBAAK,SAAS,EAAC,kDAAkD,iBAC9D,KAAK,KACJE,qBAAI,SAAS,EAAED,UAAc,CAAC,YAAY,EAAEF,YAAU,aAAVA,YAAU,uBAAVA,YAAU,CAAE,KAAK,CAAC,gBAC3D,KAAK,YACH,CACN;oCAEA,KAAK,KACJG,qBACE,SAAS,EAAED,UAAc,CACvBF,YAAU,aAAVA,YAAU,uBAAVA,YAAU,CAAE,KAAK,EACjB;4CACE,KAAK,EAAE,MAAM;4CACb,MAAM,EAAE,MAAM;4CACd,KAAK,EAAE,KAAK;yCACb,CAAC,YAAY,CAAC,CAChB,gBAEA,KAAK,YACH,CACN;oCAEA,WAAW,KACVG,sBACE,SAAS,EAAED,UAAc,CACvB,aAAa,EACbF,YAAU,aAAVA,YAAU,uBAAVA,YAAU,CAAE,WAAW,EACvB,kBAAkB,KAAK,OAAO,GAAG,YAAY,GAAG,KAAK,CACtD,gBAEA,WAAW,YACR,CACP,aACG;4BAEL,OAAO,KACNG,sBACE,SAAS,EAAED,UAAc,CACvB,MAAM,CAAC,UAAU,EACjBF,YAAU,aAAVA,YAAU,uBAAVA,YAAU,CAAE,UAAU,EACtB,MAAM,CAAC,eAAa,OAAS,CAAC,EAC9B,kBAAkB,CACnB,gBAEA,UAAU,IAAIG,IAAC,gBAAgB,IAAC,IAAI,EAAE,EAAE,WAAI,YACzC,CACP,aACG,aACF;YAEL,QAAQ,IAAIA,sBAAK,SAAS,EAAEH,YAAU,aAAVA,YAAU,uBAAVA,YAAU,CAAE,QAAQ,gBAAG,QAAQ,YAAO,aAC3D;AA/EK,CAgFhB,CAAC;IAEI,IAAI,GAAG,UAAC,KAAgB;;IACpB,IAAA,OAAO,GAAK,KAAK,QAAV,CAAW;IAE1B,IAAI,OAAO,EAAE;QACX,QACEG,yBACE,SAAS,EAAED,UAAc,CACvB,2BAA2B,EAC3B,MAAM,CAAC,MAAM,EACb,MAAA,KAAK,CAAC,UAAU,0CAAE,aAAa,CAChC,EACD,OAAO,EAAE,OAAO,EAChB,IAAI,EAAC,QAAQ,gBAEbC,IAAC,WAAW,eAAK,KAAK,UAAI,YACnB,EACT;KACH;IAED,OAAOA,IAAC,WAAW,eAAK,KAAK,UAAI,CAAC;AACpC;;;;"}
|
|
@@ -42,7 +42,7 @@ var CurrencyInput = function (_a) {
|
|
|
42
42
|
}, [value]);
|
|
43
43
|
useEffect(function () {
|
|
44
44
|
if (shadowValue === '' && value) {
|
|
45
|
-
onChange === null || onChange === void 0 ? void 0 : onChange(
|
|
45
|
+
onChange === null || onChange === void 0 ? void 0 : onChange(0);
|
|
46
46
|
}
|
|
47
47
|
else if (shadowValue) {
|
|
48
48
|
onChange === null || onChange === void 0 ? void 0 : onChange(reverseFormatInput(shadowValue));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../../../src/lib/components/input/currency/format/index.ts","../../../../../../src/lib/components/input/currency/index.tsx"],"sourcesContent":["export const formatInput = (input: string): string => {\n const decimalSeparator = input.includes(',') ? ',' : '.';\n const parts = input.split(decimalSeparator);\n const floor = parts[0];\n const ceiling = parts[1];\n parts[0] = floor.replace(/\\B(?=(\\d{3})+(?!\\d))/g, ' ');\n if (ceiling) {\n parts[1] = ceiling.slice(0, Math.min(ceiling.length, 2));\n }\n return parts.join('.');\n};\n\nexport function reverseFormatInput(input: string): number {\n return Number(input.replace(/,/, '.').replace(/\\s/g, ''));\n}\n","import { useEffect, useRef, useState } from 'react';\n\nimport { formatInput, reverseFormatInput } from './format';\nimport { Input, InputProps } from '..';\n\nexport type CurrencyInputProps = {\n value?: number
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../../../src/lib/components/input/currency/format/index.ts","../../../../../../src/lib/components/input/currency/index.tsx"],"sourcesContent":["export const formatInput = (input: string): string => {\n const decimalSeparator = input.includes(',') ? ',' : '.';\n const parts = input.split(decimalSeparator);\n const floor = parts[0];\n const ceiling = parts[1];\n parts[0] = floor.replace(/\\B(?=(\\d{3})+(?!\\d))/g, ' ');\n if (ceiling) {\n parts[1] = ceiling.slice(0, Math.min(ceiling.length, 2));\n }\n return parts.join('.');\n};\n\nexport function reverseFormatInput(input: string): number {\n return Number(input.replace(/,/, '.').replace(/\\s/g, ''));\n}\n","import { useEffect, useRef, useState } from 'react';\n\nimport { formatInput, reverseFormatInput } from './format';\nimport { Input, InputProps } from '..';\n\nexport type CurrencyInputProps = {\n value?: number;\n placeholder?: string;\n onChange?: (value: number) => void;\n} & Omit<InputProps, 'onChange' | 'value' | 'ref'>\n\nconst CurrencyInput = ({\n value,\n onChange,\n type,\n ...props\n}: CurrencyInputProps) => {\n const inputRef = useRef<HTMLInputElement | null>(null);\n const [cursor, setCursor] = useState<number | null>(null);\n const [shadowValue, setShadowValue] = useState('');\n\n const formattedShadowValue = formatInput(\n shadowValue\n .replace(/ /g, '') // remove all whitespace\n .replace(',', '.') // change commas to dot for decimal separator\n .replace('.', 'DECIMAL_SEPARATOR') // Gymnastic to remove all the but the first decimal separators 🤸\n .replace(/\\./g, '')\n .replace('DECIMAL_SEPARATOR', '.') // End of the Gymnastic 🤸\n .replace(/[^\\d\\\\.]/g, '') // remove all non decimal and dot\n );\n\n useEffect(() => {\n if (value && value !== reverseFormatInput(shadowValue)) {\n setShadowValue(formatInput(value.toString()));\n }\n // eslint-disable-next-line\n }, [value]);\n\n useEffect(() => {\n if (shadowValue === '' && value) {\n onChange?.(0);\n } else if (shadowValue) {\n onChange?.(reverseFormatInput(shadowValue));\n }\n // eslint-disable-next-line\n }, [shadowValue]);\n\n useEffect(() => {\n if (!inputRef.current || !cursor) {\n return;\n }\n\n const cursorDiff =\n String(formattedShadowValue).length - String(shadowValue).length;\n const newCursor = cursorDiff + cursor;\n\n inputRef.current.selectionStart = newCursor;\n inputRef.current.selectionEnd = newCursor;\n }, [cursor, formattedShadowValue, shadowValue]);\n\n return (\n <Input\n prefix=\"€\"\n ref={inputRef}\n type=\"string\"\n value={formattedShadowValue}\n onChange={(e) => {\n setCursor(e.target.selectionStart);\n setShadowValue(e.target.value);\n }}\n {...props}\n />\n );\n};\n\nexport { CurrencyInput };\n"],"names":["_jsx"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"input.stories.js","sources":["../../../../../../src/lib/components/input/currency/input.stories.tsx"],"sourcesContent":["\nimport { useState } from 'react';\nimport { CurrencyInput, CurrencyInputProps } from '.';\nimport sharedConfig from '../stories/config';\n\nconst story = {\n title: 'JSX/Inputs',\n component: CurrencyInput,\n argTypes: sharedConfig,\n parameters: {\n componentSubtitle: 'The default input component is used to gather informations from the user.'\n }\n};\n\nexport const CurrencyInputStory = ({ \n onChange,\n className,\n placeholder,\n value,\n label,\n hideLabel,\n prefix,\n error\n}: CurrencyInputProps) => {\n const [newValue, setValue] = useState<number
|
|
1
|
+
{"version":3,"file":"input.stories.js","sources":["../../../../../../src/lib/components/input/currency/input.stories.tsx"],"sourcesContent":["\nimport { useState } from 'react';\nimport { CurrencyInput, CurrencyInputProps } from '.';\nimport sharedConfig from '../stories/config';\n\nconst story = {\n title: 'JSX/Inputs',\n component: CurrencyInput,\n argTypes: sharedConfig,\n parameters: {\n componentSubtitle: 'The default input component is used to gather informations from the user.'\n }\n};\n\nexport const CurrencyInputStory = ({ \n onChange,\n className,\n placeholder,\n value,\n label,\n hideLabel,\n prefix,\n error\n}: CurrencyInputProps) => {\n const [newValue, setValue] = useState<number>(Number);\n\n const handleOnChange = (value: number) => {\n setValue(value)\n onChange?.(value);\n }\n\n return (\n <CurrencyInput \n onChange={handleOnChange}\n value={newValue}\n className={className}\n placeholder={placeholder}\n label={label}\n hideLabel={hideLabel}\n prefix={prefix}\n error={error}\n />\n );\n};\n\nCurrencyInputStory.storyName = 'CurrencyInput';\n\nexport default story;\n"],"names":["_jsx"],"mappings":";;;;;;;;;;IAKM,KAAK,GAAG;IACZ,KAAK,EAAE,YAAY;IACnB,SAAS,EAAE,aAAa;IACxB,QAAQ,EAAE,YAAY;IACtB,UAAU,EAAE;QACV,iBAAiB,EAAE,2EAA2E;KAC/F;EACD;IAEW,kBAAkB,GAAG,UAAC,EASd;QARnB,QAAQ,cAAA,EACR,SAAS,eAAA,EACT,WAAW,iBAAA,UACN,MACL,KAAK,WAAA,EACL,SAAS,eAAA,EACT,MAAM,YAAA,EACN,KAAK;IAEC,IAAA,KAAuB,QAAQ,CAAS,MAAM,CAAC,EAA9C,QAAQ,QAAA,EAAE,QAAQ,QAA4B,CAAC;IAEtD,IAAM,cAAc,GAAG,UAAC,KAAa;QACnC,QAAQ,CAAC,KAAK,CAAC,CAAA;QACf,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,KAAK,CAAC,CAAC;KACnB,CAAA;IAED,QACEA,IAAC,aAAa,IACZ,QAAQ,EAAE,cAAc,EACxB,KAAK,EAAE,QAAQ,EACf,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE,WAAW,EACxB,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,SAAS,EACpB,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK,WACZ,EACF;AACJ,EAAE;AAEF,kBAAkB,CAAC,SAAS,GAAG,eAAe;;;;;"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { InputProps } from '..';
|
|
2
2
|
export declare type CurrencyInputProps = {
|
|
3
|
-
value?: number
|
|
3
|
+
value?: number;
|
|
4
4
|
placeholder?: string;
|
|
5
|
-
onChange?: (value: number
|
|
5
|
+
onChange?: (value: number) => void;
|
|
6
6
|
} & Omit<InputProps, 'onChange' | 'value' | 'ref'>;
|
|
7
7
|
declare const CurrencyInput: ({ value, onChange, type, ...props }: CurrencyInputProps) => JSX.Element;
|
|
8
8
|
export { CurrencyInput };
|
package/package.json
CHANGED
|
@@ -7,6 +7,7 @@ import styles from './style.module.scss';
|
|
|
7
7
|
export interface CardProps {
|
|
8
8
|
children?: ReactNode;
|
|
9
9
|
classNames?: {
|
|
10
|
+
buttonWrapper?: string;
|
|
10
11
|
wrapper?: string;
|
|
11
12
|
label?: string;
|
|
12
13
|
title?: string;
|
|
@@ -25,9 +26,9 @@ export interface CardProps {
|
|
|
25
26
|
label?: ReactNode;
|
|
26
27
|
onClick?: () => void;
|
|
27
28
|
actionIcon?: ReactNode;
|
|
28
|
-
}
|
|
29
|
+
}
|
|
29
30
|
|
|
30
|
-
const CardContent = ({
|
|
31
|
+
const CardContent = ({
|
|
31
32
|
children,
|
|
32
33
|
classNames,
|
|
33
34
|
density = 'balanced',
|
|
@@ -43,19 +44,19 @@ const CardContent = ({
|
|
|
43
44
|
}: CardProps) => (
|
|
44
45
|
<section
|
|
45
46
|
className={classNamesUtil(
|
|
46
|
-
'd-flex fd-column jc-center br8 bg-white w100 ta-left',
|
|
47
|
+
'd-flex fd-column jc-center br8 bg-white w100 ta-left',
|
|
47
48
|
{ 'bs-sm': dropShadow },
|
|
48
49
|
{
|
|
49
50
|
compact: 'p16',
|
|
50
51
|
balanced: 'p24',
|
|
51
|
-
spacious: 'p32'
|
|
52
|
+
spacious: 'p32',
|
|
52
53
|
}[density],
|
|
53
|
-
classNames?.wrapper
|
|
54
|
+
classNames?.wrapper
|
|
54
55
|
)}
|
|
55
56
|
>
|
|
56
|
-
<div className=
|
|
57
|
+
<div className="d-flex w100">
|
|
57
58
|
{icon && (
|
|
58
|
-
<div
|
|
59
|
+
<div
|
|
59
60
|
className={classNamesUtil(
|
|
60
61
|
`d-flex ai-center tc-primary-500`,
|
|
61
62
|
styles.icon,
|
|
@@ -67,23 +68,24 @@ const CardContent = ({
|
|
|
67
68
|
</div>
|
|
68
69
|
)}
|
|
69
70
|
|
|
70
|
-
<div className=
|
|
71
|
-
<div className=
|
|
71
|
+
<div className="d-flex jc-between w100">
|
|
72
|
+
<div className="d-flex jc-center gap8 fd-column tc-grey-900 w100">
|
|
72
73
|
{label && (
|
|
73
|
-
<h3
|
|
74
|
-
className={classNamesUtil('p-p--small', classNames?.label)}
|
|
75
|
-
>
|
|
74
|
+
<h3 className={classNamesUtil('p-p--small', classNames?.label)}>
|
|
76
75
|
{label}
|
|
77
76
|
</h3>
|
|
78
77
|
)}
|
|
79
78
|
|
|
80
79
|
{title && (
|
|
81
80
|
<h2
|
|
82
|
-
className={classNamesUtil(
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
81
|
+
className={classNamesUtil(
|
|
82
|
+
classNames?.title,
|
|
83
|
+
{
|
|
84
|
+
large: 'p-h3',
|
|
85
|
+
medium: 'p-h4',
|
|
86
|
+
small: 'p-p',
|
|
87
|
+
}[titleVariant]
|
|
88
|
+
)}
|
|
87
89
|
>
|
|
88
90
|
{title}
|
|
89
91
|
</h2>
|
|
@@ -117,9 +119,7 @@ const CardContent = ({
|
|
|
117
119
|
</div>
|
|
118
120
|
</div>
|
|
119
121
|
|
|
120
|
-
{children &&
|
|
121
|
-
<div className={classNames?.children}>{children}</div>
|
|
122
|
-
)}
|
|
122
|
+
{children && <div className={classNames?.children}>{children}</div>}
|
|
123
123
|
</section>
|
|
124
124
|
);
|
|
125
125
|
|
|
@@ -129,16 +129,20 @@ const Card = (props: CardProps) => {
|
|
|
129
129
|
if (onClick) {
|
|
130
130
|
return (
|
|
131
131
|
<button
|
|
132
|
-
className={classNamesUtil(
|
|
133
|
-
|
|
132
|
+
className={classNamesUtil(
|
|
133
|
+
'c-pointer d-flex w100 br8',
|
|
134
|
+
styles.button,
|
|
135
|
+
props.classNames?.buttonWrapper
|
|
136
|
+
)}
|
|
137
|
+
onClick={onClick}
|
|
134
138
|
type="button"
|
|
135
139
|
>
|
|
136
140
|
<CardContent {...props} />
|
|
137
141
|
</button>
|
|
138
|
-
)
|
|
142
|
+
);
|
|
139
143
|
}
|
|
140
144
|
|
|
141
145
|
return <CardContent {...props} />;
|
|
142
|
-
}
|
|
146
|
+
};
|
|
143
147
|
|
|
144
148
|
export { Card };
|
|
@@ -4,9 +4,9 @@ import { formatInput, reverseFormatInput } from './format';
|
|
|
4
4
|
import { Input, InputProps } from '..';
|
|
5
5
|
|
|
6
6
|
export type CurrencyInputProps = {
|
|
7
|
-
value?: number
|
|
7
|
+
value?: number;
|
|
8
8
|
placeholder?: string;
|
|
9
|
-
onChange?: (value: number
|
|
9
|
+
onChange?: (value: number) => void;
|
|
10
10
|
} & Omit<InputProps, 'onChange' | 'value' | 'ref'>
|
|
11
11
|
|
|
12
12
|
const CurrencyInput = ({
|
|
@@ -38,7 +38,7 @@ const CurrencyInput = ({
|
|
|
38
38
|
|
|
39
39
|
useEffect(() => {
|
|
40
40
|
if (shadowValue === '' && value) {
|
|
41
|
-
onChange?.(
|
|
41
|
+
onChange?.(0);
|
|
42
42
|
} else if (shadowValue) {
|
|
43
43
|
onChange?.(reverseFormatInput(shadowValue));
|
|
44
44
|
}
|
|
@@ -22,9 +22,9 @@ export const CurrencyInputStory = ({
|
|
|
22
22
|
prefix,
|
|
23
23
|
error
|
|
24
24
|
}: CurrencyInputProps) => {
|
|
25
|
-
const [newValue, setValue] = useState<number
|
|
25
|
+
const [newValue, setValue] = useState<number>(Number);
|
|
26
26
|
|
|
27
|
-
const handleOnChange = (value: number
|
|
27
|
+
const handleOnChange = (value: number) => {
|
|
28
28
|
setValue(value)
|
|
29
29
|
onChange?.(value);
|
|
30
30
|
}
|