@tecsinapse/react-web-kit 1.22.3 → 1.22.5
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/components/atoms/Switch/Switch.d.ts +4 -0
- package/dist/cjs/components/atoms/Switch/Switch.js +116 -0
- package/dist/cjs/components/atoms/Switch/Switch.js.map +1 -0
- package/dist/cjs/components/atoms/Switch/index.d.ts +1 -0
- package/dist/cjs/components/atoms/Switch/styled.d.ts +3 -0
- package/dist/cjs/components/atoms/Switch/styled.js +33 -0
- package/dist/cjs/components/atoms/Switch/styled.js.map +1 -0
- package/dist/cjs/components/molecules/DatePicker/DatePicker.js +4 -5
- package/dist/cjs/components/molecules/DatePicker/DatePicker.js.map +1 -1
- package/dist/cjs/components/molecules/LabeledSwitch/LabeledSwitch.js +2 -2
- package/dist/cjs/components/molecules/LabeledSwitch/LabeledSwitch.js.map +1 -1
- package/dist/cjs/index.d.ts +4 -3
- package/dist/cjs/index.js +2 -0
- package/dist/cjs/index.js.map +1 -1
- package/dist/esm/components/atoms/Switch/Switch.d.ts +4 -0
- package/dist/esm/components/atoms/Switch/Switch.js +110 -0
- package/dist/esm/components/atoms/Switch/Switch.js.map +1 -0
- package/dist/esm/components/atoms/Switch/index.d.ts +1 -0
- package/dist/esm/components/atoms/Switch/styled.d.ts +3 -0
- package/dist/esm/components/atoms/Switch/styled.js +24 -0
- package/dist/esm/components/atoms/Switch/styled.js.map +1 -0
- package/dist/esm/components/molecules/DatePicker/DatePicker.js +3 -4
- package/dist/esm/components/molecules/DatePicker/DatePicker.js.map +1 -1
- package/dist/esm/components/molecules/LabeledSwitch/LabeledSwitch.js +1 -1
- package/dist/esm/components/molecules/LabeledSwitch/LabeledSwitch.js.map +1 -1
- package/dist/esm/index.d.ts +4 -3
- package/dist/esm/index.js +1 -0
- package/dist/esm/index.js.map +1 -1
- package/package.json +4 -3
|
@@ -0,0 +1,116 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var React = require('react');
|
|
4
|
+
var reactWebKit = require('@tecsinapse/react-web-kit');
|
|
5
|
+
var reactTransitionGroup = require('react-transition-group');
|
|
6
|
+
var styled = require('./styled.js');
|
|
7
|
+
|
|
8
|
+
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
9
|
+
|
|
10
|
+
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
11
|
+
|
|
12
|
+
var __defProp = Object.defineProperty;
|
|
13
|
+
var __defProps = Object.defineProperties;
|
|
14
|
+
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
15
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
16
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
17
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
18
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
19
|
+
var __spreadValues = (a, b) => {
|
|
20
|
+
for (var prop in b || (b = {}))
|
|
21
|
+
if (__hasOwnProp.call(b, prop))
|
|
22
|
+
__defNormalProp(a, prop, b[prop]);
|
|
23
|
+
if (__getOwnPropSymbols)
|
|
24
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
25
|
+
if (__propIsEnum.call(b, prop))
|
|
26
|
+
__defNormalProp(a, prop, b[prop]);
|
|
27
|
+
}
|
|
28
|
+
return a;
|
|
29
|
+
};
|
|
30
|
+
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
31
|
+
var __objRest = (source, exclude) => {
|
|
32
|
+
var target = {};
|
|
33
|
+
for (var prop in source)
|
|
34
|
+
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
35
|
+
target[prop] = source[prop];
|
|
36
|
+
if (source != null && __getOwnPropSymbols)
|
|
37
|
+
for (var prop of __getOwnPropSymbols(source)) {
|
|
38
|
+
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
39
|
+
target[prop] = source[prop];
|
|
40
|
+
}
|
|
41
|
+
return target;
|
|
42
|
+
};
|
|
43
|
+
const Switch = (_a) => {
|
|
44
|
+
var _b = _a, {
|
|
45
|
+
onChange,
|
|
46
|
+
activeColor = "primary",
|
|
47
|
+
activeColorTone = "medium",
|
|
48
|
+
inactiveColor = "secondary",
|
|
49
|
+
inactiveColorTone = "light",
|
|
50
|
+
active,
|
|
51
|
+
disabled = false
|
|
52
|
+
} = _b, rest = __objRest(_b, [
|
|
53
|
+
"onChange",
|
|
54
|
+
"activeColor",
|
|
55
|
+
"activeColorTone",
|
|
56
|
+
"inactiveColor",
|
|
57
|
+
"inactiveColorTone",
|
|
58
|
+
"active",
|
|
59
|
+
"disabled"
|
|
60
|
+
]);
|
|
61
|
+
const theme = reactWebKit.useTheme();
|
|
62
|
+
const handleChange = React.useCallback(() => {
|
|
63
|
+
if (!disabled)
|
|
64
|
+
onChange(!active);
|
|
65
|
+
}, [active, onChange]);
|
|
66
|
+
const defaultStyleBackground = {
|
|
67
|
+
transition: `all 300ms ease`
|
|
68
|
+
};
|
|
69
|
+
const getBackgroundColor = (color) => {
|
|
70
|
+
return disabled ? reactWebKit.lightenDarkenColor(theme.color[inactiveColor][inactiveColorTone], 20) : color;
|
|
71
|
+
};
|
|
72
|
+
const transitionStylesBackground = {
|
|
73
|
+
entering: {
|
|
74
|
+
backgroundColor: getBackgroundColor(
|
|
75
|
+
theme.color[inactiveColor][inactiveColorTone]
|
|
76
|
+
)
|
|
77
|
+
},
|
|
78
|
+
entered: {
|
|
79
|
+
backgroundColor: getBackgroundColor(
|
|
80
|
+
theme.color[activeColor][activeColorTone]
|
|
81
|
+
)
|
|
82
|
+
},
|
|
83
|
+
exiting: {
|
|
84
|
+
backgroundColor: getBackgroundColor(
|
|
85
|
+
theme.color[activeColor][activeColorTone]
|
|
86
|
+
)
|
|
87
|
+
},
|
|
88
|
+
exited: {
|
|
89
|
+
backgroundColor: getBackgroundColor(
|
|
90
|
+
theme.color[inactiveColor][inactiveColorTone]
|
|
91
|
+
)
|
|
92
|
+
}
|
|
93
|
+
};
|
|
94
|
+
const defaultStyleCircle = {
|
|
95
|
+
transition: `transform ${100}ms ease`
|
|
96
|
+
};
|
|
97
|
+
const transitionStylesCircle = {
|
|
98
|
+
entering: { transform: "translateX(0%)" },
|
|
99
|
+
entered: { transform: "translateX(150%)" },
|
|
100
|
+
exiting: { transform: "translateX(150%)" },
|
|
101
|
+
exited: { transform: "translateX(0%)" }
|
|
102
|
+
};
|
|
103
|
+
return /* @__PURE__ */ React__default["default"].createElement(reactTransitionGroup.Transition, {
|
|
104
|
+
in: active,
|
|
105
|
+
timeout: 100
|
|
106
|
+
}, (state) => /* @__PURE__ */ React__default["default"].createElement("div", {
|
|
107
|
+
onClick: handleChange
|
|
108
|
+
}, /* @__PURE__ */ React__default["default"].createElement(styled.StyledSwitchContent, __spreadProps(__spreadValues({}, rest), {
|
|
109
|
+
style: __spreadValues(__spreadValues({}, defaultStyleBackground), transitionStylesBackground[state])
|
|
110
|
+
}), /* @__PURE__ */ React__default["default"].createElement(styled.StyledSwitch, {
|
|
111
|
+
style: __spreadValues(__spreadValues({}, defaultStyleCircle), transitionStylesCircle[state])
|
|
112
|
+
}))));
|
|
113
|
+
};
|
|
114
|
+
|
|
115
|
+
module.exports = Switch;
|
|
116
|
+
//# sourceMappingURL=Switch.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Switch.js","sources":["../../../../../src/components/atoms/Switch/Switch.tsx"],"sourcesContent":["import React, { FC, useCallback } from 'react';\nimport {\n lightenDarkenColor,\n SwitchProps,\n useTheme,\n} from '@tecsinapse/react-web-kit';\nimport { Transition } from 'react-transition-group';\nimport { StyledSwitchContent, StyledSwitch } from './styled';\n\nconst Switch: FC<SwitchProps> = ({\n onChange,\n activeColor = 'primary',\n activeColorTone = 'medium',\n inactiveColor = 'secondary',\n inactiveColorTone = 'light',\n active,\n disabled = false,\n ...rest\n}) => {\n const theme = useTheme();\n const handleChange = useCallback(() => {\n if (!disabled) onChange(!active);\n }, [active, onChange]);\n\n const defaultStyleBackground = {\n transition: `all 300ms ease`,\n };\n\n const getBackgroundColor = (color: string) => {\n return disabled\n ? lightenDarkenColor(theme.color[inactiveColor][inactiveColorTone], 20)\n : color;\n };\n const transitionStylesBackground = {\n entering: {\n backgroundColor: getBackgroundColor(\n theme.color[inactiveColor][inactiveColorTone]\n ),\n },\n entered: {\n backgroundColor: getBackgroundColor(\n theme.color[activeColor][activeColorTone]\n ),\n },\n exiting: {\n backgroundColor: getBackgroundColor(\n theme.color[activeColor][activeColorTone]\n ),\n },\n exited: {\n backgroundColor: getBackgroundColor(\n theme.color[inactiveColor][inactiveColorTone]\n ),\n },\n };\n\n const defaultStyleCircle = {\n transition: `transform ${100}ms ease`,\n };\n\n const transitionStylesCircle = {\n entering: { transform: 'translateX(0%)' },\n entered: { transform: 'translateX(150%)' },\n exiting: { transform: 'translateX(150%)' },\n exited: { transform: 'translateX(0%)' },\n };\n\n return (\n <Transition in={active} timeout={100}>\n {state => (\n <div onClick={handleChange}>\n <StyledSwitchContent\n {...rest}\n style={{\n ...defaultStyleBackground,\n ...transitionStylesBackground[state],\n }}\n >\n <StyledSwitch\n style={{\n ...defaultStyleCircle,\n ...transitionStylesCircle[state],\n }}\n />\n </StyledSwitchContent>\n </div>\n )}\n </Transition>\n );\n};\n\nexport default Switch;\n"],"names":["useTheme","useCallback","lightenDarkenColor","React","Transition","StyledSwitchContent","StyledSwitch"],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as Switch } from './Switch';
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
export declare const StyledSwitchContent: import("@emotion/styled").StyledComponent<any, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
3
|
+
export declare const StyledSwitch: import("@emotion/styled").StyledComponent<any, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var styled = require('@emotion/styled');
|
|
6
|
+
var reactCore = require('@tecsinapse/react-core');
|
|
7
|
+
var styled$1 = require('@tecsinapse/react-core/src/components/atoms/Switch/styled');
|
|
8
|
+
|
|
9
|
+
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
10
|
+
|
|
11
|
+
var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
|
|
12
|
+
|
|
13
|
+
const StyledSwitchContent = styled__default["default"].div`
|
|
14
|
+
border-radius: ${({ theme }) => theme.borderRadius.pill};
|
|
15
|
+
display: flex;
|
|
16
|
+
padding: 0 ${({ theme }) => theme.spacing.micro};
|
|
17
|
+
align-items: center;
|
|
18
|
+
width: ${reactCore.RFValueStr(styled$1.SWITCH_BODY_WIDTH)};
|
|
19
|
+
height: ${reactCore.RFValueStr("22px")};
|
|
20
|
+
&:hover {
|
|
21
|
+
cursor: pointer;
|
|
22
|
+
}
|
|
23
|
+
`;
|
|
24
|
+
const StyledSwitch = styled__default["default"].div`
|
|
25
|
+
border-radius: ${({ theme }) => theme.borderRadius.pill};
|
|
26
|
+
background-color: ${({ theme }) => theme.miscellaneous.surfaceColor};
|
|
27
|
+
width: ${reactCore.RFValueStr(styled$1.SWITCH_PIN_WIDTH)};
|
|
28
|
+
height: ${reactCore.RFValueStr("16px")};
|
|
29
|
+
`;
|
|
30
|
+
|
|
31
|
+
exports.StyledSwitch = StyledSwitch;
|
|
32
|
+
exports.StyledSwitchContent = StyledSwitchContent;
|
|
33
|
+
//# sourceMappingURL=styled.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"styled.js","sources":["../../../../../src/components/atoms/Switch/styled.ts"],"sourcesContent":["import styled from '@emotion/styled';\nimport { RFValueStr, StyleProps } from '@tecsinapse/react-core';\nimport {\n SWITCH_BODY_WIDTH,\n SWITCH_PIN_WIDTH,\n} from '@tecsinapse/react-core/src/components/atoms/Switch/styled';\n\nexport const StyledSwitchContent = styled.div<Partial<StyleProps>>`\n border-radius: ${({ theme }) => theme.borderRadius.pill};\n display: flex;\n padding: 0 ${({ theme }) => theme.spacing.micro};\n align-items: center;\n width: ${RFValueStr(SWITCH_BODY_WIDTH)};\n height: ${RFValueStr('22px')};\n &:hover {\n cursor: pointer;\n }\n`;\n\nexport const StyledSwitch = styled.div<Partial<StyleProps>>`\n border-radius: ${({ theme }) => theme.borderRadius.pill};\n background-color: ${({ theme }) => theme.miscellaneous.surfaceColor};\n width: ${RFValueStr(SWITCH_PIN_WIDTH)};\n height: ${RFValueStr('16px')};\n`;\n"],"names":["styled","RFValueStr","SWITCH_BODY_WIDTH","SWITCH_PIN_WIDTH"],"mappings":";;;;;;;;;;;;AAOO,MAAM,sBAAsBA,0BAAO,CAAA,GAAA,CAAA;AAAA,iBAAA,EACvB,CAAC,EAAE,KAAM,EAAA,KAAM,MAAM,YAAa,CAAA,IAAA,CAAA;AAAA;AAAA,aAAA,EAEtC,CAAC,EAAE,KAAM,EAAA,KAAM,MAAM,OAAQ,CAAA,KAAA,CAAA;AAAA;AAAA,SAAA,EAEjCC,qBAAWC,0BAAiB,CAAA,CAAA;AAAA,UAAA,EAC3BD,qBAAW,MAAM,CAAA,CAAA;AAAA;AAAA;AAAA;AAAA,EAAA;AAMtB,MAAM,eAAeD,0BAAO,CAAA,GAAA,CAAA;AAAA,iBAAA,EAChB,CAAC,EAAE,KAAM,EAAA,KAAM,MAAM,YAAa,CAAA,IAAA,CAAA;AAAA,oBAAA,EAC/B,CAAC,EAAE,KAAM,EAAA,KAAM,MAAM,aAAc,CAAA,YAAA,CAAA;AAAA,SAAA,EAC9CC,qBAAWE,yBAAgB,CAAA,CAAA;AAAA,UAAA,EAC1BF,qBAAW,MAAM,CAAA,CAAA;AAAA;;;;;"}
|
|
@@ -5,8 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
var reactCore = require('@tecsinapse/react-core');
|
|
6
6
|
var React = require('react');
|
|
7
7
|
var index = require('../../atoms/Dropdown/index.js');
|
|
8
|
-
var
|
|
9
|
-
var reactWebKit = require('@tecsinapse/react-web-kit');
|
|
8
|
+
var InputMask = require('../../atoms/InputMask/InputMask.js');
|
|
10
9
|
var dateFns = require('date-fns');
|
|
11
10
|
|
|
12
11
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
@@ -86,7 +85,7 @@ const DatePicker = (_a) => {
|
|
|
86
85
|
return void 0;
|
|
87
86
|
}, [value]);
|
|
88
87
|
const controlComponent = (onPress, displayValue) => {
|
|
89
|
-
return /* @__PURE__ */ React__default["default"].createElement(
|
|
88
|
+
return /* @__PURE__ */ React__default["default"].createElement(InputMask, {
|
|
90
89
|
onBlur: () => {
|
|
91
90
|
if ((controlledInput != null ? controlledInput : []).length < 8 && (controlledInput != null ? controlledInput : []).length > 0) {
|
|
92
91
|
setError(true);
|
|
@@ -110,7 +109,7 @@ const DatePicker = (_a) => {
|
|
|
110
109
|
},
|
|
111
110
|
mask: reactCore.Masks.DATE,
|
|
112
111
|
value: displayValue,
|
|
113
|
-
hint: error ? "Data inv\xE1lida" :
|
|
112
|
+
hint: error ? "Data inv\xE1lida" : void 0,
|
|
114
113
|
variant: error ? "error" : "default",
|
|
115
114
|
onChange: (input) => {
|
|
116
115
|
setControlledInput(input);
|
|
@@ -125,7 +124,7 @@ const DatePicker = (_a) => {
|
|
|
125
124
|
variant: "text",
|
|
126
125
|
style: { padding: 0 },
|
|
127
126
|
onPress
|
|
128
|
-
}, /* @__PURE__ */ React__default["default"].createElement(
|
|
127
|
+
}, /* @__PURE__ */ React__default["default"].createElement(reactCore.CalendarIcon, {
|
|
129
128
|
name: "calendar-sharp",
|
|
130
129
|
type: "ionicon",
|
|
131
130
|
size: "centi"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DatePicker.js","sources":["../../../../../src/components/molecules/DatePicker/DatePicker.tsx"],"sourcesContent":["import {\n Button,\n Calendar,\n DatePicker as DatePickerCore,\n DatePickerProps,\n DateRange,\n Masks,\n SelectionType,\n} from '@tecsinapse/react-core';\nimport React, { useCallback, useMemo, useState } from 'react';\nimport { Dropdown } from '../../atoms/Dropdown';\nimport {
|
|
1
|
+
{"version":3,"file":"DatePicker.js","sources":["../../../../../src/components/molecules/DatePicker/DatePicker.tsx"],"sourcesContent":["import {\n Button,\n Calendar,\n DatePicker as DatePickerCore,\n DatePickerProps,\n DateRange,\n Masks,\n SelectionType,\n CalendarIcon,\n} from '@tecsinapse/react-core';\nimport React, { useCallback, useMemo, useState } from 'react';\nimport { Dropdown } from '../../atoms/Dropdown';\nimport { InputMask } from '../../atoms/InputMask';\nimport { parse, isValid } from 'date-fns';\n\nexport type WebDatePickerProps<T extends SelectionType> = Omit<\n DatePickerProps<T>,\n | 'CalendarComponent'\n | 'renderCalendar'\n | 'requestCloseCalendar'\n | 'requestShowCalendar'\n> & {\n callbackAfterValidated?: (valid: boolean, message?: string) => void;\n};\n\nexport const DatePicker = <T extends SelectionType>({\n value,\n type,\n locale,\n onChange,\n callbackAfterValidated,\n ...rest\n}: WebDatePickerProps<T>): JSX.Element => {\n const [visible, setVisible] = useState(false);\n const [controlledInput, setControlledInput] = useState<string>();\n const show = useCallback(() => setVisible(true), []);\n const close = useCallback(() => setVisible(false), []);\n const [error, setError] = useState<boolean>(false);\n\n const getYear = useMemo(() => {\n if (value) {\n if (type === 'range') {\n if ((value as DateRange).lowest !== undefined)\n return new Date((value as DateRange).lowest).getFullYear();\n } else {\n return new Date(value as Date).getFullYear();\n }\n }\n return undefined;\n }, [value]);\n\n const getMonth = useMemo(() => {\n if (value) {\n if (type === 'range') {\n if ((value as DateRange).lowest !== undefined)\n return new Date((value as DateRange).lowest).getMonth();\n } else {\n return new Date(value as Date).getMonth();\n }\n }\n return undefined;\n }, [value]);\n\n const controlComponent = (onPress, displayValue) => {\n return (\n <InputMask\n onBlur={() => {\n if (\n (controlledInput ?? []).length < 8 &&\n (controlledInput ?? []).length > 0\n ) {\n setError(true);\n callbackAfterValidated?.(false, 'Data inválida');\n }\n if (controlledInput?.length === 8) {\n const auxData = parse(controlledInput, 'ddMMyyyy', new Date(), {\n locale,\n });\n const isValidDate = isValid(auxData);\n callbackAfterValidated?.(isValidDate, 'Data inválida');\n\n if (isValidDate && auxData !== value) {\n setError(false);\n onChange?.(auxData as typeof value);\n }\n }\n if (controlledInput?.length === 0) {\n setError(true);\n callbackAfterValidated?.(false, 'Data inválida');\n }\n }}\n mask={Masks.DATE}\n value={displayValue}\n hint={error ? 'Data inválida' : undefined}\n variant={error ? 'error' : 'default'}\n onChange={input => {\n setControlledInput(input);\n if ((error && input.length < 8) || isValid(value)) {\n callbackAfterValidated?.(true);\n setError(false);\n }\n }}\n placeholder={'Não informada'}\n rightComponent={\n <Button\n effect={'none'}\n variant={'text'}\n style={{ padding: 0 }}\n onPress={onPress}\n >\n <CalendarIcon name=\"calendar-sharp\" type=\"ionicon\" size=\"centi\" />\n </Button>\n }\n />\n );\n };\n\n if (type === 'day') {\n return (\n <DatePickerCore\n {...rest}\n CalendarComponent={Calendar}\n onChange={onChange}\n locale={locale}\n value={value}\n type={type}\n year={getYear}\n format={'dd/MM/yyyy'}\n month={getMonth}\n requestShowCalendar={show}\n requestCloseCalendar={close}\n renderCalendar={calendar => (\n <Dropdown visible={visible} setVisible={setVisible}>\n {calendar}\n </Dropdown>\n )}\n controlComponent={controlComponent}\n />\n );\n } else {\n return (\n <DatePickerCore\n {...rest}\n CalendarComponent={Calendar}\n onChange={onChange}\n locale={locale}\n value={value}\n type={type}\n year={getYear}\n format={'dd/MM/yyyy'}\n month={getMonth}\n requestShowCalendar={show}\n requestCloseCalendar={close}\n renderCalendar={calendar => (\n <Dropdown visible={visible} setVisible={setVisible}>\n {calendar}\n </Dropdown>\n )}\n />\n );\n }\n};\n"],"names":["useState","useCallback","useMemo","React","parse","isValid","Masks","Button","CalendarIcon","DatePickerCore","Calendar","Dropdown"],"mappings":"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"}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var reactCore = require('@tecsinapse/react-core');
|
|
4
3
|
var React = require('react');
|
|
5
4
|
var LabelComponent = require('./LabelComponent.js');
|
|
6
5
|
var styled = require('./styled.js');
|
|
6
|
+
var Switch = require('../../atoms/Switch/Switch.js');
|
|
7
7
|
|
|
8
8
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
9
9
|
|
|
@@ -63,7 +63,7 @@ const LabeledSwitch = (_a) => {
|
|
|
63
63
|
disabled: !pressableLabel || disabled,
|
|
64
64
|
switchDisabled: disabled,
|
|
65
65
|
onPress: () => onChange(!active)
|
|
66
|
-
}) : /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null), /* @__PURE__ */ React__default["default"].createElement(
|
|
66
|
+
}) : /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null), /* @__PURE__ */ React__default["default"].createElement(Switch, __spreadValues({
|
|
67
67
|
active,
|
|
68
68
|
disabled,
|
|
69
69
|
onChange
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LabeledSwitch.js","sources":["../../../../../src/components/molecules/LabeledSwitch/LabeledSwitch.tsx"],"sourcesContent":["import { LabeledSwitchProps,
|
|
1
|
+
{"version":3,"file":"LabeledSwitch.js","sources":["../../../../../src/components/molecules/LabeledSwitch/LabeledSwitch.tsx"],"sourcesContent":["import { LabeledSwitchProps, TextProps } from '@tecsinapse/react-core';\nimport React, { FC } from 'react';\nimport LabelComponent from './LabelComponent';\nimport { StyledDiv } from './styled';\nimport Switch from '../../atoms/Switch/Switch';\n\nexport type LabeledSwitchWebProps = LabeledSwitchProps & {\n labelProps?: TextProps;\n};\n\nconst LabeledSwitch: FC<LabeledSwitchWebProps> = ({\n label,\n labelPosition = 'right',\n labelProps,\n pressableLabel = false,\n disabled,\n active,\n onChange,\n ...rest\n}) => {\n return (\n <StyledDiv>\n {labelPosition === 'left' ? (\n <LabelComponent\n active={active}\n label={label}\n labelPosition={'left'}\n labelProps={labelProps}\n disabled={!pressableLabel || disabled}\n switchDisabled={disabled}\n onPress={() => onChange(!active)}\n />\n ) : (\n <></>\n )}\n <Switch\n active={active}\n disabled={disabled}\n onChange={onChange}\n {...rest}\n />\n {labelPosition === 'right' ? (\n <LabelComponent\n active={active}\n label={label}\n labelPosition={'right'}\n labelProps={labelProps}\n disabled={!pressableLabel || disabled}\n switchDisabled={disabled}\n onPress={() => onChange(!active)}\n />\n ) : (\n <></>\n )}\n </StyledDiv>\n );\n};\n\nexport default LabeledSwitch;\n"],"names":["React","StyledDiv"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAUM,MAAA,aAAA,GAA2C,CAAC,EAS5C,KAAA;AAT4C,EAChD,IAAA,EAAA,GAAA,EAAA,EAAA;AAAA,IAAA,KAAA;AAAA,IACA,aAAgB,GAAA,OAAA;AAAA,IAChB,UAAA;AAAA,IACA,cAAiB,GAAA,KAAA;AAAA,IACjB,QAAA;AAAA,IACA,MAAA;AAAA,IACA,QAAA;AAAA,GAjBF,GAUkD,EAQ7C,EAAA,IAAA,GAAA,SAAA,CAR6C,EAQ7C,EAAA;AAAA,IAPH,OAAA;AAAA,IACA,eAAA;AAAA,IACA,YAAA;AAAA,IACA,gBAAA;AAAA,IACA,UAAA;AAAA,IACA,QAAA;AAAA,IACA,UAAA;AAAA,GAAA,CAAA,CAAA;AAGA,EAAA,uBACGA,yBAAA,CAAA,aAAA,CAAAC,gBAAA,EAAA,IAAA,EACE,aAAkB,KAAA,MAAA,mBAChBD,yBAAA,CAAA,aAAA,CAAA,cAAA,EAAA;AAAA,IACC,MAAA;AAAA,IACA,KAAA;AAAA,IACA,aAAe,EAAA,MAAA;AAAA,IACf,UAAA;AAAA,IACA,QAAA,EAAU,CAAC,cAAkB,IAAA,QAAA;AAAA,IAC7B,cAAgB,EAAA,QAAA;AAAA,IAChB,OAAS,EAAA,MAAM,QAAS,CAAA,CAAC,MAAM,CAAA;AAAA,GACjC,CAAA,mBAEEA,yBAAA,CAAA,aAAA,CAAAA,yBAAA,CAAA,QAAA,EAAA,IAAA,CAAA,kBAEHA,yBAAA,CAAA,aAAA,CAAA,MAAA,EAAA,cAAA,CAAA;AAAA,IACC,MAAA;AAAA,IACA,QAAA;AAAA,IACA,QAAA;AAAA,GAAA,EACI,IACN,CAAA,CAAA,EACC,aAAkB,KAAA,OAAA,mBAChBA,yBAAA,CAAA,aAAA,CAAA,cAAA,EAAA;AAAA,IACC,MAAA;AAAA,IACA,KAAA;AAAA,IACA,aAAe,EAAA,OAAA;AAAA,IACf,UAAA;AAAA,IACA,QAAA,EAAU,CAAC,cAAkB,IAAA,QAAA;AAAA,IAC7B,cAAgB,EAAA,QAAA;AAAA,IAChB,OAAS,EAAA,MAAM,QAAS,CAAA,CAAC,MAAM,CAAA;AAAA,GACjC,CAAA,mGAEE,CAEN,CAAA,CAAA;AAEJ;;;;"}
|
package/dist/cjs/index.d.ts
CHANGED
|
@@ -19,7 +19,7 @@ export type { TagProps } from './components/atoms/Tag';
|
|
|
19
19
|
export { Tooltip } from './components/atoms/Tooltip';
|
|
20
20
|
export type { ITooltip } from './components/atoms/Tooltip';
|
|
21
21
|
export { Breadcrumbs } from './components/molecules/Breadcrumbs';
|
|
22
|
-
export type { BreadcrumbsProps, BreadcrumbType } from './components/molecules/Breadcrumbs';
|
|
22
|
+
export type { BreadcrumbsProps, BreadcrumbType, } from './components/molecules/Breadcrumbs';
|
|
23
23
|
export { DatePicker } from './components/molecules/DatePicker';
|
|
24
24
|
export type { WebDatePickerProps } from './components/molecules/DatePicker';
|
|
25
25
|
export { DateTimePicker } from './components/molecules/DateTimePicker';
|
|
@@ -31,10 +31,11 @@ export type { IGridItemWeb, IGridWeb } from './components/molecules/Grid';
|
|
|
31
31
|
export { IconTextButton } from './components/molecules/IconTextButton';
|
|
32
32
|
export { InputPassword } from './components/molecules/InputPassword';
|
|
33
33
|
export type { InputPasswordWebProps } from './components/molecules/InputPassword';
|
|
34
|
+
export { Switch } from './components/atoms/Switch';
|
|
34
35
|
export { LabeledSwitch } from './components/molecules/LabeledSwitch';
|
|
35
36
|
export type { LabeledSwitchWebProps } from './components/molecules/LabeledSwitch';
|
|
36
37
|
export { Menubar } from './components/molecules/Menubar';
|
|
37
|
-
export type { MenubarItemsOptions, MenubarMostUsedType, MenubarOptionsType, MenubarProps } from './components/molecules/Menubar';
|
|
38
|
+
export type { MenubarItemsOptions, MenubarMostUsedType, MenubarOptionsType, MenubarProps, } from './components/molecules/Menubar';
|
|
38
39
|
export { Select } from './components/molecules/Select';
|
|
39
40
|
export type { SelectProps } from './components/molecules/Select';
|
|
40
41
|
export { Snackbar } from './components/molecules/Snackbar';
|
|
@@ -42,5 +43,5 @@ export type { SnackbarWebProps } from './components/molecules/Snackbar';
|
|
|
42
43
|
export { TextArea } from './components/molecules/TextArea';
|
|
43
44
|
export type { TextAreaProps } from './components/molecules/TextArea';
|
|
44
45
|
export { DataGrid } from './components/organisms/DataGrid';
|
|
45
|
-
export type { DataGridProps, HeadersType } from './components/organisms/DataGrid';
|
|
46
|
+
export type { DataGridProps, HeadersType, } from './components/organisms/DataGrid';
|
|
46
47
|
export * from './hooks';
|
package/dist/cjs/index.js
CHANGED
|
@@ -21,6 +21,7 @@ var Item = require('./components/molecules/Grid/Item/Item.js');
|
|
|
21
21
|
var Grid = require('./components/molecules/Grid/Grid.js');
|
|
22
22
|
var IconTextButton = require('./components/molecules/IconTextButton/IconTextButton.js');
|
|
23
23
|
var InputPassword = require('./components/molecules/InputPassword/InputPassword.js');
|
|
24
|
+
var Switch = require('./components/atoms/Switch/Switch.js');
|
|
24
25
|
var LabeledSwitch = require('./components/molecules/LabeledSwitch/LabeledSwitch.js');
|
|
25
26
|
var Menubar = require('./components/molecules/Menubar/Menubar.js');
|
|
26
27
|
var Select = require('./components/molecules/Select/Select.js');
|
|
@@ -59,6 +60,7 @@ exports.GridItem = Item;
|
|
|
59
60
|
exports.Grid = Grid;
|
|
60
61
|
exports.IconTextButton = IconTextButton;
|
|
61
62
|
exports.InputPassword = InputPassword;
|
|
63
|
+
exports.Switch = Switch;
|
|
62
64
|
exports.LabeledSwitch = LabeledSwitch;
|
|
63
65
|
exports.Menubar = Menubar;
|
|
64
66
|
exports.Select = Select;
|
package/dist/cjs/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -0,0 +1,110 @@
|
|
|
1
|
+
import React, { useCallback } from 'react';
|
|
2
|
+
import { useTheme, lightenDarkenColor } from '@tecsinapse/react-web-kit';
|
|
3
|
+
import { Transition } from 'react-transition-group';
|
|
4
|
+
import { StyledSwitchContent, StyledSwitch } from './styled.js';
|
|
5
|
+
|
|
6
|
+
var __defProp = Object.defineProperty;
|
|
7
|
+
var __defProps = Object.defineProperties;
|
|
8
|
+
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
9
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
10
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
11
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
12
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
13
|
+
var __spreadValues = (a, b) => {
|
|
14
|
+
for (var prop in b || (b = {}))
|
|
15
|
+
if (__hasOwnProp.call(b, prop))
|
|
16
|
+
__defNormalProp(a, prop, b[prop]);
|
|
17
|
+
if (__getOwnPropSymbols)
|
|
18
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
19
|
+
if (__propIsEnum.call(b, prop))
|
|
20
|
+
__defNormalProp(a, prop, b[prop]);
|
|
21
|
+
}
|
|
22
|
+
return a;
|
|
23
|
+
};
|
|
24
|
+
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
25
|
+
var __objRest = (source, exclude) => {
|
|
26
|
+
var target = {};
|
|
27
|
+
for (var prop in source)
|
|
28
|
+
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
29
|
+
target[prop] = source[prop];
|
|
30
|
+
if (source != null && __getOwnPropSymbols)
|
|
31
|
+
for (var prop of __getOwnPropSymbols(source)) {
|
|
32
|
+
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
33
|
+
target[prop] = source[prop];
|
|
34
|
+
}
|
|
35
|
+
return target;
|
|
36
|
+
};
|
|
37
|
+
const Switch = (_a) => {
|
|
38
|
+
var _b = _a, {
|
|
39
|
+
onChange,
|
|
40
|
+
activeColor = "primary",
|
|
41
|
+
activeColorTone = "medium",
|
|
42
|
+
inactiveColor = "secondary",
|
|
43
|
+
inactiveColorTone = "light",
|
|
44
|
+
active,
|
|
45
|
+
disabled = false
|
|
46
|
+
} = _b, rest = __objRest(_b, [
|
|
47
|
+
"onChange",
|
|
48
|
+
"activeColor",
|
|
49
|
+
"activeColorTone",
|
|
50
|
+
"inactiveColor",
|
|
51
|
+
"inactiveColorTone",
|
|
52
|
+
"active",
|
|
53
|
+
"disabled"
|
|
54
|
+
]);
|
|
55
|
+
const theme = useTheme();
|
|
56
|
+
const handleChange = useCallback(() => {
|
|
57
|
+
if (!disabled)
|
|
58
|
+
onChange(!active);
|
|
59
|
+
}, [active, onChange]);
|
|
60
|
+
const defaultStyleBackground = {
|
|
61
|
+
transition: `all 300ms ease`
|
|
62
|
+
};
|
|
63
|
+
const getBackgroundColor = (color) => {
|
|
64
|
+
return disabled ? lightenDarkenColor(theme.color[inactiveColor][inactiveColorTone], 20) : color;
|
|
65
|
+
};
|
|
66
|
+
const transitionStylesBackground = {
|
|
67
|
+
entering: {
|
|
68
|
+
backgroundColor: getBackgroundColor(
|
|
69
|
+
theme.color[inactiveColor][inactiveColorTone]
|
|
70
|
+
)
|
|
71
|
+
},
|
|
72
|
+
entered: {
|
|
73
|
+
backgroundColor: getBackgroundColor(
|
|
74
|
+
theme.color[activeColor][activeColorTone]
|
|
75
|
+
)
|
|
76
|
+
},
|
|
77
|
+
exiting: {
|
|
78
|
+
backgroundColor: getBackgroundColor(
|
|
79
|
+
theme.color[activeColor][activeColorTone]
|
|
80
|
+
)
|
|
81
|
+
},
|
|
82
|
+
exited: {
|
|
83
|
+
backgroundColor: getBackgroundColor(
|
|
84
|
+
theme.color[inactiveColor][inactiveColorTone]
|
|
85
|
+
)
|
|
86
|
+
}
|
|
87
|
+
};
|
|
88
|
+
const defaultStyleCircle = {
|
|
89
|
+
transition: `transform ${100}ms ease`
|
|
90
|
+
};
|
|
91
|
+
const transitionStylesCircle = {
|
|
92
|
+
entering: { transform: "translateX(0%)" },
|
|
93
|
+
entered: { transform: "translateX(150%)" },
|
|
94
|
+
exiting: { transform: "translateX(150%)" },
|
|
95
|
+
exited: { transform: "translateX(0%)" }
|
|
96
|
+
};
|
|
97
|
+
return /* @__PURE__ */ React.createElement(Transition, {
|
|
98
|
+
in: active,
|
|
99
|
+
timeout: 100
|
|
100
|
+
}, (state) => /* @__PURE__ */ React.createElement("div", {
|
|
101
|
+
onClick: handleChange
|
|
102
|
+
}, /* @__PURE__ */ React.createElement(StyledSwitchContent, __spreadProps(__spreadValues({}, rest), {
|
|
103
|
+
style: __spreadValues(__spreadValues({}, defaultStyleBackground), transitionStylesBackground[state])
|
|
104
|
+
}), /* @__PURE__ */ React.createElement(StyledSwitch, {
|
|
105
|
+
style: __spreadValues(__spreadValues({}, defaultStyleCircle), transitionStylesCircle[state])
|
|
106
|
+
}))));
|
|
107
|
+
};
|
|
108
|
+
|
|
109
|
+
export { Switch as default };
|
|
110
|
+
//# sourceMappingURL=Switch.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Switch.js","sources":["../../../../../src/components/atoms/Switch/Switch.tsx"],"sourcesContent":["import React, { FC, useCallback } from 'react';\nimport {\n lightenDarkenColor,\n SwitchProps,\n useTheme,\n} from '@tecsinapse/react-web-kit';\nimport { Transition } from 'react-transition-group';\nimport { StyledSwitchContent, StyledSwitch } from './styled';\n\nconst Switch: FC<SwitchProps> = ({\n onChange,\n activeColor = 'primary',\n activeColorTone = 'medium',\n inactiveColor = 'secondary',\n inactiveColorTone = 'light',\n active,\n disabled = false,\n ...rest\n}) => {\n const theme = useTheme();\n const handleChange = useCallback(() => {\n if (!disabled) onChange(!active);\n }, [active, onChange]);\n\n const defaultStyleBackground = {\n transition: `all 300ms ease`,\n };\n\n const getBackgroundColor = (color: string) => {\n return disabled\n ? lightenDarkenColor(theme.color[inactiveColor][inactiveColorTone], 20)\n : color;\n };\n const transitionStylesBackground = {\n entering: {\n backgroundColor: getBackgroundColor(\n theme.color[inactiveColor][inactiveColorTone]\n ),\n },\n entered: {\n backgroundColor: getBackgroundColor(\n theme.color[activeColor][activeColorTone]\n ),\n },\n exiting: {\n backgroundColor: getBackgroundColor(\n theme.color[activeColor][activeColorTone]\n ),\n },\n exited: {\n backgroundColor: getBackgroundColor(\n theme.color[inactiveColor][inactiveColorTone]\n ),\n },\n };\n\n const defaultStyleCircle = {\n transition: `transform ${100}ms ease`,\n };\n\n const transitionStylesCircle = {\n entering: { transform: 'translateX(0%)' },\n entered: { transform: 'translateX(150%)' },\n exiting: { transform: 'translateX(150%)' },\n exited: { transform: 'translateX(0%)' },\n };\n\n return (\n <Transition in={active} timeout={100}>\n {state => (\n <div onClick={handleChange}>\n <StyledSwitchContent\n {...rest}\n style={{\n ...defaultStyleBackground,\n ...transitionStylesBackground[state],\n }}\n >\n <StyledSwitch\n style={{\n ...defaultStyleCircle,\n ...transitionStylesCircle[state],\n }}\n />\n </StyledSwitchContent>\n </div>\n )}\n </Transition>\n );\n};\n\nexport default Switch;\n"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as Switch } from './Switch';
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
export declare const StyledSwitchContent: import("@emotion/styled").StyledComponent<any, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
3
|
+
export declare const StyledSwitch: import("@emotion/styled").StyledComponent<any, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import styled from '@emotion/styled';
|
|
2
|
+
import { RFValueStr } from '@tecsinapse/react-core';
|
|
3
|
+
import { SWITCH_BODY_WIDTH, SWITCH_PIN_WIDTH } from '@tecsinapse/react-core/src/components/atoms/Switch/styled';
|
|
4
|
+
|
|
5
|
+
const StyledSwitchContent = styled.div`
|
|
6
|
+
border-radius: ${({ theme }) => theme.borderRadius.pill};
|
|
7
|
+
display: flex;
|
|
8
|
+
padding: 0 ${({ theme }) => theme.spacing.micro};
|
|
9
|
+
align-items: center;
|
|
10
|
+
width: ${RFValueStr(SWITCH_BODY_WIDTH)};
|
|
11
|
+
height: ${RFValueStr("22px")};
|
|
12
|
+
&:hover {
|
|
13
|
+
cursor: pointer;
|
|
14
|
+
}
|
|
15
|
+
`;
|
|
16
|
+
const StyledSwitch = styled.div`
|
|
17
|
+
border-radius: ${({ theme }) => theme.borderRadius.pill};
|
|
18
|
+
background-color: ${({ theme }) => theme.miscellaneous.surfaceColor};
|
|
19
|
+
width: ${RFValueStr(SWITCH_PIN_WIDTH)};
|
|
20
|
+
height: ${RFValueStr("16px")};
|
|
21
|
+
`;
|
|
22
|
+
|
|
23
|
+
export { StyledSwitch, StyledSwitchContent };
|
|
24
|
+
//# sourceMappingURL=styled.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"styled.js","sources":["../../../../../src/components/atoms/Switch/styled.ts"],"sourcesContent":["import styled from '@emotion/styled';\nimport { RFValueStr, StyleProps } from '@tecsinapse/react-core';\nimport {\n SWITCH_BODY_WIDTH,\n SWITCH_PIN_WIDTH,\n} from '@tecsinapse/react-core/src/components/atoms/Switch/styled';\n\nexport const StyledSwitchContent = styled.div<Partial<StyleProps>>`\n border-radius: ${({ theme }) => theme.borderRadius.pill};\n display: flex;\n padding: 0 ${({ theme }) => theme.spacing.micro};\n align-items: center;\n width: ${RFValueStr(SWITCH_BODY_WIDTH)};\n height: ${RFValueStr('22px')};\n &:hover {\n cursor: pointer;\n }\n`;\n\nexport const StyledSwitch = styled.div<Partial<StyleProps>>`\n border-radius: ${({ theme }) => theme.borderRadius.pill};\n background-color: ${({ theme }) => theme.miscellaneous.surfaceColor};\n width: ${RFValueStr(SWITCH_PIN_WIDTH)};\n height: ${RFValueStr('16px')};\n`;\n"],"names":[],"mappings":";;;;AAOO,MAAM,sBAAsB,MAAO,CAAA,GAAA,CAAA;AAAA,iBAAA,EACvB,CAAC,EAAE,KAAM,EAAA,KAAM,MAAM,YAAa,CAAA,IAAA,CAAA;AAAA;AAAA,aAAA,EAEtC,CAAC,EAAE,KAAM,EAAA,KAAM,MAAM,OAAQ,CAAA,KAAA,CAAA;AAAA;AAAA,SAAA,EAEjC,WAAW,iBAAiB,CAAA,CAAA;AAAA,UAAA,EAC3B,WAAW,MAAM,CAAA,CAAA;AAAA;AAAA;AAAA;AAAA,EAAA;AAMtB,MAAM,eAAe,MAAO,CAAA,GAAA,CAAA;AAAA,iBAAA,EAChB,CAAC,EAAE,KAAM,EAAA,KAAM,MAAM,YAAa,CAAA,IAAA,CAAA;AAAA,oBAAA,EAC/B,CAAC,EAAE,KAAM,EAAA,KAAM,MAAM,aAAc,CAAA,YAAA,CAAA;AAAA,SAAA,EAC9C,WAAW,gBAAgB,CAAA,CAAA;AAAA,UAAA,EAC1B,WAAW,MAAM,CAAA,CAAA;AAAA;;;;"}
|
|
@@ -1,8 +1,7 @@
|
|
|
1
|
-
import { DatePicker as DatePicker$1, Calendar, Masks, Button } from '@tecsinapse/react-core';
|
|
1
|
+
import { DatePicker as DatePicker$1, Calendar, Masks, Button, CalendarIcon } from '@tecsinapse/react-core';
|
|
2
2
|
import React, { useState, useCallback, useMemo } from 'react';
|
|
3
3
|
import { Dropdown } from '../../atoms/Dropdown/index.js';
|
|
4
|
-
import
|
|
5
|
-
import { InputMask } from '@tecsinapse/react-web-kit';
|
|
4
|
+
import InputMask from '../../atoms/InputMask/InputMask.js';
|
|
6
5
|
import { parse, isValid } from 'date-fns';
|
|
7
6
|
|
|
8
7
|
var __defProp = Object.defineProperty;
|
|
@@ -102,7 +101,7 @@ const DatePicker = (_a) => {
|
|
|
102
101
|
},
|
|
103
102
|
mask: Masks.DATE,
|
|
104
103
|
value: displayValue,
|
|
105
|
-
hint: error ? "Data inv\xE1lida" :
|
|
104
|
+
hint: error ? "Data inv\xE1lida" : void 0,
|
|
106
105
|
variant: error ? "error" : "default",
|
|
107
106
|
onChange: (input) => {
|
|
108
107
|
setControlledInput(input);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DatePicker.js","sources":["../../../../../src/components/molecules/DatePicker/DatePicker.tsx"],"sourcesContent":["import {\n Button,\n Calendar,\n DatePicker as DatePickerCore,\n DatePickerProps,\n DateRange,\n Masks,\n SelectionType,\n} from '@tecsinapse/react-core';\nimport React, { useCallback, useMemo, useState } from 'react';\nimport { Dropdown } from '../../atoms/Dropdown';\nimport {
|
|
1
|
+
{"version":3,"file":"DatePicker.js","sources":["../../../../../src/components/molecules/DatePicker/DatePicker.tsx"],"sourcesContent":["import {\n Button,\n Calendar,\n DatePicker as DatePickerCore,\n DatePickerProps,\n DateRange,\n Masks,\n SelectionType,\n CalendarIcon,\n} from '@tecsinapse/react-core';\nimport React, { useCallback, useMemo, useState } from 'react';\nimport { Dropdown } from '../../atoms/Dropdown';\nimport { InputMask } from '../../atoms/InputMask';\nimport { parse, isValid } from 'date-fns';\n\nexport type WebDatePickerProps<T extends SelectionType> = Omit<\n DatePickerProps<T>,\n | 'CalendarComponent'\n | 'renderCalendar'\n | 'requestCloseCalendar'\n | 'requestShowCalendar'\n> & {\n callbackAfterValidated?: (valid: boolean, message?: string) => void;\n};\n\nexport const DatePicker = <T extends SelectionType>({\n value,\n type,\n locale,\n onChange,\n callbackAfterValidated,\n ...rest\n}: WebDatePickerProps<T>): JSX.Element => {\n const [visible, setVisible] = useState(false);\n const [controlledInput, setControlledInput] = useState<string>();\n const show = useCallback(() => setVisible(true), []);\n const close = useCallback(() => setVisible(false), []);\n const [error, setError] = useState<boolean>(false);\n\n const getYear = useMemo(() => {\n if (value) {\n if (type === 'range') {\n if ((value as DateRange).lowest !== undefined)\n return new Date((value as DateRange).lowest).getFullYear();\n } else {\n return new Date(value as Date).getFullYear();\n }\n }\n return undefined;\n }, [value]);\n\n const getMonth = useMemo(() => {\n if (value) {\n if (type === 'range') {\n if ((value as DateRange).lowest !== undefined)\n return new Date((value as DateRange).lowest).getMonth();\n } else {\n return new Date(value as Date).getMonth();\n }\n }\n return undefined;\n }, [value]);\n\n const controlComponent = (onPress, displayValue) => {\n return (\n <InputMask\n onBlur={() => {\n if (\n (controlledInput ?? []).length < 8 &&\n (controlledInput ?? []).length > 0\n ) {\n setError(true);\n callbackAfterValidated?.(false, 'Data inválida');\n }\n if (controlledInput?.length === 8) {\n const auxData = parse(controlledInput, 'ddMMyyyy', new Date(), {\n locale,\n });\n const isValidDate = isValid(auxData);\n callbackAfterValidated?.(isValidDate, 'Data inválida');\n\n if (isValidDate && auxData !== value) {\n setError(false);\n onChange?.(auxData as typeof value);\n }\n }\n if (controlledInput?.length === 0) {\n setError(true);\n callbackAfterValidated?.(false, 'Data inválida');\n }\n }}\n mask={Masks.DATE}\n value={displayValue}\n hint={error ? 'Data inválida' : undefined}\n variant={error ? 'error' : 'default'}\n onChange={input => {\n setControlledInput(input);\n if ((error && input.length < 8) || isValid(value)) {\n callbackAfterValidated?.(true);\n setError(false);\n }\n }}\n placeholder={'Não informada'}\n rightComponent={\n <Button\n effect={'none'}\n variant={'text'}\n style={{ padding: 0 }}\n onPress={onPress}\n >\n <CalendarIcon name=\"calendar-sharp\" type=\"ionicon\" size=\"centi\" />\n </Button>\n }\n />\n );\n };\n\n if (type === 'day') {\n return (\n <DatePickerCore\n {...rest}\n CalendarComponent={Calendar}\n onChange={onChange}\n locale={locale}\n value={value}\n type={type}\n year={getYear}\n format={'dd/MM/yyyy'}\n month={getMonth}\n requestShowCalendar={show}\n requestCloseCalendar={close}\n renderCalendar={calendar => (\n <Dropdown visible={visible} setVisible={setVisible}>\n {calendar}\n </Dropdown>\n )}\n controlComponent={controlComponent}\n />\n );\n } else {\n return (\n <DatePickerCore\n {...rest}\n CalendarComponent={Calendar}\n onChange={onChange}\n locale={locale}\n value={value}\n type={type}\n year={getYear}\n format={'dd/MM/yyyy'}\n month={getMonth}\n requestShowCalendar={show}\n requestCloseCalendar={close}\n renderCalendar={calendar => (\n <Dropdown visible={visible} setVisible={setVisible}>\n {calendar}\n </Dropdown>\n )}\n />\n );\n }\n};\n"],"names":["DatePickerCore"],"mappings":"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"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { Switch } from '@tecsinapse/react-core';
|
|
2
1
|
import React from 'react';
|
|
3
2
|
import LabelComponent from './LabelComponent.js';
|
|
4
3
|
import { StyledDiv } from './styled.js';
|
|
4
|
+
import Switch from '../../atoms/Switch/Switch.js';
|
|
5
5
|
|
|
6
6
|
var __defProp = Object.defineProperty;
|
|
7
7
|
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LabeledSwitch.js","sources":["../../../../../src/components/molecules/LabeledSwitch/LabeledSwitch.tsx"],"sourcesContent":["import { LabeledSwitchProps,
|
|
1
|
+
{"version":3,"file":"LabeledSwitch.js","sources":["../../../../../src/components/molecules/LabeledSwitch/LabeledSwitch.tsx"],"sourcesContent":["import { LabeledSwitchProps, TextProps } from '@tecsinapse/react-core';\nimport React, { FC } from 'react';\nimport LabelComponent from './LabelComponent';\nimport { StyledDiv } from './styled';\nimport Switch from '../../atoms/Switch/Switch';\n\nexport type LabeledSwitchWebProps = LabeledSwitchProps & {\n labelProps?: TextProps;\n};\n\nconst LabeledSwitch: FC<LabeledSwitchWebProps> = ({\n label,\n labelPosition = 'right',\n labelProps,\n pressableLabel = false,\n disabled,\n active,\n onChange,\n ...rest\n}) => {\n return (\n <StyledDiv>\n {labelPosition === 'left' ? (\n <LabelComponent\n active={active}\n label={label}\n labelPosition={'left'}\n labelProps={labelProps}\n disabled={!pressableLabel || disabled}\n switchDisabled={disabled}\n onPress={() => onChange(!active)}\n />\n ) : (\n <></>\n )}\n <Switch\n active={active}\n disabled={disabled}\n onChange={onChange}\n {...rest}\n />\n {labelPosition === 'right' ? (\n <LabelComponent\n active={active}\n label={label}\n labelPosition={'right'}\n labelProps={labelProps}\n disabled={!pressableLabel || disabled}\n switchDisabled={disabled}\n onPress={() => onChange(!active)}\n />\n ) : (\n <></>\n )}\n </StyledDiv>\n );\n};\n\nexport default LabeledSwitch;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAUM,MAAA,aAAA,GAA2C,CAAC,EAS5C,KAAA;AAT4C,EAChD,IAAA,EAAA,GAAA,EAAA,EAAA;AAAA,IAAA,KAAA;AAAA,IACA,aAAgB,GAAA,OAAA;AAAA,IAChB,UAAA;AAAA,IACA,cAAiB,GAAA,KAAA;AAAA,IACjB,QAAA;AAAA,IACA,MAAA;AAAA,IACA,QAAA;AAAA,GAjBF,GAUkD,EAQ7C,EAAA,IAAA,GAAA,SAAA,CAR6C,EAQ7C,EAAA;AAAA,IAPH,OAAA;AAAA,IACA,eAAA;AAAA,IACA,YAAA;AAAA,IACA,gBAAA;AAAA,IACA,UAAA;AAAA,IACA,QAAA;AAAA,IACA,UAAA;AAAA,GAAA,CAAA,CAAA;AAGA,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,SAAA,EAAA,IAAA,EACE,aAAkB,KAAA,MAAA,mBAChB,KAAA,CAAA,aAAA,CAAA,cAAA,EAAA;AAAA,IACC,MAAA;AAAA,IACA,KAAA;AAAA,IACA,aAAe,EAAA,MAAA;AAAA,IACf,UAAA;AAAA,IACA,QAAA,EAAU,CAAC,cAAkB,IAAA,QAAA;AAAA,IAC7B,cAAgB,EAAA,QAAA;AAAA,IAChB,OAAS,EAAA,MAAM,QAAS,CAAA,CAAC,MAAM,CAAA;AAAA,GACjC,CAAA,mBAEE,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,CAAA,kBAEH,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,cAAA,CAAA;AAAA,IACC,MAAA;AAAA,IACA,QAAA;AAAA,IACA,QAAA;AAAA,GAAA,EACI,IACN,CAAA,CAAA,EACC,aAAkB,KAAA,OAAA,mBAChB,KAAA,CAAA,aAAA,CAAA,cAAA,EAAA;AAAA,IACC,MAAA;AAAA,IACA,KAAA;AAAA,IACA,aAAe,EAAA,OAAA;AAAA,IACf,UAAA;AAAA,IACA,QAAA,EAAU,CAAC,cAAkB,IAAA,QAAA;AAAA,IAC7B,cAAgB,EAAA,QAAA;AAAA,IAChB,OAAS,EAAA,MAAM,QAAS,CAAA,CAAC,MAAM,CAAA;AAAA,GACjC,CAAA,2DAEE,CAEN,CAAA,CAAA;AAEJ;;;;"}
|
package/dist/esm/index.d.ts
CHANGED
|
@@ -19,7 +19,7 @@ export type { TagProps } from './components/atoms/Tag';
|
|
|
19
19
|
export { Tooltip } from './components/atoms/Tooltip';
|
|
20
20
|
export type { ITooltip } from './components/atoms/Tooltip';
|
|
21
21
|
export { Breadcrumbs } from './components/molecules/Breadcrumbs';
|
|
22
|
-
export type { BreadcrumbsProps, BreadcrumbType } from './components/molecules/Breadcrumbs';
|
|
22
|
+
export type { BreadcrumbsProps, BreadcrumbType, } from './components/molecules/Breadcrumbs';
|
|
23
23
|
export { DatePicker } from './components/molecules/DatePicker';
|
|
24
24
|
export type { WebDatePickerProps } from './components/molecules/DatePicker';
|
|
25
25
|
export { DateTimePicker } from './components/molecules/DateTimePicker';
|
|
@@ -31,10 +31,11 @@ export type { IGridItemWeb, IGridWeb } from './components/molecules/Grid';
|
|
|
31
31
|
export { IconTextButton } from './components/molecules/IconTextButton';
|
|
32
32
|
export { InputPassword } from './components/molecules/InputPassword';
|
|
33
33
|
export type { InputPasswordWebProps } from './components/molecules/InputPassword';
|
|
34
|
+
export { Switch } from './components/atoms/Switch';
|
|
34
35
|
export { LabeledSwitch } from './components/molecules/LabeledSwitch';
|
|
35
36
|
export type { LabeledSwitchWebProps } from './components/molecules/LabeledSwitch';
|
|
36
37
|
export { Menubar } from './components/molecules/Menubar';
|
|
37
|
-
export type { MenubarItemsOptions, MenubarMostUsedType, MenubarOptionsType, MenubarProps } from './components/molecules/Menubar';
|
|
38
|
+
export type { MenubarItemsOptions, MenubarMostUsedType, MenubarOptionsType, MenubarProps, } from './components/molecules/Menubar';
|
|
38
39
|
export { Select } from './components/molecules/Select';
|
|
39
40
|
export type { SelectProps } from './components/molecules/Select';
|
|
40
41
|
export { Snackbar } from './components/molecules/Snackbar';
|
|
@@ -42,5 +43,5 @@ export type { SnackbarWebProps } from './components/molecules/Snackbar';
|
|
|
42
43
|
export { TextArea } from './components/molecules/TextArea';
|
|
43
44
|
export type { TextAreaProps } from './components/molecules/TextArea';
|
|
44
45
|
export { DataGrid } from './components/organisms/DataGrid';
|
|
45
|
-
export type { DataGridProps, HeadersType } from './components/organisms/DataGrid';
|
|
46
|
+
export type { DataGridProps, HeadersType, } from './components/organisms/DataGrid';
|
|
46
47
|
export * from './hooks';
|
package/dist/esm/index.js
CHANGED
|
@@ -18,6 +18,7 @@ export { default as GridItem } from './components/molecules/Grid/Item/Item.js';
|
|
|
18
18
|
export { default as Grid } from './components/molecules/Grid/Grid.js';
|
|
19
19
|
export { default as IconTextButton } from './components/molecules/IconTextButton/IconTextButton.js';
|
|
20
20
|
export { default as InputPassword } from './components/molecules/InputPassword/InputPassword.js';
|
|
21
|
+
export { default as Switch } from './components/atoms/Switch/Switch.js';
|
|
21
22
|
export { default as LabeledSwitch } from './components/molecules/LabeledSwitch/LabeledSwitch.js';
|
|
22
23
|
export { default as Menubar } from './components/molecules/Menubar/Menubar.js';
|
|
23
24
|
export { default as Select } from './components/molecules/Select/Select.js';
|
package/dist/esm/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tecsinapse/react-web-kit",
|
|
3
3
|
"description": "TecSinapse React components",
|
|
4
|
-
"version": "1.22.
|
|
4
|
+
"version": "1.22.5",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"main": "dist/cjs/index.js",
|
|
7
7
|
"module": "dist/esm/index.js",
|
|
@@ -23,8 +23,9 @@
|
|
|
23
23
|
"@emotion/native": "~11.10.0",
|
|
24
24
|
"@emotion/react": "~11.10.0",
|
|
25
25
|
"@emotion/styled": "~11.10.0",
|
|
26
|
-
"@tecsinapse/react-core": "
|
|
26
|
+
"@tecsinapse/react-core": "1.21.5",
|
|
27
27
|
"@types/react-native": "^0.64.4",
|
|
28
|
+
"date-fns": "~2.29.1",
|
|
28
29
|
"react-native-vector-icons": "~9.2.0",
|
|
29
30
|
"react-transition-group": "~4.4.2"
|
|
30
31
|
},
|
|
@@ -42,5 +43,5 @@
|
|
|
42
43
|
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
|
|
43
44
|
"react-native-web": "^0.17.1 || ^0.18.0"
|
|
44
45
|
},
|
|
45
|
-
"gitHead": "
|
|
46
|
+
"gitHead": "48cda2986310e370097a8fcae68e5c02bb33a54f"
|
|
46
47
|
}
|