1 | "use strict";
|
2 |
|
3 | var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
4 |
|
5 | exports.__esModule = true;
|
6 | exports["default"] = exports.inputSizes = void 0;
|
7 |
|
8 | var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
9 |
|
10 | var _ThemeProvider = require("../ThemeProvider");
|
11 |
|
12 | var _ColorModeProvider = require("../ColorModeProvider");
|
13 |
|
14 | var _styledSystem = require("styled-system");
|
15 |
|
16 | function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
|
17 |
|
18 | function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
19 |
|
20 | var outlinedStyle = function outlinedStyle(_ref) {
|
21 | var theme = _ref.theme,
|
22 | colorMode = _ref.colorMode,
|
23 | focusBorderColor = _ref.focusBorderColor,
|
24 | errorBorderColor = _ref.errorBorderColor;
|
25 | var bg = {
|
26 | light: "white",
|
27 | dark: "whiteAlpha.100"
|
28 | };
|
29 | var borderColor = {
|
30 | light: "inherit",
|
31 | dark: "whiteAlpha.50"
|
32 | };
|
33 | var hoverColor = {
|
34 | light: "gray.300",
|
35 | dark: "whiteAlpha.200"
|
36 | };
|
37 | |
38 |
|
39 |
|
40 |
|
41 |
|
42 |
|
43 |
|
44 | var _focusBorderColor = (0, _styledSystem.get)(theme.colors, focusBorderColor, focusBorderColor
|
45 | );
|
46 |
|
47 | var _errorBorderColor = (0, _styledSystem.get)(theme.colors, errorBorderColor, errorBorderColor);
|
48 |
|
49 | return _objectSpread({}, readOnly, {
|
50 | border: "1px",
|
51 | borderColor: borderColor[colorMode],
|
52 | bg: bg[colorMode],
|
53 | _hover: {
|
54 | borderColor: hoverColor[colorMode]
|
55 | },
|
56 | _disabled: {
|
57 | opacity: "0.4",
|
58 | cursor: "not-allowed"
|
59 | },
|
60 | _focus: {
|
61 | zIndex: 1,
|
62 | borderColor: _focusBorderColor,
|
63 | boxShadow: "0 0 0 1px " + _focusBorderColor
|
64 | },
|
65 | _invalid: {
|
66 | borderColor: _errorBorderColor,
|
67 | boxShadow: "0 0 0 1px " + _errorBorderColor
|
68 | }
|
69 | });
|
70 | };
|
71 |
|
72 | var readOnly = {
|
73 | _readOnly: {
|
74 | bg: "transparent",
|
75 | boxShadow: "none !important",
|
76 | userSelect: "all"
|
77 | }
|
78 | };
|
79 |
|
80 | var filledStyle = function filledStyle(_ref2) {
|
81 | var theme = _ref2.theme,
|
82 | focusBorderColor = _ref2.focusBorderColor,
|
83 | errorBorderColor = _ref2.errorBorderColor,
|
84 | colorMode = _ref2.colorMode;
|
85 | var bg = {
|
86 | light: "gray.100",
|
87 | dark: "whiteAlpha.50"
|
88 | };
|
89 | var hoverColor = {
|
90 | light: "gray.200",
|
91 | dark: "whiteAlpha.100"
|
92 | };
|
93 |
|
94 | var _focusBorderColor = (0, _styledSystem.get)(theme.colors, focusBorderColor, focusBorderColor);
|
95 |
|
96 | var _errorBorderColor = (0, _styledSystem.get)(theme.colors, errorBorderColor, errorBorderColor);
|
97 |
|
98 | return _objectSpread({}, readOnly, {
|
99 | border: "2px",
|
100 | borderColor: "transparent",
|
101 | bg: bg[colorMode],
|
102 | _hover: {
|
103 | bg: hoverColor[colorMode]
|
104 | },
|
105 | _disabled: {
|
106 | opacity: "0.4",
|
107 | cursor: "not-allowed"
|
108 | },
|
109 | _focus: {
|
110 | zIndex: 1,
|
111 | bg: "transparent",
|
112 | borderColor: _focusBorderColor
|
113 | },
|
114 | _invalid: {
|
115 | borderColor: _errorBorderColor
|
116 | }
|
117 | });
|
118 | };
|
119 |
|
120 | var flushedStyle = function flushedStyle(_ref3) {
|
121 | var theme = _ref3.theme,
|
122 | focusBorderColor = _ref3.focusBorderColor,
|
123 | errorBorderColor = _ref3.errorBorderColor;
|
124 |
|
125 | var _focusBorderColor = (0, _styledSystem.get)(theme.colors, focusBorderColor, focusBorderColor);
|
126 |
|
127 | var _errorBorderColor = (0, _styledSystem.get)(theme.colors, errorBorderColor, errorBorderColor);
|
128 |
|
129 | return _objectSpread({}, readOnly, {
|
130 | borderBottom: "2px",
|
131 | borderColor: "inherit",
|
132 | rounded: 0,
|
133 | px: undefined,
|
134 | bg: "transparent",
|
135 | _focus: {
|
136 | zIndex: 1,
|
137 | borderColor: _focusBorderColor
|
138 | },
|
139 | _invalid: {
|
140 | borderColor: _errorBorderColor
|
141 | }
|
142 | });
|
143 | };
|
144 |
|
145 | var unstyledStyle = {
|
146 | bg: "transparent",
|
147 | px: undefined,
|
148 | height: undefined
|
149 | };
|
150 |
|
151 | var variantProps = function variantProps(props) {
|
152 | switch (props.variant) {
|
153 | case "flushed":
|
154 | return flushedStyle(props);
|
155 |
|
156 | case "unstyled":
|
157 | return unstyledStyle;
|
158 |
|
159 | case "filled":
|
160 | return filledStyle(props);
|
161 |
|
162 | case "outline":
|
163 | return outlinedStyle(props);
|
164 |
|
165 | default:
|
166 | return {};
|
167 | }
|
168 | };
|
169 |
|
170 | var baseProps = {
|
171 | display: "flex",
|
172 | alignItems: "center",
|
173 | position: "relative",
|
174 | transition: "all 0.2s",
|
175 | outline: "none",
|
176 | appearance: "none"
|
177 | };
|
178 | var inputSizes = {
|
179 | lg: {
|
180 | fontSize: "lg",
|
181 | px: 4,
|
182 | height: 12,
|
183 | rounded: "md"
|
184 | },
|
185 | md: {
|
186 | fontSize: "md",
|
187 | px: 4,
|
188 | height: 10,
|
189 | rounded: "md"
|
190 | },
|
191 | sm: {
|
192 | fontSize: "sm",
|
193 | px: 3,
|
194 | height: 8,
|
195 | rounded: "sm"
|
196 | }
|
197 | };
|
198 | exports.inputSizes = inputSizes;
|
199 |
|
200 | var sizeProps = function sizeProps(props) {
|
201 | return inputSizes[props.size];
|
202 | };
|
203 |
|
204 | var useInputStyle = function useInputStyle(props) {
|
205 | var theme = (0, _ThemeProvider.useTheme)();
|
206 |
|
207 | var _useColorMode = (0, _ColorModeProvider.useColorMode)(),
|
208 | colorMode = _useColorMode.colorMode;
|
209 |
|
210 | var _props = _objectSpread({}, props, {
|
211 | theme: theme,
|
212 | colorMode: colorMode
|
213 | });
|
214 |
|
215 | return _objectSpread({
|
216 | width: props.isFullWidth ? "100%" : undefined
|
217 | }, baseProps, {}, sizeProps(_props), {}, variantProps(_props));
|
218 | };
|
219 |
|
220 | var _default = useInputStyle;
|
221 | exports["default"] = _default; |
\ | No newline at end of file |