@tecsinapse/react-web-kit 1.22.4 → 1.22.6
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 +32 -0
- package/dist/cjs/components/atoms/Switch/styled.js.map +1 -0
- 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 +23 -0
- package/dist/esm/components/atoms/Switch/styled.js.map +1 -0
- 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 +3 -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,32 @@
|
|
|
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
|
+
|
|
8
|
+
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
9
|
+
|
|
10
|
+
var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
|
|
11
|
+
|
|
12
|
+
const StyledSwitchContent = styled__default["default"].div`
|
|
13
|
+
border-radius: ${({ theme }) => theme.borderRadius.pill};
|
|
14
|
+
display: flex;
|
|
15
|
+
padding: 0 ${({ theme }) => theme.spacing.micro};
|
|
16
|
+
align-items: center;
|
|
17
|
+
width: ${reactCore.RFValueStr(reactCore.SWITCH_BODY_WIDTH)};
|
|
18
|
+
height: ${reactCore.RFValueStr("22px")};
|
|
19
|
+
&:hover {
|
|
20
|
+
cursor: pointer;
|
|
21
|
+
}
|
|
22
|
+
`;
|
|
23
|
+
const StyledSwitch = styled__default["default"].div`
|
|
24
|
+
border-radius: ${({ theme }) => theme.borderRadius.pill};
|
|
25
|
+
background-color: ${({ theme }) => theme.miscellaneous.surfaceColor};
|
|
26
|
+
width: ${reactCore.RFValueStr(reactCore.SWITCH_PIN_WIDTH)};
|
|
27
|
+
height: ${reactCore.RFValueStr("16px")};
|
|
28
|
+
`;
|
|
29
|
+
|
|
30
|
+
exports.StyledSwitch = StyledSwitch;
|
|
31
|
+
exports.StyledSwitchContent = StyledSwitchContent;
|
|
32
|
+
//# 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 {\n RFValueStr,\n StyleProps,\n SWITCH_BODY_WIDTH,\n SWITCH_PIN_WIDTH,\n} from '@tecsinapse/react-core';\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":";;;;;;;;;;;AAQO,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,2BAAiB,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,0BAAgB,CAAA,CAAA;AAAA,UAAA,EAC1BF,qBAAW,MAAM,CAAA,CAAA;AAAA;;;;;"}
|
|
@@ -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,23 @@
|
|
|
1
|
+
import styled from '@emotion/styled';
|
|
2
|
+
import { RFValueStr, SWITCH_BODY_WIDTH, SWITCH_PIN_WIDTH } from '@tecsinapse/react-core';
|
|
3
|
+
|
|
4
|
+
const StyledSwitchContent = styled.div`
|
|
5
|
+
border-radius: ${({ theme }) => theme.borderRadius.pill};
|
|
6
|
+
display: flex;
|
|
7
|
+
padding: 0 ${({ theme }) => theme.spacing.micro};
|
|
8
|
+
align-items: center;
|
|
9
|
+
width: ${RFValueStr(SWITCH_BODY_WIDTH)};
|
|
10
|
+
height: ${RFValueStr("22px")};
|
|
11
|
+
&:hover {
|
|
12
|
+
cursor: pointer;
|
|
13
|
+
}
|
|
14
|
+
`;
|
|
15
|
+
const StyledSwitch = styled.div`
|
|
16
|
+
border-radius: ${({ theme }) => theme.borderRadius.pill};
|
|
17
|
+
background-color: ${({ theme }) => theme.miscellaneous.surfaceColor};
|
|
18
|
+
width: ${RFValueStr(SWITCH_PIN_WIDTH)};
|
|
19
|
+
height: ${RFValueStr("16px")};
|
|
20
|
+
`;
|
|
21
|
+
|
|
22
|
+
export { StyledSwitch, StyledSwitchContent };
|
|
23
|
+
//# 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 {\n RFValueStr,\n StyleProps,\n SWITCH_BODY_WIDTH,\n SWITCH_PIN_WIDTH,\n} from '@tecsinapse/react-core';\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":";;;AAQO,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,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.6",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"main": "dist/cjs/index.js",
|
|
7
7
|
"module": "dist/esm/index.js",
|
|
@@ -23,7 +23,7 @@
|
|
|
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": "1.21.
|
|
26
|
+
"@tecsinapse/react-core": "1.21.6",
|
|
27
27
|
"@types/react-native": "^0.64.4",
|
|
28
28
|
"date-fns": "~2.29.1",
|
|
29
29
|
"react-native-vector-icons": "~9.2.0",
|
|
@@ -43,5 +43,5 @@
|
|
|
43
43
|
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
|
|
44
44
|
"react-native-web": "^0.17.1 || ^0.18.0"
|
|
45
45
|
},
|
|
46
|
-
"gitHead": "
|
|
46
|
+
"gitHead": "7a2948b71936c6f7dfba2737fb62934618d6e809"
|
|
47
47
|
}
|