feat(smart-app): implement complete mobile app MVP

- App.tsx: full navigation (Auth stack + Main tabs with 5 screens)
- Auth: LoginScreen, RegisterScreen, ForgotPasswordScreen
- HomeScreen: dashboard with IoT metrics, weather widget, alerts, quick actions, sensors
- MapScreen: interactive map with layer toggles (6 layers)
- MarketplaceScreen: categories (6), products (5), search
- ChatScreen: AI chat with quick prompts (4), bot responses
- ProfileScreen: user info, stats, menu (9 items), logout
- AlertsScreen: alert list with severity, acknowledge
- SensorsScreen: sensor list with type filters (6 types), search
- ZonesScreen: zone cards with stats
- SettingsScreen: language picker (FR/EN/ES/DE), privacy, about
- Stores: iotStore (sensors, zones, alerts), notificationStore, uiStore + i18n
- Hooks: useSensors, useAlerts, useNotifications, useLocation
- Components: Card, Button, LoadingSpinner, ErrorBoundary, Header
- Services: iotService, notificationService (with axios API client)
- Utils: formatters (temp, AQI, noise, dates), validators (email, password, IBAN)
- Theme: colors.ts with full design system (Blue Ocean palette)
- Ditto: fixed MongoDB connection, new JWT secrets, official gateway image
This commit is contained in:
Eric FELIXINE
2026-06-01 18:00:35 -04:00
parent 08ca495bde
commit e30ae8ed09
35578 changed files with 3703534 additions and 43 deletions

View File

@@ -0,0 +1,45 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Outline = void 0;
var React = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
const Outline = ({
isV3,
label,
activeColor,
backgroundColor,
hasActiveOutline,
focused,
outlineColor,
roundness,
style
}) => /*#__PURE__*/React.createElement(_reactNative.View, {
testID: "text-input-outline",
pointerEvents: "none",
style: [styles.outline, !label && styles.noLabelOutline,
// eslint-disable-next-line react-native/no-inline-styles
{
backgroundColor,
borderRadius: roundness,
borderWidth: (isV3 ? hasActiveOutline : focused) ? 2 : 1,
borderColor: hasActiveOutline ? activeColor : outlineColor
}, style]
});
exports.Outline = Outline;
const styles = _reactNative.StyleSheet.create({
outline: {
position: 'absolute',
left: 0,
right: 0,
top: 6,
bottom: 0
},
noLabelOutline: {
top: 0
}
});
//# sourceMappingURL=Outline.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["React","_interopRequireWildcard","require","_reactNative","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","Outline","isV3","label","activeColor","backgroundColor","hasActiveOutline","focused","outlineColor","roundness","style","createElement","View","testID","pointerEvents","styles","outline","noLabelOutline","borderRadius","borderWidth","borderColor","exports","StyleSheet","create","position","left","right","top","bottom"],"sourceRoot":"../../../../../src","sources":["components/TextInput/Addons/Outline.tsx"],"mappings":";;;;;;AAAA,IAAAA,KAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AAMsB,SAAAD,wBAAAG,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAL,uBAAA,YAAAA,CAAAG,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAgBf,MAAMkB,OAAO,GAAGA,CAAC;EACtBC,IAAI;EACJC,KAAK;EACLC,WAAW;EACXC,eAAe;EACfC,gBAAgB;EAChBC,OAAO;EACPC,YAAY;EACZC,SAAS;EACTC;AACY,CAAC,kBACbhC,KAAA,CAAAiC,aAAA,CAAC9B,YAAA,CAAA+B,IAAI;EACHC,MAAM,EAAC,oBAAoB;EAC3BC,aAAa,EAAC,MAAM;EACpBJ,KAAK,EAAE,CACLK,MAAM,CAACC,OAAO,EACd,CAACb,KAAK,IAAIY,MAAM,CAACE,cAAc;EAC/B;EACA;IACEZ,eAAe;IACfa,YAAY,EAAET,SAAS;IACvBU,WAAW,EAAE,CAACjB,IAAI,GAAGI,gBAAgB,GAAGC,OAAO,IAAI,CAAC,GAAG,CAAC;IACxDa,WAAW,EAAEd,gBAAgB,GAAGF,WAAW,GAAGI;EAChD,CAAC,EACDE,KAAK;AACL,CACH,CACF;AAACW,OAAA,CAAApB,OAAA,GAAAA,OAAA;AAEF,MAAMc,MAAM,GAAGO,uBAAU,CAACC,MAAM,CAAC;EAC/BP,OAAO,EAAE;IACPQ,QAAQ,EAAE,UAAU;IACpBC,IAAI,EAAE,CAAC;IACPC,KAAK,EAAE,CAAC;IACRC,GAAG,EAAE,CAAC;IACNC,MAAM,EAAE;EACV,CAAC;EACDX,cAAc,EAAE;IACdU,GAAG,EAAE;EACP;AACF,CAAC,CAAC","ignoreList":[]}

View File

@@ -0,0 +1,52 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Underline = void 0;
var React = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
var _theming = require("../../../core/theming");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
const Underline = ({
parentState,
error,
colors,
activeColor,
underlineColorCustom,
hasActiveOutline,
style,
theme: themeOverrides
}) => {
const {
isV3
} = (0, _theming.useInternalTheme)(themeOverrides);
let backgroundColor = parentState.focused ? activeColor : underlineColorCustom;
if (error) backgroundColor = colors === null || colors === void 0 ? void 0 : colors.error;
const activeScale = isV3 ? 2 : 1;
return /*#__PURE__*/React.createElement(_reactNative.Animated.View, {
testID: "text-input-underline",
style: [styles.underline, isV3 && styles.md3Underline, {
backgroundColor,
// Underlines is thinner when input is not focused
transform: [{
scaleY: (isV3 ? hasActiveOutline : parentState.focused) ? activeScale : 0.5
}]
}, style]
});
};
exports.Underline = Underline;
const styles = _reactNative.StyleSheet.create({
underline: {
position: 'absolute',
left: 0,
right: 0,
bottom: 0,
height: 2,
zIndex: 1
},
md3Underline: {
height: 1
}
});
//# sourceMappingURL=Underline.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["React","_interopRequireWildcard","require","_reactNative","_theming","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","Underline","parentState","error","colors","activeColor","underlineColorCustom","hasActiveOutline","style","theme","themeOverrides","isV3","useInternalTheme","backgroundColor","focused","activeScale","createElement","Animated","View","testID","styles","underline","md3Underline","transform","scaleY","exports","StyleSheet","create","position","left","right","bottom","height","zIndex"],"sourceRoot":"../../../../../src","sources":["components/TextInput/Addons/Underline.tsx"],"mappings":";;;;;;AAAA,IAAAA,KAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AAIA,IAAAE,QAAA,GAAAF,OAAA;AAAyD,SAAAD,wBAAAI,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAN,uBAAA,YAAAA,CAAAI,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAiBlD,MAAMkB,SAAS,GAAGA,CAAC;EACxBC,WAAW;EACXC,KAAK;EACLC,MAAM;EACNC,WAAW;EACXC,oBAAoB;EACpBC,gBAAgB;EAChBC,KAAK;EACLC,KAAK,EAAEC;AACO,CAAC,KAAK;EACpB,MAAM;IAAEC;EAAK,CAAC,GAAG,IAAAC,yBAAgB,EAACF,cAAc,CAAC;EAEjD,IAAIG,eAAe,GAAGX,WAAW,CAACY,OAAO,GACrCT,WAAW,GACXC,oBAAoB;EAExB,IAAIH,KAAK,EAAEU,eAAe,GAAGT,MAAM,aAANA,MAAM,uBAANA,MAAM,CAAED,KAAK;EAE1C,MAAMY,WAAW,GAAGJ,IAAI,GAAG,CAAC,GAAG,CAAC;EAEhC,oBACElC,KAAA,CAAAuC,aAAA,CAACpC,YAAA,CAAAqC,QAAQ,CAACC,IAAI;IACZC,MAAM,EAAC,sBAAsB;IAC7BX,KAAK,EAAE,CACLY,MAAM,CAACC,SAAS,EAChBV,IAAI,IAAIS,MAAM,CAACE,YAAY,EAC3B;MACET,eAAe;MACf;MACAU,SAAS,EAAE,CACT;QACEC,MAAM,EAAE,CAACb,IAAI,GAAGJ,gBAAgB,GAAGL,WAAW,CAACY,OAAO,IAClDC,WAAW,GACX;MACN,CAAC;IAEL,CAAC,EACDP,KAAK;EACL,CACH,CAAC;AAEN,CAAC;AAACiB,OAAA,CAAAxB,SAAA,GAAAA,SAAA;AAEF,MAAMmB,MAAM,GAAGM,uBAAU,CAACC,MAAM,CAAC;EAC/BN,SAAS,EAAE;IACTO,QAAQ,EAAE,UAAU;IACpBC,IAAI,EAAE,CAAC;IACPC,KAAK,EAAE,CAAC;IACRC,MAAM,EAAE,CAAC;IACTC,MAAM,EAAE,CAAC;IACTC,MAAM,EAAE;EACV,CAAC;EACDX,YAAY,EAAE;IACZU,MAAM,EAAE;EACV;AACF,CAAC,CAAC","ignoreList":[]}

View File

@@ -0,0 +1,152 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
exports.getAdornmentConfig = getAdornmentConfig;
exports.getAdornmentStyleAdjustmentForNativeInput = getAdornmentStyleAdjustmentForNativeInput;
var _react = _interopRequireDefault(require("react"));
var _enums = require("./enums");
var _TextInputAffix = _interopRequireWildcard(require("./TextInputAffix"));
var _TextInputIcon = _interopRequireWildcard(require("./TextInputIcon"));
var _helpers = require("../helpers");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
function getAdornmentConfig({
left,
right
}) {
let adornmentConfig = [];
if (left || right) {
[{
side: _enums.AdornmentSide.Left,
adornment: left
}, {
side: _enums.AdornmentSide.Right,
adornment: right
}].forEach(({
side,
adornment
}) => {
if (adornment && /*#__PURE__*/_react.default.isValidElement(adornment)) {
let type;
if (adornment.type === _TextInputAffix.default) {
type = _enums.AdornmentType.Affix;
} else if (adornment.type === _TextInputIcon.default) {
type = _enums.AdornmentType.Icon;
}
adornmentConfig.push({
side,
type
});
}
});
}
return adornmentConfig;
}
function getAdornmentStyleAdjustmentForNativeInput({
adornmentConfig,
leftAffixWidth,
rightAffixWidth,
paddingHorizontal,
inputOffset = 0,
mode,
isV3
}) {
const {
OUTLINED_INPUT_OFFSET,
ADORNMENT_OFFSET
} = (0, _helpers.getConstants)(isV3);
if (adornmentConfig.length) {
const adornmentStyleAdjustmentForNativeInput = adornmentConfig.map(({
type,
side
}) => {
const isLeftSide = side === _enums.AdornmentSide.Left;
const inputModeAdornemntOffset = mode === _enums.InputMode.Outlined ? ADORNMENT_OFFSET + OUTLINED_INPUT_OFFSET : ADORNMENT_OFFSET;
const paddingKey = `padding${captalize(side)}`;
const affixWidth = isLeftSide ? leftAffixWidth : rightAffixWidth;
const padding = typeof paddingHorizontal === 'number' ? paddingHorizontal : inputModeAdornemntOffset;
const offset = affixWidth + padding;
const isAffix = type === _enums.AdornmentType.Affix;
const marginKey = `margin${captalize(side)}`;
return {
[marginKey]: isAffix ? 0 : offset,
[paddingKey]: isAffix ? offset : inputOffset
};
});
const allStyleAdjustmentsMerged = adornmentStyleAdjustmentForNativeInput.reduce((mergedStyles, currentStyle) => {
return {
...mergedStyles,
...currentStyle
};
}, {});
return allStyleAdjustmentsMerged;
} else {
return [{}];
}
}
const captalize = text => text.charAt(0).toUpperCase() + text.slice(1);
const TextInputAdornment = ({
adornmentConfig,
left,
right,
onAffixChange,
textStyle,
visible,
topPosition,
isTextInputFocused,
forceFocus,
paddingHorizontal,
maxFontSizeMultiplier,
theme,
disabled
}) => {
if (adornmentConfig.length) {
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, adornmentConfig.map(({
type,
side
}) => {
let inputAdornmentComponent;
if (side === _enums.AdornmentSide.Left) {
inputAdornmentComponent = left;
} else if (side === _enums.AdornmentSide.Right) {
inputAdornmentComponent = right;
}
const commonProps = {
side: side,
testID: `${side}-${type}-adornment`,
isTextInputFocused,
paddingHorizontal,
disabled
};
if (type === _enums.AdornmentType.Icon) {
return /*#__PURE__*/_react.default.createElement(_TextInputIcon.IconAdornment, _extends({}, commonProps, {
theme: theme,
key: side,
icon: inputAdornmentComponent,
topPosition: topPosition[_enums.AdornmentType.Icon],
forceFocus: forceFocus
}));
} else if (type === _enums.AdornmentType.Affix) {
return /*#__PURE__*/_react.default.createElement(_TextInputAffix.AffixAdornment, _extends({}, commonProps, {
key: side,
topPosition: topPosition[_enums.AdornmentType.Affix][side],
affix: inputAdornmentComponent,
textStyle: textStyle,
onLayout: onAffixChange[side],
visible: visible,
maxFontSizeMultiplier: maxFontSizeMultiplier
}));
} else {
return null;
}
}));
} else {
return null;
}
};
var _default = exports.default = TextInputAdornment;
//# sourceMappingURL=TextInputAdornment.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,139 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.TextInputAffix = exports.AffixAdornment = void 0;
var _react = _interopRequireDefault(require("react"));
var _reactNative = require("react-native");
var _enums = require("./enums");
var _utils = require("./utils");
var _theming = require("../../../core/theming");
var _helpers = require("../helpers");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const AffixContext = /*#__PURE__*/_react.default.createContext({
textStyle: {
fontFamily: '',
color: ''
},
topPosition: null,
side: _enums.AdornmentSide.Left
});
const AffixAdornment = ({
affix,
side,
textStyle,
topPosition,
onLayout,
visible,
paddingHorizontal,
maxFontSizeMultiplier,
testID,
disabled
}) => {
return /*#__PURE__*/_react.default.createElement(AffixContext.Provider, {
value: {
side,
textStyle,
topPosition,
onLayout,
visible,
paddingHorizontal,
maxFontSizeMultiplier,
testID,
disabled
}
}, affix);
};
/**
* A component to render a leading / trailing text in the TextInput
*
* ## Usage
* ```js
* import * as React from 'react';
* import { TextInput } from 'react-native-paper';
*
* const MyComponent = () => {
* const [text, setText] = React.useState('');
*
* return (
* <TextInput
* mode="outlined"
* label="Outlined input"
* placeholder="Type something"
* right={<TextInput.Affix text="/100" />}
* />
* );
* };
*
* export default MyComponent;
* ```
*/
exports.AffixAdornment = AffixAdornment;
const TextInputAffix = ({
text,
textStyle: labelStyle,
theme: themeOverrides,
onLayout: onTextLayout,
onPress,
accessibilityLabel = text
}) => {
const theme = (0, _theming.useInternalTheme)(themeOverrides);
const {
AFFIX_OFFSET
} = (0, _helpers.getConstants)(theme.isV3);
const {
textStyle,
onLayout,
topPosition,
side,
visible,
paddingHorizontal,
maxFontSizeMultiplier,
testID,
disabled
} = _react.default.useContext(AffixContext);
const offset = typeof paddingHorizontal === 'number' ? paddingHorizontal : AFFIX_OFFSET;
const style = {
top: topPosition,
[side]: offset
};
const textColor = (0, _utils.getTextColor)({
theme,
disabled
});
const content = /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
maxFontSizeMultiplier: maxFontSizeMultiplier,
style: [{
color: textColor
}, textStyle, labelStyle],
onLayout: onTextLayout,
testID: `${testID}-text`
}, text);
return /*#__PURE__*/_react.default.createElement(_reactNative.Animated.View, {
style: [styles.container, style, {
opacity: (visible === null || visible === void 0 ? void 0 : visible.interpolate({
inputRange: [0, 1],
outputRange: [1, 0]
})) || 1
}],
onLayout: onLayout,
testID: testID
}, onPress ? /*#__PURE__*/_react.default.createElement(_reactNative.Pressable, {
onPress: onPress,
accessibilityRole: "button",
accessibilityLabel: accessibilityLabel
}, content) : content);
};
exports.TextInputAffix = TextInputAffix;
TextInputAffix.displayName = 'TextInput.Affix';
const styles = _reactNative.StyleSheet.create({
container: {
position: 'absolute',
justifyContent: 'center',
alignItems: 'center'
}
});
var _default = exports.default = TextInputAffix; // @component-docs ignore-next-line
//# sourceMappingURL=TextInputAffix.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_enums","_utils","_theming","_helpers","e","__esModule","default","AffixContext","React","createContext","textStyle","fontFamily","color","topPosition","side","AdornmentSide","Left","AffixAdornment","affix","onLayout","visible","paddingHorizontal","maxFontSizeMultiplier","testID","disabled","createElement","Provider","value","exports","TextInputAffix","text","labelStyle","theme","themeOverrides","onTextLayout","onPress","accessibilityLabel","useInternalTheme","AFFIX_OFFSET","getConstants","isV3","useContext","offset","style","top","textColor","getTextColor","content","Text","Animated","View","styles","container","opacity","interpolate","inputRange","outputRange","Pressable","accessibilityRole","displayName","StyleSheet","create","position","justifyContent","alignItems","_default"],"sourceRoot":"../../../../../src","sources":["components/TextInput/Adornment/TextInputAffix.tsx"],"mappings":"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","ignoreList":[]}

View File

@@ -0,0 +1,134 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.IconAdornment = void 0;
var _react = _interopRequireDefault(require("react"));
var _reactNative = require("react-native");
var _utils = require("./utils");
var _theming = require("../../../core/theming");
var _IconButton = _interopRequireDefault(require("../../IconButton/IconButton"));
var _constants = require("../constants");
var _helpers = require("../helpers");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
const StyleContext = /*#__PURE__*/_react.default.createContext({
style: {},
isTextInputFocused: false,
forceFocus: () => {},
testID: ''
});
const IconAdornment = ({
icon,
topPosition,
side,
isTextInputFocused,
forceFocus,
testID,
theme: themeOverrides,
disabled
}) => {
const {
isV3
} = (0, _theming.useInternalTheme)(themeOverrides);
const {
ICON_OFFSET
} = (0, _helpers.getConstants)(isV3);
const style = {
top: topPosition,
[side]: ICON_OFFSET
};
const contextState = {
style,
isTextInputFocused,
forceFocus,
testID,
disabled
};
return /*#__PURE__*/_react.default.createElement(StyleContext.Provider, {
value: contextState
}, icon);
};
/**
* A component to render a leading / trailing icon in the TextInput
*
* ## Usage
* ```js
* import * as React from 'react';
* import { TextInput } from 'react-native-paper';
*
* const MyComponent = () => {
* const [text, setText] = React.useState('');
*
* return (
* <TextInput
* label="Password"
* secureTextEntry
* right={<TextInput.Icon icon="eye" />}
* />
* );
* };
*
* export default MyComponent;
* ```
*/
exports.IconAdornment = IconAdornment;
const TextInputIcon = ({
icon,
onPress,
forceTextInputFocus = true,
color: customColor,
theme: themeOverrides,
rippleColor,
...rest
}) => {
const {
style,
isTextInputFocused,
forceFocus,
testID,
disabled
} = _react.default.useContext(StyleContext);
const onPressWithFocusControl = _react.default.useCallback(e => {
if (forceTextInputFocus && !isTextInputFocused) {
forceFocus();
}
onPress === null || onPress === void 0 || onPress(e);
}, [forceTextInputFocus, forceFocus, isTextInputFocused, onPress]);
const theme = (0, _theming.useInternalTheme)(themeOverrides);
const iconColor = (0, _utils.getIconColor)({
theme,
disabled,
isTextInputFocused,
customColor
});
return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
style: [styles.container, style]
}, /*#__PURE__*/_react.default.createElement(_IconButton.default, _extends({
icon: icon,
style: styles.iconButton,
size: _constants.ICON_SIZE,
onPress: onPressWithFocusControl,
iconColor: iconColor,
testID: testID,
theme: themeOverrides,
rippleColor: rippleColor
}, rest)));
};
TextInputIcon.displayName = 'TextInput.Icon';
const styles = _reactNative.StyleSheet.create({
container: {
position: 'absolute',
width: _constants.ICON_SIZE,
height: _constants.ICON_SIZE,
justifyContent: 'center',
alignItems: 'center'
},
iconButton: {
margin: 0
}
});
var _default = exports.default = TextInputIcon; // @component-docs ignore-next-line
//# sourceMappingURL=TextInputIcon.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["_react","_interopRequireDefault","require","_reactNative","_utils","_theming","_IconButton","_constants","_helpers","e","__esModule","default","_extends","Object","assign","bind","n","arguments","length","t","r","hasOwnProperty","call","apply","StyleContext","React","createContext","style","isTextInputFocused","forceFocus","testID","IconAdornment","icon","topPosition","side","theme","themeOverrides","disabled","isV3","useInternalTheme","ICON_OFFSET","getConstants","top","contextState","createElement","Provider","value","exports","TextInputIcon","onPress","forceTextInputFocus","color","customColor","rippleColor","rest","useContext","onPressWithFocusControl","useCallback","iconColor","getIconColor","View","styles","container","iconButton","size","ICON_SIZE","displayName","StyleSheet","create","position","width","height","justifyContent","alignItems","margin","_default"],"sourceRoot":"../../../../../src","sources":["components/TextInput/Adornment/TextInputIcon.tsx"],"mappings":"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","ignoreList":[]}

View File

@@ -0,0 +1,22 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.InputMode = exports.AdornmentType = exports.AdornmentSide = void 0;
let AdornmentType = exports.AdornmentType = /*#__PURE__*/function (AdornmentType) {
AdornmentType["Icon"] = "icon";
AdornmentType["Affix"] = "affix";
return AdornmentType;
}({});
let AdornmentSide = exports.AdornmentSide = /*#__PURE__*/function (AdornmentSide) {
AdornmentSide["Right"] = "right";
AdornmentSide["Left"] = "left";
return AdornmentSide;
}({});
let InputMode = exports.InputMode = /*#__PURE__*/function (InputMode) {
InputMode["Outlined"] = "outlined";
InputMode["Flat"] = "flat";
return InputMode;
}({});
//# sourceMappingURL=enums.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["AdornmentType","exports","AdornmentSide","InputMode"],"sourceRoot":"../../../../../src","sources":["components/TextInput/Adornment/enums.tsx"],"mappings":";;;;;;IAAYA,aAAa,GAAAC,OAAA,CAAAD,aAAA,0BAAbA,aAAa;EAAbA,aAAa;EAAbA,aAAa;EAAA,OAAbA,aAAa;AAAA;AAAA,IAIbE,aAAa,GAAAD,OAAA,CAAAC,aAAA,0BAAbA,aAAa;EAAbA,aAAa;EAAbA,aAAa;EAAA,OAAbA,aAAa;AAAA;AAAA,IAIbC,SAAS,GAAAF,OAAA,CAAAE,SAAA,0BAATA,SAAS;EAATA,SAAS;EAATA,SAAS;EAAA,OAATA,SAAS;AAAA","ignoreList":[]}

View File

@@ -0,0 +1,6 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
//# sourceMappingURL=types.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":[],"sourceRoot":"../../../../../src","sources":["components/TextInput/Adornment/types.tsx"],"mappings":"","ignoreList":[]}

View File

@@ -0,0 +1,43 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.getIconColor = getIconColor;
exports.getTextColor = getTextColor;
var _color = _interopRequireDefault(require("color"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function getTextColor({
theme,
disabled
}) {
var _theme$colors;
if (theme.isV3) {
if (disabled) {
return theme.colors.onSurfaceDisabled;
}
return theme.colors.onSurfaceVariant;
}
return (0, _color.default)((_theme$colors = theme.colors) === null || _theme$colors === void 0 ? void 0 : _theme$colors.text).alpha(theme.dark ? 0.7 : 0.54).rgb().string();
}
function getIconColor({
theme,
isTextInputFocused,
disabled,
customColor
}) {
if (typeof customColor === 'function') {
return customColor(isTextInputFocused);
}
if (customColor) {
return customColor;
}
if (!theme.isV3) {
return theme.colors.text;
}
if (disabled) {
return theme.colors.onSurfaceDisabled;
}
return theme.colors.onSurfaceVariant;
}
//# sourceMappingURL=utils.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["_color","_interopRequireDefault","require","e","__esModule","default","getTextColor","theme","disabled","_theme$colors","isV3","colors","onSurfaceDisabled","onSurfaceVariant","color","text","alpha","dark","rgb","string","getIconColor","isTextInputFocused","customColor"],"sourceRoot":"../../../../../src","sources":["components/TextInput/Adornment/utils.ts"],"mappings":";;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AAA0B,SAAAD,uBAAAE,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AASnB,SAASG,YAAYA,CAAC;EAAEC,KAAK;EAAEC;AAAoB,CAAC,EAAE;EAAA,IAAAC,aAAA;EAC3D,IAAIF,KAAK,CAACG,IAAI,EAAE;IACd,IAAIF,QAAQ,EAAE;MACZ,OAAOD,KAAK,CAACI,MAAM,CAACC,iBAAiB;IACvC;IACA,OAAOL,KAAK,CAACI,MAAM,CAACE,gBAAgB;EACtC;EACA,OAAO,IAAAC,cAAK,GAAAL,aAAA,GAACF,KAAK,CAACI,MAAM,cAAAF,aAAA,uBAAZA,aAAA,CAAcM,IAAI,CAAC,CAC7BC,KAAK,CAACT,KAAK,CAACU,IAAI,GAAG,GAAG,GAAG,IAAI,CAAC,CAC9BC,GAAG,CAAC,CAAC,CACLC,MAAM,CAAC,CAAC;AACb;AAEO,SAASC,YAAYA,CAAC;EAC3Bb,KAAK;EACLc,kBAAkB;EAClBb,QAAQ;EACRc;AAIF,CAAC,EAAE;EACD,IAAI,OAAOA,WAAW,KAAK,UAAU,EAAE;IACrC,OAAOA,WAAW,CAACD,kBAAkB,CAAC;EACxC;EACA,IAAIC,WAAW,EAAE;IACf,OAAOA,WAAW;EACpB;EAEA,IAAI,CAACf,KAAK,CAACG,IAAI,EAAE;IACf,OAAOH,KAAK,CAACI,MAAM,CAACI,IAAI;EAC1B;EAEA,IAAIP,QAAQ,EAAE;IACZ,OAAOD,KAAK,CAACI,MAAM,CAACC,iBAAiB;EACvC;EAEA,OAAOL,KAAK,CAACI,MAAM,CAACE,gBAAgB;AACtC","ignoreList":[]}

View File

@@ -0,0 +1,170 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _reactNative = require("react-native");
var _AnimatedText = _interopRequireDefault(require("../../Typography/AnimatedText"));
var _helpers = require("../helpers");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const InputLabel = props => {
const {
labeled,
wiggle,
error,
focused,
opacity,
labelLayoutWidth,
labelLayoutHeight,
labelBackground,
label,
labelError,
onLayoutAnimatedText,
onLabelTextLayout,
hasActiveOutline,
activeColor,
placeholderStyle,
baseLabelTranslateX,
baseLabelTranslateY,
font,
fontSize,
lineHeight,
fontWeight,
placeholderOpacity,
wiggleOffsetX,
labelScale,
topPosition,
paddingLeft,
paddingRight,
backgroundColor,
roundness,
placeholderColor,
errorColor,
labelTranslationXOffset,
maxFontSizeMultiplier,
testID,
isV3,
inputContainerLayout,
scaledLabel
} = props;
const {
INPUT_PADDING_HORIZONTAL
} = (0, _helpers.getConstants)(isV3);
const {
width
} = (0, _reactNative.useWindowDimensions)();
const isWeb = _reactNative.Platform.OS === 'web';
const paddingOffset = paddingLeft && paddingRight ? {
paddingLeft,
paddingRight
} : {};
const labelTranslationX = {
transform: [{
// Offset label scale since RN doesn't support transform origin
translateX: labeled.interpolate({
inputRange: [0, 1],
outputRange: [baseLabelTranslateX, labelTranslationXOffset || 0]
})
}]
};
const labelStyle = {
...font,
fontSize,
lineHeight,
fontWeight,
opacity: labeled.interpolate({
inputRange: [0, 1],
outputRange: [hasActiveOutline ? 1 : 0, 0]
}),
transform: [{
// Wiggle the label when there's an error
translateX: wiggle ? error.interpolate({
inputRange: [0, 0.5, 1],
outputRange: [0, wiggleOffsetX, 0]
}) : 0
}, {
// Move label to top
translateY: baseLabelTranslateY !== 0 ? labeled.interpolate({
inputRange: [0, 1],
outputRange: [baseLabelTranslateY, 0]
}) : 0
}, {
// Make label smaller
scale: labelScale !== 0 ? labeled.interpolate({
inputRange: [0, 1],
outputRange: [labelScale, 1]
}) : labeled
}]
};
const labelWidth = (inputContainerLayout.width + INPUT_PADDING_HORIZONTAL / 2) / (scaledLabel ? labelScale : 1);
const commonStyles = [placeholderStyle, {
top: topPosition
}, {
maxWidth: labelWidth
}, labelStyle, paddingOffset || {}];
const textColor = labelError && errorColor ? errorColor : placeholderColor;
return (
/*#__PURE__*/
// Position colored placeholder and gray placeholder on top of each other and crossfade them
// This gives the effect of animating the color, but allows us to use native driver
_react.default.createElement(_reactNative.View, {
pointerEvents: "none",
style: [_reactNative.StyleSheet.absoluteFill, styles.overflow, styles.labelContainer]
}, /*#__PURE__*/_react.default.createElement(_reactNative.Animated.View, {
pointerEvents: "none",
style: [_reactNative.StyleSheet.absoluteFill, !isWeb && {
width
}, {
opacity
}, labelTranslationX]
}, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
style: {
width: labelWidth
}
}, labelBackground === null || labelBackground === void 0 ? void 0 : labelBackground({
labeled,
labelLayoutWidth,
labelLayoutHeight,
labelStyle,
placeholderStyle,
baseLabelTranslateX,
topPosition,
label,
backgroundColor,
roundness,
maxFontSizeMultiplier: maxFontSizeMultiplier,
testID
}), /*#__PURE__*/_react.default.createElement(_AnimatedText.default, {
variant: "bodySmall",
onLayout: onLayoutAnimatedText,
onTextLayout: onLabelTextLayout,
style: [commonStyles, {
color: activeColor
}],
numberOfLines: 1,
maxFontSizeMultiplier: maxFontSizeMultiplier,
testID: `${testID}-label-active`
}, label), /*#__PURE__*/_react.default.createElement(_AnimatedText.default, {
variant: focused ? 'bodyLarge' : 'bodySmall',
style: [commonStyles, {
color: textColor,
opacity: placeholderOpacity
}],
numberOfLines: 1,
maxFontSizeMultiplier: maxFontSizeMultiplier,
testID: `${testID}-label-inactive`
}, label))))
);
};
const styles = _reactNative.StyleSheet.create({
overflow: {
overflow: 'hidden'
},
labelContainer: {
zIndex: 3
}
});
var _default = exports.default = /*#__PURE__*/_react.default.memo(InputLabel);
//# sourceMappingURL=InputLabel.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,85 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var React = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
var _AnimatedText = _interopRequireDefault(require("../../Typography/AnimatedText"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
const LabelBackground = ({
labeled,
labelLayoutWidth,
labelLayoutHeight,
placeholderStyle,
baseLabelTranslateX,
topPosition,
backgroundColor,
roundness,
labelStyle,
maxFontSizeMultiplier,
testID
}) => {
const opacity = labeled.interpolate({
inputRange: [0, 0.6],
outputRange: [1, 0]
});
const labelTranslationX = {
translateX: labeled.interpolate({
inputRange: [0, 1],
outputRange: [-baseLabelTranslateX, 0]
})
};
const labelTextScaleY = {
scaleY: labeled.interpolate({
inputRange: [0, 1],
outputRange: [0.2, 1]
})
};
const labelTextTransform = [...labelStyle.transform, labelTextScaleY];
const isRounded = roundness > 6;
const roundedEdgeCover = isRounded ? /*#__PURE__*/React.createElement(_reactNative.Animated.View, {
key: "labelBackground-view",
pointerEvents: "none",
style: [_reactNative.StyleSheet.absoluteFill, styles.view, {
backgroundColor,
maxHeight: Math.max(roundness / 3, 2),
bottom: Math.max(roundness, 2),
transform: [labelTranslationX],
opacity
}]
}) : null;
return [roundedEdgeCover, /*#__PURE__*/React.createElement(_AnimatedText.default, {
key: "labelBackground-text",
testID: `${testID}-label-background`,
style: [placeholderStyle, labelStyle, styles.outlinedLabel, {
top: topPosition + 1,
width: labelLayoutWidth - placeholderStyle.paddingHorizontal,
height: labelLayoutHeight,
backgroundColor,
opacity,
transform: labelTextTransform
}],
numberOfLines: 1,
maxFontSizeMultiplier: maxFontSizeMultiplier
})];
};
var _default = exports.default = LabelBackground;
const styles = _reactNative.StyleSheet.create({
view: {
position: 'absolute',
top: 6,
left: 10,
width: 12
},
// eslint-disable-next-line react-native/no-color-literals
outlinedLabel: {
position: 'absolute',
left: 8,
paddingHorizontal: 0,
color: 'transparent'
}
});
//# sourceMappingURL=LabelBackground.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["React","_interopRequireWildcard","require","_reactNative","_AnimatedText","_interopRequireDefault","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","LabelBackground","labeled","labelLayoutWidth","labelLayoutHeight","placeholderStyle","baseLabelTranslateX","topPosition","backgroundColor","roundness","labelStyle","maxFontSizeMultiplier","testID","opacity","interpolate","inputRange","outputRange","labelTranslationX","translateX","labelTextScaleY","scaleY","labelTextTransform","transform","isRounded","roundedEdgeCover","createElement","Animated","View","key","pointerEvents","style","StyleSheet","absoluteFill","styles","view","maxHeight","Math","max","bottom","outlinedLabel","top","width","paddingHorizontal","height","numberOfLines","_default","exports","create","position","left","color"],"sourceRoot":"../../../../../src","sources":["components/TextInput/Label/LabelBackground.tsx"],"mappings":"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","ignoreList":[]}

View File

@@ -0,0 +1,364 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var React = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
var _TextInputAffix = _interopRequireDefault(require("./Adornment/TextInputAffix"));
var _TextInputIcon = _interopRequireDefault(require("./Adornment/TextInputIcon"));
var _TextInputFlat = _interopRequireDefault(require("./TextInputFlat"));
var _TextInputOutlined = _interopRequireDefault(require("./TextInputOutlined"));
var _theming = require("../../core/theming");
var _forwardRef = require("../../utils/forwardRef");
var _roundLayoutSize = require("../../utils/roundLayoutSize");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
const BLUR_ANIMATION_DURATION = 180;
const FOCUS_ANIMATION_DURATION = 150;
const DefaultRenderer = props => /*#__PURE__*/React.createElement(_reactNative.TextInput, props);
/**
* A component to allow users to input text.
*
* ## Usage
* ```js
* import * as React from 'react';
* import { TextInput } from 'react-native-paper';
*
* const MyComponent = () => {
* const [text, setText] = React.useState("");
*
* return (
* <TextInput
* label="Email"
* value={text}
* onChangeText={text => setText(text)}
* />
* );
* };
*
* export default MyComponent;
* ```
*
* @extends TextInput props https://reactnative.dev/docs/textinput#props
*/
const TextInput = (0, _forwardRef.forwardRef)(({
mode = 'flat',
dense = false,
disabled = false,
error: errorProp = false,
multiline = false,
editable = true,
contentStyle,
render = DefaultRenderer,
theme: themeOverrides,
...rest
}, ref) => {
const theme = (0, _theming.useInternalTheme)(themeOverrides);
const isControlled = rest.value !== undefined;
const validInputValue = isControlled ? rest.value : rest.defaultValue;
const {
current: labeled
} = React.useRef(new _reactNative.Animated.Value(validInputValue ? 0 : 1));
const {
current: error
} = React.useRef(new _reactNative.Animated.Value(errorProp ? 1 : 0));
const [focused, setFocused] = React.useState(false);
const [displayPlaceholder, setDisplayPlaceholder] = React.useState(false);
const [uncontrolledValue, setUncontrolledValue] = React.useState(validInputValue);
// Use value from props instead of local state when input is controlled
const value = isControlled ? rest.value : uncontrolledValue;
const [labelTextLayout, setLabelTextLayout] = React.useState({
width: 33
});
const [inputContainerLayout, setInputContainerLayout] = React.useState({
width: 65
});
const [labelLayout, setLabelLayout] = React.useState({
measured: false,
width: 0,
height: 0
});
const [leftLayout, setLeftLayout] = React.useState({
width: null,
height: null
});
const [rightLayout, setRightLayout] = React.useState({
width: null,
height: null
});
const timer = React.useRef(undefined);
const root = React.useRef(null);
const {
scale
} = theme.animation;
React.useImperativeHandle(ref, () => ({
focus: () => {
var _root$current;
return (_root$current = root.current) === null || _root$current === void 0 ? void 0 : _root$current.focus();
},
clear: () => {
var _root$current2;
return (_root$current2 = root.current) === null || _root$current2 === void 0 ? void 0 : _root$current2.clear();
},
setNativeProps: args => {
var _root$current3;
return (_root$current3 = root.current) === null || _root$current3 === void 0 ? void 0 : _root$current3.setNativeProps(args);
},
isFocused: () => {
var _root$current4;
return ((_root$current4 = root.current) === null || _root$current4 === void 0 ? void 0 : _root$current4.isFocused()) || false;
},
blur: () => {
var _root$current5;
return (_root$current5 = root.current) === null || _root$current5 === void 0 ? void 0 : _root$current5.blur();
},
forceFocus: () => {
var _root$current6;
return (_root$current6 = root.current) === null || _root$current6 === void 0 ? void 0 : _root$current6.focus();
},
setSelection: (start, end) => {
var _root$current7;
return (_root$current7 = root.current) === null || _root$current7 === void 0 ? void 0 : _root$current7.setSelection(start, end);
}
}));
React.useEffect(() => {
// When the input has an error, we wiggle the label and apply error styles
if (errorProp) {
// show error
_reactNative.Animated.timing(error, {
toValue: 1,
duration: FOCUS_ANIMATION_DURATION * scale,
// To prevent this - https://github.com/callstack/react-native-paper/issues/941
useNativeDriver: true
}).start();
} else {
// hide error
{
_reactNative.Animated.timing(error, {
toValue: 0,
duration: BLUR_ANIMATION_DURATION * scale,
// To prevent this - https://github.com/callstack/react-native-paper/issues/941
useNativeDriver: true
}).start();
}
}
}, [errorProp, scale, error]);
React.useEffect(() => {
// Show placeholder text only if the input is focused, or there's no label
// We don't show placeholder if there's a label because the label acts as placeholder
// When focused, the label moves up, so we can show a placeholder
if (focused || !rest.label) {
// If the user wants to use the contextMenu, when changing the placeholder, the contextMenu is closed
// This is a workaround to mitigate this behavior in scenarios where the placeholder is not specified.
if (rest.placeholder) {
// Display placeholder in a delay to offset the label animation
// If we show it immediately, they'll overlap and look ugly
timer.current = setTimeout(() => setDisplayPlaceholder(true), 50);
}
} else {
// hidePlaceholder
setDisplayPlaceholder(false);
}
return () => {
if (timer.current) {
clearTimeout(timer.current);
}
};
}, [focused, rest.label, rest.placeholder]);
React.useEffect(() => {
labeled.stopAnimation();
// The label should be minimized if the text input is focused, or has text
// In minimized mode, the label moves up and becomes small
// workaround for animated regression for react native > 0.61
// https://github.com/callstack/react-native-paper/pull/1440
if (value || focused) {
// minimize label
_reactNative.Animated.timing(labeled, {
toValue: 0,
duration: BLUR_ANIMATION_DURATION * scale,
// To prevent this - https://github.com/callstack/react-native-paper/issues/941
useNativeDriver: true
}).start();
} else {
// restore label
_reactNative.Animated.timing(labeled, {
toValue: 1,
duration: FOCUS_ANIMATION_DURATION * scale,
// To prevent this - https://github.com/callstack/react-native-paper/issues/941
useNativeDriver: true
}).start();
}
}, [focused, value, labeled, scale]);
const onLeftAffixLayoutChange = React.useCallback(event => {
const height = (0, _roundLayoutSize.roundLayoutSize)(event.nativeEvent.layout.height);
const width = (0, _roundLayoutSize.roundLayoutSize)(event.nativeEvent.layout.width);
if (width !== leftLayout.width || height !== leftLayout.height) {
setLeftLayout({
width,
height
});
}
}, [leftLayout.height, leftLayout.width]);
const onRightAffixLayoutChange = React.useCallback(event => {
const width = (0, _roundLayoutSize.roundLayoutSize)(event.nativeEvent.layout.width);
const height = (0, _roundLayoutSize.roundLayoutSize)(event.nativeEvent.layout.height);
if (width !== rightLayout.width || height !== rightLayout.height) {
setRightLayout({
width,
height
});
}
}, [rightLayout.height, rightLayout.width]);
const handleFocus = args => {
var _rest$onFocus;
if (disabled || !editable) {
return;
}
setFocused(true);
(_rest$onFocus = rest.onFocus) === null || _rest$onFocus === void 0 || _rest$onFocus.call(rest, args);
};
const handleBlur = args => {
var _rest$onBlur;
if (!editable) {
return;
}
setFocused(false);
(_rest$onBlur = rest.onBlur) === null || _rest$onBlur === void 0 || _rest$onBlur.call(rest, args);
};
const handleChangeText = value => {
var _rest$onChangeText;
if (!editable || disabled) {
return;
}
if (!isControlled) {
// Keep track of value in local state when input is not controlled
setUncontrolledValue(value);
}
(_rest$onChangeText = rest.onChangeText) === null || _rest$onChangeText === void 0 || _rest$onChangeText.call(rest, value);
};
const handleLayoutAnimatedText = React.useCallback(e => {
const width = (0, _roundLayoutSize.roundLayoutSize)(e.nativeEvent.layout.width);
const height = (0, _roundLayoutSize.roundLayoutSize)(e.nativeEvent.layout.height);
if (width !== labelLayout.width || height !== labelLayout.height) {
setLabelLayout({
width,
height,
measured: true
});
}
}, [labelLayout.height, labelLayout.width]);
const handleLabelTextLayout = React.useCallback(({
nativeEvent
}) => {
setLabelTextLayout({
width: nativeEvent.lines.reduce((acc, line) => acc + Math.ceil(line.width), 0)
});
}, []);
const handleInputContainerLayout = React.useCallback(({
nativeEvent: {
layout
}
}) => {
setInputContainerLayout({
width: layout.width
});
}, []);
const forceFocus = React.useCallback(() => {
var _root$current8;
return (_root$current8 = root.current) === null || _root$current8 === void 0 ? void 0 : _root$current8.focus();
}, []);
const {
maxFontSizeMultiplier = 1.5
} = rest;
const scaledLabel = !!(value || focused);
if (mode === 'outlined') {
return /*#__PURE__*/React.createElement(_TextInputOutlined.default, _extends({
dense: dense,
disabled: disabled,
error: errorProp,
multiline: multiline,
editable: editable,
render: render
}, rest, {
theme: theme,
value: value,
parentState: {
labeled,
error,
focused,
displayPlaceholder,
value,
labelTextLayout,
labelLayout,
leftLayout,
rightLayout,
inputContainerLayout
},
innerRef: ref => {
root.current = ref;
},
onFocus: handleFocus,
forceFocus: forceFocus,
onBlur: handleBlur,
onChangeText: handleChangeText,
onLayoutAnimatedText: handleLayoutAnimatedText,
onInputLayout: handleInputContainerLayout,
onLabelTextLayout: handleLabelTextLayout,
onLeftAffixLayoutChange: onLeftAffixLayoutChange,
onRightAffixLayoutChange: onRightAffixLayoutChange,
maxFontSizeMultiplier: maxFontSizeMultiplier,
contentStyle: contentStyle,
scaledLabel: scaledLabel
}));
}
return /*#__PURE__*/React.createElement(_TextInputFlat.default, _extends({
dense: dense,
disabled: disabled,
error: errorProp,
multiline: multiline,
editable: editable,
render: render
}, rest, {
theme: theme,
value: value,
parentState: {
labeled,
error,
focused,
displayPlaceholder,
value,
labelTextLayout,
labelLayout,
leftLayout,
rightLayout,
inputContainerLayout
},
innerRef: ref => {
root.current = ref;
},
onFocus: handleFocus,
forceFocus: forceFocus,
onBlur: handleBlur,
onInputLayout: handleInputContainerLayout,
onChangeText: handleChangeText,
onLayoutAnimatedText: handleLayoutAnimatedText,
onLabelTextLayout: handleLabelTextLayout,
onLeftAffixLayoutChange: onLeftAffixLayoutChange,
onRightAffixLayoutChange: onRightAffixLayoutChange,
maxFontSizeMultiplier: maxFontSizeMultiplier,
contentStyle: contentStyle,
scaledLabel: scaledLabel
}));
});
// @component ./Adornment/TextInputIcon.tsx
TextInput.Icon = _TextInputIcon.default;
// @component ./Adornment/TextInputAffix.tsx
// @ts-ignore Types of property 'theme' are incompatible.
TextInput.Affix = _TextInputAffix.default;
var _default = exports.default = TextInput;
//# sourceMappingURL=TextInput.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,354 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var React = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
var _Underline = require("./Addons/Underline");
var _enums = require("./Adornment/enums");
var _TextInputAdornment = _interopRequireWildcard(require("./Adornment/TextInputAdornment"));
var _constants = require("./constants");
var _helpers = require("./helpers");
var _InputLabel = _interopRequireDefault(require("./Label/InputLabel"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
const TextInputFlat = ({
disabled = false,
editable = true,
label,
error = false,
selectionColor: customSelectionColor,
cursorColor,
underlineColor,
underlineStyle,
activeUnderlineColor,
textColor,
dense,
style,
theme,
render = props => /*#__PURE__*/React.createElement(_reactNative.TextInput, props),
multiline = false,
parentState,
innerRef,
onFocus,
forceFocus,
onBlur,
onChangeText,
onLayoutAnimatedText,
onLabelTextLayout,
onLeftAffixLayoutChange,
onRightAffixLayoutChange,
onInputLayout,
left,
right,
placeholderTextColor,
testID = 'text-input-flat',
contentStyle,
scaledLabel,
...rest
}) => {
const isAndroid = _reactNative.Platform.OS === 'android';
const {
colors,
isV3,
roundness
} = theme;
const font = isV3 ? theme.fonts.bodyLarge : theme.fonts.regular;
const hasActiveOutline = parentState.focused || error;
const {
LABEL_PADDING_TOP,
FLAT_INPUT_OFFSET,
MIN_HEIGHT,
MIN_WIDTH
} = (0, _helpers.getConstants)(isV3);
const {
fontSize: fontSizeStyle,
lineHeight: lineHeightStyle,
fontWeight,
height,
paddingHorizontal,
textAlign,
...viewStyle
} = _reactNative.StyleSheet.flatten(style) || {};
const fontSize = fontSizeStyle || _constants.MAXIMIZED_LABEL_FONT_SIZE;
const lineHeight = lineHeightStyle || (_reactNative.Platform.OS === 'web' ? fontSize * 1.2 : undefined);
const isPaddingHorizontalPassed = paddingHorizontal !== undefined && typeof paddingHorizontal === 'number';
const adornmentConfig = (0, _TextInputAdornment.getAdornmentConfig)({
left,
right
});
let {
paddingLeft,
paddingRight
} = (0, _helpers.calculateFlatInputHorizontalPadding)({
adornmentConfig,
isV3
});
if (isPaddingHorizontalPassed) {
paddingLeft = paddingHorizontal;
paddingRight = paddingHorizontal;
}
const {
leftLayout,
rightLayout
} = parentState;
const rightAffixWidth = right ? rightLayout.width || _constants.ADORNMENT_SIZE : _constants.ADORNMENT_SIZE;
const leftAffixWidth = left ? leftLayout.width || _constants.ADORNMENT_SIZE : _constants.ADORNMENT_SIZE;
const adornmentStyleAdjustmentForNativeInput = (0, _TextInputAdornment.getAdornmentStyleAdjustmentForNativeInput)({
adornmentConfig,
rightAffixWidth,
leftAffixWidth,
paddingHorizontal,
inputOffset: FLAT_INPUT_OFFSET,
mode: _enums.InputMode.Flat,
isV3
});
const {
inputTextColor,
activeColor,
underlineColorCustom,
placeholderColor,
errorColor,
backgroundColor,
selectionColor
} = (0, _helpers.getFlatInputColors)({
underlineColor,
activeUnderlineColor,
customSelectionColor,
textColor,
disabled,
error,
theme
});
const containerStyle = {
backgroundColor,
borderTopLeftRadius: theme.roundness,
borderTopRightRadius: theme.roundness
};
const labelScale = _constants.MINIMIZED_LABEL_FONT_SIZE / fontSize;
const fontScale = _constants.MAXIMIZED_LABEL_FONT_SIZE / fontSize;
const labelWidth = parentState.labelLayout.width;
const labelHeight = parentState.labelLayout.height;
const labelHalfWidth = labelWidth / 2;
const labelHalfHeight = labelHeight / 2;
const baseLabelTranslateX = (_reactNative.I18nManager.getConstants().isRTL ? 1 : -1) * (labelHalfWidth - labelScale * labelWidth / 2) + (1 - labelScale) * (_reactNative.I18nManager.getConstants().isRTL ? -1 : 1) * paddingLeft;
const minInputHeight = dense ? (label ? _constants.MIN_DENSE_HEIGHT_WL : _constants.MIN_DENSE_HEIGHT) - _constants.LABEL_PADDING_TOP_DENSE : MIN_HEIGHT - LABEL_PADDING_TOP;
const inputHeight = (0, _helpers.calculateInputHeight)(labelHeight, height, minInputHeight);
const topPosition = (0, _helpers.calculateLabelTopPosition)(labelHeight, inputHeight, multiline && height ? 0 : !height ? minInputHeight / 2 : 0);
if (height && typeof height !== 'number') {
// eslint-disable-next-line
console.warn('Currently we support only numbers in height prop');
}
const paddingSettings = {
height: height ? +height : null,
labelHalfHeight,
offset: FLAT_INPUT_OFFSET,
multiline: multiline ? multiline : null,
dense: dense ? dense : null,
topPosition,
fontSize,
lineHeight,
label,
scale: fontScale,
isAndroid,
styles: _reactNative.StyleSheet.flatten(dense ? styles.inputFlatDense : styles.inputFlat)
};
const pad = (0, _helpers.calculatePadding)(paddingSettings);
const paddingFlat = (0, _helpers.adjustPaddingFlat)({
...paddingSettings,
pad
});
const baseLabelTranslateY = -labelHalfHeight - (topPosition + _constants.MINIMIZED_LABEL_Y_OFFSET);
const {
current: placeholderOpacityAnims
} = React.useRef([new _reactNative.Animated.Value(0), new _reactNative.Animated.Value(1)]);
const placeholderOpacity = hasActiveOutline ? parentState.labeled : placeholderOpacityAnims[parentState.labelLayout.measured ? 1 : 0];
// We don't want to show placeholder if label is displayed, because they overlap.
// Before it was done by setting placeholder's value to " ", but inputs have the same props
// what causes broken styles due to: https://github.com/facebook/react-native/issues/48249
const placeholderTextColorBasedOnState = parentState.displayPlaceholder ? placeholderTextColor ?? placeholderColor : 'transparent';
const minHeight = height || (dense ? label ? _constants.MIN_DENSE_HEIGHT_WL : _constants.MIN_DENSE_HEIGHT : MIN_HEIGHT);
const flatHeight = inputHeight + (!height ? dense ? _constants.LABEL_PADDING_TOP_DENSE : LABEL_PADDING_TOP : 0);
const iconTopPosition = (flatHeight - _constants.ADORNMENT_SIZE) / 2;
const leftAffixTopPosition = leftLayout.height ? (0, _helpers.calculateFlatAffixTopPosition)({
height: flatHeight,
...paddingFlat,
affixHeight: leftLayout.height
}) : null;
const rightAffixTopPosition = rightLayout.height ? (0, _helpers.calculateFlatAffixTopPosition)({
height: flatHeight,
...paddingFlat,
affixHeight: rightLayout.height
}) : null;
const labelProps = {
label,
onLayoutAnimatedText,
onLabelTextLayout,
placeholderOpacity,
labelError: error,
placeholderStyle: styles.placeholder,
baseLabelTranslateY,
baseLabelTranslateX,
font,
fontSize,
lineHeight,
fontWeight,
labelScale,
wiggleOffsetX: _constants.LABEL_WIGGLE_X_OFFSET,
topPosition,
paddingLeft: isAndroid ? _reactNative.I18nManager.isRTL ? paddingRight : paddingLeft : paddingLeft,
paddingRight: isAndroid ? _reactNative.I18nManager.isRTL ? paddingLeft : paddingRight : paddingRight,
hasActiveOutline,
activeColor,
placeholderColor,
errorColor,
roundness,
maxFontSizeMultiplier: rest.maxFontSizeMultiplier,
testID,
contentStyle,
inputContainerLayout: parentState.inputContainerLayout,
labelTextLayout: parentState.labelTextLayout,
opacity: parentState.value || parentState.focused ? parentState.labelLayout.measured ? 1 : 0 : 1,
isV3
};
const affixTopPosition = {
[_enums.AdornmentSide.Left]: leftAffixTopPosition,
[_enums.AdornmentSide.Right]: rightAffixTopPosition
};
const onAffixChange = {
[_enums.AdornmentSide.Left]: onLeftAffixLayoutChange,
[_enums.AdornmentSide.Right]: onRightAffixLayoutChange
};
let adornmentProps = {
paddingHorizontal,
adornmentConfig,
forceFocus,
topPosition: {
[_enums.AdornmentType.Affix]: affixTopPosition,
[_enums.AdornmentType.Icon]: iconTopPosition
},
onAffixChange,
isTextInputFocused: parentState.focused,
maxFontSizeMultiplier: rest.maxFontSizeMultiplier,
disabled
};
if (adornmentConfig.length) {
adornmentProps = {
...adornmentProps,
left,
right,
textStyle: {
...font,
fontSize,
lineHeight,
fontWeight
},
visible: parentState.labeled
};
}
return /*#__PURE__*/React.createElement(_reactNative.View, {
style: [containerStyle, viewStyle]
}, /*#__PURE__*/React.createElement(_Underline.Underline, {
style: underlineStyle,
hasActiveOutline: hasActiveOutline,
parentState: parentState,
underlineColorCustom: underlineColorCustom,
error: error,
colors: colors,
activeColor: activeColor,
theme: theme
}), /*#__PURE__*/React.createElement(_reactNative.View, {
onLayout: onInputLayout,
style: [styles.labelContainer, {
minHeight
}]
}, !isAndroid && multiline && !!label && !disabled &&
/*#__PURE__*/
// Workaround for: https://github.com/callstack/react-native-paper/issues/2799
// Patch for a multiline TextInput with fixed height, which allow to avoid covering input label with its value.
React.createElement(_reactNative.View, {
testID: "patch-container",
pointerEvents: "none",
style: [_reactNative.StyleSheet.absoluteFill, dense ? styles.densePatchContainer : styles.patchContainer, {
backgroundColor: viewStyle.backgroundColor || containerStyle.backgroundColor,
left: paddingLeft,
right: paddingRight
}]
}), label ? /*#__PURE__*/React.createElement(_InputLabel.default, _extends({
labeled: parentState.labeled,
error: parentState.error,
focused: parentState.focused,
scaledLabel: scaledLabel,
wiggle: Boolean(parentState.value && labelProps.labelError),
labelLayoutMeasured: parentState.labelLayout.measured,
labelLayoutWidth: parentState.labelLayout.width,
labelLayoutHeight: parentState.labelLayout.height
}, labelProps)) : null, render === null || render === void 0 ? void 0 : render({
...rest,
ref: innerRef,
onChangeText,
placeholder: rest.placeholder,
editable: !disabled && editable,
selectionColor,
cursorColor: typeof cursorColor === 'undefined' ? activeColor : cursorColor,
placeholderTextColor: placeholderTextColorBasedOnState,
onFocus,
onBlur,
underlineColorAndroid: 'transparent',
multiline,
style: [styles.input, multiline && height ? {
height: flatHeight
} : {}, paddingFlat, {
paddingLeft,
paddingRight,
...font,
fontSize,
lineHeight,
fontWeight,
color: inputTextColor,
textAlignVertical: multiline ? 'top' : 'center',
textAlign: textAlign ? textAlign : _reactNative.I18nManager.getConstants().isRTL ? 'right' : 'left',
minWidth: Math.min(parentState.labelTextLayout.width + 2 * FLAT_INPUT_OFFSET, MIN_WIDTH)
}, _reactNative.Platform.OS === 'web' ? {
outline: 'none'
} : undefined, adornmentStyleAdjustmentForNativeInput, contentStyle],
testID
})), /*#__PURE__*/React.createElement(_TextInputAdornment.default, adornmentProps));
};
var _default = exports.default = TextInputFlat;
const styles = _reactNative.StyleSheet.create({
placeholder: {
position: 'absolute',
left: 0
},
labelContainer: {
paddingTop: 0,
paddingBottom: 0,
flexGrow: 1
},
input: {
margin: 0,
flexGrow: 1
},
inputFlat: {
paddingTop: 24,
paddingBottom: 4
},
inputFlatDense: {
paddingTop: 22,
paddingBottom: 2
},
patchContainer: {
height: 24,
zIndex: 2
},
densePatchContainer: {
height: 22,
zIndex: 2
}
});
//# sourceMappingURL=TextInputFlat.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,340 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var React = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
var _Outline = require("./Addons/Outline");
var _enums = require("./Adornment/enums");
var _TextInputAdornment = _interopRequireWildcard(require("./Adornment/TextInputAdornment"));
var _constants = require("./constants");
var _helpers = require("./helpers");
var _InputLabel = _interopRequireDefault(require("./Label/InputLabel"));
var _LabelBackground = _interopRequireDefault(require("./Label/LabelBackground"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
const TextInputOutlined = ({
disabled = false,
editable = true,
label,
error = false,
selectionColor: customSelectionColor,
cursorColor,
underlineColor: _underlineColor,
outlineColor: customOutlineColor,
activeOutlineColor,
outlineStyle,
textColor,
dense,
style,
theme,
render = props => /*#__PURE__*/React.createElement(_reactNative.TextInput, props),
multiline = false,
parentState,
innerRef,
onFocus,
forceFocus,
onBlur,
onChangeText,
onLayoutAnimatedText,
onLabelTextLayout,
onLeftAffixLayoutChange,
onRightAffixLayoutChange,
onInputLayout,
onLayout,
left,
right,
placeholderTextColor,
testID = 'text-input-outlined',
contentStyle,
scaledLabel,
...rest
}) => {
const adornmentConfig = (0, _TextInputAdornment.getAdornmentConfig)({
left,
right
});
const {
colors,
isV3,
roundness
} = theme;
const font = isV3 ? theme.fonts.bodyLarge : theme.fonts.regular;
const hasActiveOutline = parentState.focused || error;
const {
INPUT_PADDING_HORIZONTAL,
MIN_HEIGHT,
ADORNMENT_OFFSET,
MIN_WIDTH
} = (0, _helpers.getConstants)(isV3);
const {
fontSize: fontSizeStyle,
fontWeight,
lineHeight: lineHeightStyle,
height,
backgroundColor = colors === null || colors === void 0 ? void 0 : colors.background,
textAlign,
...viewStyle
} = _reactNative.StyleSheet.flatten(style) || {};
const fontSize = fontSizeStyle || _constants.MAXIMIZED_LABEL_FONT_SIZE;
const lineHeight = lineHeightStyle || (_reactNative.Platform.OS === 'web' ? fontSize * 1.2 : undefined);
const {
inputTextColor,
activeColor,
outlineColor,
placeholderColor,
errorColor,
selectionColor
} = (0, _helpers.getOutlinedInputColors)({
activeOutlineColor,
customOutlineColor,
customSelectionColor,
textColor,
disabled,
error,
theme
});
const densePaddingTop = label ? _constants.LABEL_PADDING_TOP_DENSE : 0;
const paddingTop = label ? _constants.LABEL_PADDING_TOP : 0;
const yOffset = label ? _constants.OUTLINE_MINIMIZED_LABEL_Y_OFFSET : 0;
const labelScale = _constants.MINIMIZED_LABEL_FONT_SIZE / fontSize;
const fontScale = _constants.MAXIMIZED_LABEL_FONT_SIZE / fontSize;
const labelWidth = parentState.labelLayout.width;
const labelHeight = parentState.labelLayout.height;
const labelHalfWidth = labelWidth / 2;
const labelHalfHeight = labelHeight / 2;
const baseLabelTranslateX = (_reactNative.I18nManager.getConstants().isRTL ? 1 : -1) * (labelHalfWidth - labelScale * labelWidth / 2 - (fontSize - _constants.MINIMIZED_LABEL_FONT_SIZE) * labelScale);
let labelTranslationXOffset = 0;
const isAdornmentLeftIcon = adornmentConfig.some(({
side,
type
}) => side === _enums.AdornmentSide.Left && type === _enums.AdornmentType.Icon);
const isAdornmentRightIcon = adornmentConfig.some(({
side,
type
}) => side === _enums.AdornmentSide.Right && type === _enums.AdornmentType.Icon);
if (isAdornmentLeftIcon) {
labelTranslationXOffset = (_reactNative.I18nManager.getConstants().isRTL ? -1 : 1) * (_constants.ADORNMENT_SIZE + ADORNMENT_OFFSET - (isV3 ? 0 : 8));
}
const minInputHeight = (dense ? _constants.MIN_DENSE_HEIGHT_OUTLINED : MIN_HEIGHT) - paddingTop;
const inputHeight = (0, _helpers.calculateInputHeight)(labelHeight, height, minInputHeight);
const topPosition = (0, _helpers.calculateLabelTopPosition)(labelHeight, inputHeight, paddingTop);
if (height && typeof height !== 'number') {
// eslint-disable-next-line
console.warn('Currently we support only numbers in height prop');
}
const paddingSettings = {
height: height ? +height : null,
labelHalfHeight,
offset: paddingTop,
multiline: multiline ? multiline : null,
dense: dense ? dense : null,
topPosition,
fontSize,
lineHeight,
label,
scale: fontScale,
isAndroid: _reactNative.Platform.OS === 'android',
styles: _reactNative.StyleSheet.flatten(dense ? styles.inputOutlinedDense : styles.inputOutlined)
};
const pad = (0, _helpers.calculatePadding)(paddingSettings);
const paddingOut = (0, _helpers.adjustPaddingOut)({
...paddingSettings,
pad
});
const baseLabelTranslateY = -labelHalfHeight - (topPosition + yOffset);
const {
current: placeholderOpacityAnims
} = React.useRef([new _reactNative.Animated.Value(0), new _reactNative.Animated.Value(1)]);
const placeholderOpacity = hasActiveOutline ? parentState.labeled : placeholderOpacityAnims[parentState.labelLayout.measured ? 1 : 0];
const placeholderStyle = {
position: 'absolute',
left: 0,
paddingHorizontal: INPUT_PADDING_HORIZONTAL
};
const placeholderTextColorBasedOnState = parentState.displayPlaceholder ? placeholderTextColor ?? placeholderColor : 'transparent';
const labelBackgroundColor = backgroundColor === 'transparent' ? theme.colors.background : backgroundColor;
const labelProps = {
label,
onLayoutAnimatedText,
onLabelTextLayout,
placeholderOpacity,
labelError: error,
placeholderStyle,
baseLabelTranslateY,
baseLabelTranslateX,
font,
fontSize,
lineHeight,
fontWeight,
labelScale,
wiggleOffsetX: _constants.LABEL_WIGGLE_X_OFFSET,
topPosition,
hasActiveOutline,
activeColor,
placeholderColor,
backgroundColor: labelBackgroundColor,
errorColor,
labelTranslationXOffset,
roundness,
maxFontSizeMultiplier: rest.maxFontSizeMultiplier,
testID,
contentStyle,
inputContainerLayout: {
width: parentState.inputContainerLayout.width + (isAdornmentRightIcon || isAdornmentLeftIcon ? INPUT_PADDING_HORIZONTAL : 0)
},
opacity: parentState.value || parentState.focused ? parentState.labelLayout.measured ? 1 : 0 : 1,
isV3
};
const onLayoutChange = React.useCallback(e => {
onInputLayout(e);
onLayout === null || onLayout === void 0 || onLayout(e);
}, [onLayout, onInputLayout]);
const minHeight = height || (dense ? _constants.MIN_DENSE_HEIGHT_OUTLINED : MIN_HEIGHT);
const outlinedHeight = inputHeight + (dense ? densePaddingTop / 2 : paddingTop);
const {
leftLayout,
rightLayout
} = parentState;
const leftAffixTopPosition = (0, _helpers.calculateOutlinedIconAndAffixTopPosition)({
height: outlinedHeight,
affixHeight: leftLayout.height || 0,
labelYOffset: -yOffset
});
const rightAffixTopPosition = (0, _helpers.calculateOutlinedIconAndAffixTopPosition)({
height: outlinedHeight,
affixHeight: rightLayout.height || 0,
labelYOffset: -yOffset
});
const iconTopPosition = (0, _helpers.calculateOutlinedIconAndAffixTopPosition)({
height: outlinedHeight,
affixHeight: _constants.ADORNMENT_SIZE,
labelYOffset: -yOffset
});
const rightAffixWidth = right ? rightLayout.width || _constants.ADORNMENT_SIZE : _constants.ADORNMENT_SIZE;
const leftAffixWidth = left ? leftLayout.width || _constants.ADORNMENT_SIZE : _constants.ADORNMENT_SIZE;
const adornmentStyleAdjustmentForNativeInput = (0, _TextInputAdornment.getAdornmentStyleAdjustmentForNativeInput)({
adornmentConfig,
rightAffixWidth,
leftAffixWidth,
mode: 'outlined',
isV3
});
const affixTopPosition = {
[_enums.AdornmentSide.Left]: leftAffixTopPosition,
[_enums.AdornmentSide.Right]: rightAffixTopPosition
};
const onAffixChange = {
[_enums.AdornmentSide.Left]: onLeftAffixLayoutChange,
[_enums.AdornmentSide.Right]: onRightAffixLayoutChange
};
let adornmentProps = {
adornmentConfig,
forceFocus,
topPosition: {
[_enums.AdornmentType.Icon]: iconTopPosition,
[_enums.AdornmentType.Affix]: affixTopPosition
},
onAffixChange,
isTextInputFocused: parentState.focused,
maxFontSizeMultiplier: rest.maxFontSizeMultiplier,
disabled
};
if (adornmentConfig.length) {
adornmentProps = {
...adornmentProps,
left,
right,
textStyle: {
...font,
fontSize,
lineHeight,
fontWeight
},
visible: parentState.labeled
};
}
return /*#__PURE__*/React.createElement(_reactNative.View, {
style: viewStyle
}, /*#__PURE__*/React.createElement(_Outline.Outline, {
isV3: isV3,
style: outlineStyle,
label: label,
roundness: roundness,
hasActiveOutline: hasActiveOutline,
focused: parentState.focused,
activeColor: activeColor,
outlineColor: outlineColor,
backgroundColor: backgroundColor
}), /*#__PURE__*/React.createElement(_reactNative.View, {
style: [styles.labelContainer, {
paddingTop,
minHeight
}]
}, label ? /*#__PURE__*/React.createElement(_InputLabel.default, _extends({
labeled: parentState.labeled,
error: parentState.error,
focused: parentState.focused,
scaledLabel: scaledLabel,
wiggle: Boolean(parentState.value && labelProps.labelError),
labelLayoutMeasured: parentState.labelLayout.measured,
labelLayoutWidth: parentState.labelLayout.width,
labelLayoutHeight: parentState.labelLayout.height
}, labelProps, {
labelBackground: _LabelBackground.default,
maxFontSizeMultiplier: rest.maxFontSizeMultiplier
})) : null, render === null || render === void 0 ? void 0 : render({
...rest,
ref: innerRef,
onLayout: onLayoutChange,
onChangeText,
placeholder: rest.placeholder,
editable: !disabled && editable,
selectionColor,
cursorColor: typeof cursorColor === 'undefined' ? activeColor : cursorColor,
placeholderTextColor: placeholderTextColorBasedOnState,
onFocus,
onBlur,
underlineColorAndroid: 'transparent',
multiline,
style: [styles.input, !multiline || multiline && height ? {
height: inputHeight
} : {}, paddingOut, {
...font,
fontSize,
lineHeight,
fontWeight,
color: inputTextColor,
textAlignVertical: multiline ? 'top' : 'center',
textAlign: textAlign ? textAlign : _reactNative.I18nManager.getConstants().isRTL ? 'right' : 'left',
paddingHorizontal: INPUT_PADDING_HORIZONTAL,
minWidth: Math.min(parentState.labelTextLayout.width + 2 * INPUT_PADDING_HORIZONTAL, MIN_WIDTH)
}, _reactNative.Platform.OS === 'web' ? {
outline: 'none'
} : undefined, adornmentStyleAdjustmentForNativeInput, contentStyle],
testID
})), /*#__PURE__*/React.createElement(_TextInputAdornment.default, adornmentProps));
};
var _default = exports.default = TextInputOutlined;
const styles = _reactNative.StyleSheet.create({
labelContainer: {
paddingBottom: 0,
flexGrow: 1
},
input: {
margin: 0,
flexGrow: 1
},
inputOutlined: {
paddingTop: 8,
paddingBottom: 8
},
inputOutlinedDense: {
paddingTop: 4,
paddingBottom: 4
}
});
//# sourceMappingURL=TextInputOutlined.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,50 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.OUTLINE_MINIMIZED_LABEL_Y_OFFSET = exports.MIN_WIDTH = exports.MIN_DENSE_HEIGHT_WL = exports.MIN_DENSE_HEIGHT_OUTLINED = exports.MIN_DENSE_HEIGHT = exports.MINIMIZED_LABEL_Y_OFFSET = exports.MINIMIZED_LABEL_FONT_SIZE = exports.MD3_OUTLINED_INPUT_OFFSET = exports.MD3_MIN_HEIGHT = exports.MD3_LABEL_PADDING_TOP = exports.MD3_LABEL_PADDING_HORIZONTAL = exports.MD3_INPUT_PADDING_HORIZONTAL = exports.MD3_ICON_OFFSET = exports.MD3_FLAT_INPUT_OFFSET = exports.MD3_AFFIX_OFFSET = exports.MD3_ADORNMENT_OFFSET = exports.MD2_OUTLINED_INPUT_OFFSET = exports.MD2_MIN_HEIGHT = exports.MD2_LABEL_PADDING_TOP = exports.MD2_LABEL_PADDING_HORIZONTAL = exports.MD2_INPUT_PADDING_HORIZONTAL = exports.MD2_ICON_OFFSET = exports.MD2_FLAT_INPUT_OFFSET = exports.MD2_AFFIX_OFFSET = exports.MD2_ADORNMENT_OFFSET = exports.MAXIMIZED_LABEL_FONT_SIZE = exports.LABEL_WIGGLE_X_OFFSET = exports.LABEL_PADDING_TOP_DENSE = exports.LABEL_PADDING_TOP = exports.ICON_SIZE = exports.ADORNMENT_SIZE = void 0;
const MAXIMIZED_LABEL_FONT_SIZE = exports.MAXIMIZED_LABEL_FONT_SIZE = 16;
const MINIMIZED_LABEL_FONT_SIZE = exports.MINIMIZED_LABEL_FONT_SIZE = 12;
const LABEL_WIGGLE_X_OFFSET = exports.LABEL_WIGGLE_X_OFFSET = 4;
const ADORNMENT_SIZE = exports.ADORNMENT_SIZE = 24;
const MIN_WIDTH = exports.MIN_WIDTH = 100;
//Text input affix offset
const MD2_AFFIX_OFFSET = exports.MD2_AFFIX_OFFSET = 12;
const MD3_AFFIX_OFFSET = exports.MD3_AFFIX_OFFSET = 16;
// Text input icon
const ICON_SIZE = exports.ICON_SIZE = 24;
const MD2_ICON_OFFSET = exports.MD2_ICON_OFFSET = 12;
const MD3_ICON_OFFSET = exports.MD3_ICON_OFFSET = 16;
// Text input common
const MD2_MIN_HEIGHT = exports.MD2_MIN_HEIGHT = 64;
const MD3_MIN_HEIGHT = exports.MD3_MIN_HEIGHT = 56;
const MD3_ADORNMENT_OFFSET = exports.MD3_ADORNMENT_OFFSET = 16;
const MD2_ADORNMENT_OFFSET = exports.MD2_ADORNMENT_OFFSET = 12;
const LABEL_PADDING_TOP_DENSE = exports.LABEL_PADDING_TOP_DENSE = 24;
const LABEL_PADDING_TOP = exports.LABEL_PADDING_TOP = 8;
// Text input flat
const MD2_LABEL_PADDING_TOP = exports.MD2_LABEL_PADDING_TOP = 30;
const MD3_LABEL_PADDING_TOP = exports.MD3_LABEL_PADDING_TOP = 26;
const MD2_LABEL_PADDING_HORIZONTAL = exports.MD2_LABEL_PADDING_HORIZONTAL = 12;
const MD3_LABEL_PADDING_HORIZONTAL = exports.MD3_LABEL_PADDING_HORIZONTAL = 16;
const MD2_FLAT_INPUT_OFFSET = exports.MD2_FLAT_INPUT_OFFSET = 8;
const MD3_FLAT_INPUT_OFFSET = exports.MD3_FLAT_INPUT_OFFSET = 16;
const MINIMIZED_LABEL_Y_OFFSET = exports.MINIMIZED_LABEL_Y_OFFSET = -18;
const MIN_DENSE_HEIGHT_WL = exports.MIN_DENSE_HEIGHT_WL = 52;
const MIN_DENSE_HEIGHT = exports.MIN_DENSE_HEIGHT = 40;
// Text input outlined
const MD2_INPUT_PADDING_HORIZONTAL = exports.MD2_INPUT_PADDING_HORIZONTAL = 14;
const MD3_INPUT_PADDING_HORIZONTAL = exports.MD3_INPUT_PADDING_HORIZONTAL = 16;
// extra space to avoid overlapping input's text and icon
const MD2_OUTLINED_INPUT_OFFSET = exports.MD2_OUTLINED_INPUT_OFFSET = 8;
const MD3_OUTLINED_INPUT_OFFSET = exports.MD3_OUTLINED_INPUT_OFFSET = 16;
const OUTLINE_MINIMIZED_LABEL_Y_OFFSET = exports.OUTLINE_MINIMIZED_LABEL_Y_OFFSET = -6;
const MIN_DENSE_HEIGHT_OUTLINED = exports.MIN_DENSE_HEIGHT_OUTLINED = 48;
//# sourceMappingURL=constants.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["MAXIMIZED_LABEL_FONT_SIZE","exports","MINIMIZED_LABEL_FONT_SIZE","LABEL_WIGGLE_X_OFFSET","ADORNMENT_SIZE","MIN_WIDTH","MD2_AFFIX_OFFSET","MD3_AFFIX_OFFSET","ICON_SIZE","MD2_ICON_OFFSET","MD3_ICON_OFFSET","MD2_MIN_HEIGHT","MD3_MIN_HEIGHT","MD3_ADORNMENT_OFFSET","MD2_ADORNMENT_OFFSET","LABEL_PADDING_TOP_DENSE","LABEL_PADDING_TOP","MD2_LABEL_PADDING_TOP","MD3_LABEL_PADDING_TOP","MD2_LABEL_PADDING_HORIZONTAL","MD3_LABEL_PADDING_HORIZONTAL","MD2_FLAT_INPUT_OFFSET","MD3_FLAT_INPUT_OFFSET","MINIMIZED_LABEL_Y_OFFSET","MIN_DENSE_HEIGHT_WL","MIN_DENSE_HEIGHT","MD2_INPUT_PADDING_HORIZONTAL","MD3_INPUT_PADDING_HORIZONTAL","MD2_OUTLINED_INPUT_OFFSET","MD3_OUTLINED_INPUT_OFFSET","OUTLINE_MINIMIZED_LABEL_Y_OFFSET","MIN_DENSE_HEIGHT_OUTLINED"],"sourceRoot":"../../../../src","sources":["components/TextInput/constants.tsx"],"mappings":";;;;;;AAAO,MAAMA,yBAAyB,GAAAC,OAAA,CAAAD,yBAAA,GAAG,EAAE;AACpC,MAAME,yBAAyB,GAAAD,OAAA,CAAAC,yBAAA,GAAG,EAAE;AACpC,MAAMC,qBAAqB,GAAAF,OAAA,CAAAE,qBAAA,GAAG,CAAC;AAE/B,MAAMC,cAAc,GAAAH,OAAA,CAAAG,cAAA,GAAG,EAAE;AACzB,MAAMC,SAAS,GAAAJ,OAAA,CAAAI,SAAA,GAAG,GAAG;;AAE5B;AACO,MAAMC,gBAAgB,GAAAL,OAAA,CAAAK,gBAAA,GAAG,EAAE;AAC3B,MAAMC,gBAAgB,GAAAN,OAAA,CAAAM,gBAAA,GAAG,EAAE;;AAElC;AACO,MAAMC,SAAS,GAAAP,OAAA,CAAAO,SAAA,GAAG,EAAE;AACpB,MAAMC,eAAe,GAAAR,OAAA,CAAAQ,eAAA,GAAG,EAAE;AAC1B,MAAMC,eAAe,GAAAT,OAAA,CAAAS,eAAA,GAAG,EAAE;;AAEjC;AACO,MAAMC,cAAc,GAAAV,OAAA,CAAAU,cAAA,GAAG,EAAE;AACzB,MAAMC,cAAc,GAAAX,OAAA,CAAAW,cAAA,GAAG,EAAE;AACzB,MAAMC,oBAAoB,GAAAZ,OAAA,CAAAY,oBAAA,GAAG,EAAE;AAC/B,MAAMC,oBAAoB,GAAAb,OAAA,CAAAa,oBAAA,GAAG,EAAE;AAC/B,MAAMC,uBAAuB,GAAAd,OAAA,CAAAc,uBAAA,GAAG,EAAE;AAClC,MAAMC,iBAAiB,GAAAf,OAAA,CAAAe,iBAAA,GAAG,CAAC;;AAElC;AACO,MAAMC,qBAAqB,GAAAhB,OAAA,CAAAgB,qBAAA,GAAG,EAAE;AAChC,MAAMC,qBAAqB,GAAAjB,OAAA,CAAAiB,qBAAA,GAAG,EAAE;AAEhC,MAAMC,4BAA4B,GAAAlB,OAAA,CAAAkB,4BAAA,GAAG,EAAE;AACvC,MAAMC,4BAA4B,GAAAnB,OAAA,CAAAmB,4BAAA,GAAG,EAAE;AAEvC,MAAMC,qBAAqB,GAAApB,OAAA,CAAAoB,qBAAA,GAAG,CAAC;AAC/B,MAAMC,qBAAqB,GAAArB,OAAA,CAAAqB,qBAAA,GAAG,EAAE;AAEhC,MAAMC,wBAAwB,GAAAtB,OAAA,CAAAsB,wBAAA,GAAG,CAAC,EAAE;AACpC,MAAMC,mBAAmB,GAAAvB,OAAA,CAAAuB,mBAAA,GAAG,EAAE;AAC9B,MAAMC,gBAAgB,GAAAxB,OAAA,CAAAwB,gBAAA,GAAG,EAAE;;AAElC;AACO,MAAMC,4BAA4B,GAAAzB,OAAA,CAAAyB,4BAAA,GAAG,EAAE;AACvC,MAAMC,4BAA4B,GAAA1B,OAAA,CAAA0B,4BAAA,GAAG,EAAE;;AAE9C;AACO,MAAMC,yBAAyB,GAAA3B,OAAA,CAAA2B,yBAAA,GAAG,CAAC;AACnC,MAAMC,yBAAyB,GAAA5B,OAAA,CAAA4B,yBAAA,GAAG,EAAE;AAEpC,MAAMC,gCAAgC,GAAA7B,OAAA,CAAA6B,gCAAA,GAAG,CAAC,CAAC;AAC3C,MAAMC,yBAAyB,GAAA9B,OAAA,CAAA8B,yBAAA,GAAG,EAAE","ignoreList":[]}

View File

@@ -0,0 +1,491 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.adjustPaddingOut = exports.adjustPaddingFlat = void 0;
exports.calculateFlatAffixTopPosition = calculateFlatAffixTopPosition;
exports.calculateLabelTopPosition = exports.calculateInputHeight = exports.calculateFlatInputHorizontalPadding = void 0;
exports.calculateOutlinedIconAndAffixTopPosition = calculateOutlinedIconAndAffixTopPosition;
exports.getOutlinedInputColors = exports.getFlatInputColors = exports.getConstants = exports.calculatePadding = void 0;
var _reactNative = require("react-native");
var _color = _interopRequireDefault(require("color"));
var _enums = require("./Adornment/enums");
var _constants = require("./constants");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const calculateLabelTopPosition = (labelHeight, height = 0, optionalPadding = 0) => {
const customHeight = height > 0 ? height : 0;
return Math.floor((customHeight - labelHeight) / 2 + optionalPadding);
};
exports.calculateLabelTopPosition = calculateLabelTopPosition;
const calculateInputHeight = (labelHeight, height = 0, minHeight) => {
const finalHeight = height > 0 ? height : labelHeight;
if (height > 0) return height;
return finalHeight < minHeight ? minHeight : finalHeight;
};
exports.calculateInputHeight = calculateInputHeight;
const calculatePadding = props => {
const {
height,
multiline = false
} = props;
let result = 0;
if (multiline) {
if (height && multiline) {
result = calculateTextAreaPadding(props);
} else {
result = calculateInputPadding(props);
}
}
return Math.max(0, result);
};
exports.calculatePadding = calculatePadding;
const calculateTextAreaPadding = props => {
const {
dense
} = props;
return dense ? 10 : 20;
};
const calculateInputPadding = ({
topPosition,
fontSize,
multiline,
scale,
dense,
offset,
isAndroid
}) => {
const refFontSize = scale * fontSize;
let result = Math.floor(topPosition / 2);
result = result + Math.floor((refFontSize - fontSize) / 2) - (scale < 1 ? offset / 2 : 0);
if (multiline && isAndroid) result = Math.min(dense ? offset / 2 : offset, result);
return result;
};
const adjustPaddingOut = ({
pad,
multiline,
label,
scale,
height,
fontSize,
lineHeight,
dense,
offset,
isAndroid
}) => {
const fontHeight = lineHeight ?? fontSize;
const refFontHeight = scale * fontSize;
let result = pad;
if (!isAndroid && height && !multiline) {
return {
paddingTop: Math.max(0, (height - fontHeight) / 2),
paddingBottom: Math.max(0, (height - fontHeight) / 2)
};
}
if (!isAndroid && multiline) {
if (dense) {
if (label) {
result += scale < 1 ? Math.min(offset, refFontHeight / 2 * scale) : 0;
} else {
result += 0;
}
}
if (!dense) {
if (label) {
result += scale < 1 ? Math.min(offset, refFontHeight * scale) : Math.min(offset / 2, refFontHeight * scale);
} else {
result += scale < 1 ? Math.min(offset / 2, refFontHeight * scale) : 0;
}
}
result = Math.floor(result);
}
return {
paddingTop: result,
paddingBottom: result
};
};
exports.adjustPaddingOut = adjustPaddingOut;
const adjustPaddingFlat = ({
pad,
scale,
multiline,
label,
height,
offset,
dense,
fontSize,
isAndroid,
styles
}) => {
let result = pad;
let topResult = result;
let bottomResult = result;
const {
paddingTop,
paddingBottom
} = styles;
const refFontSize = scale * fontSize;
if (!multiline) {
// do not modify padding if input is not multiline
if (label) {
// return const style for flat input with label
return {
paddingTop,
paddingBottom
};
}
// return pad for flat input without label
return {
paddingTop: result,
paddingBottom: result
};
}
if (label) {
// add paddings passed from styles
topResult = paddingTop;
bottomResult = paddingBottom;
// adjust top padding for iOS
if (!isAndroid) {
if (dense) {
topResult += scale < 1 ? Math.min(result, refFontSize * scale) - result / 2 : Math.min(result, refFontSize * scale) - result / 2;
}
if (!dense) {
topResult += scale < 1 ? Math.min(offset / 2, refFontSize * scale) : Math.min(result, refFontSize * scale) - offset / 2;
}
}
topResult = Math.floor(topResult);
} else {
if (height) {
// center text when height is passed
return {
paddingTop: Math.max(0, (height - fontSize) / 2),
paddingBottom: Math.max(0, (height - fontSize) / 2)
};
}
// adjust paddings for iOS if no label
if (!isAndroid) {
if (dense) {
result += scale < 1 ? Math.min(offset / 2, fontSize / 2 * scale) : Math.min(offset / 2, scale);
}
if (!dense) {
result += scale < 1 ? Math.min(offset, fontSize * scale) : Math.min(fontSize, offset / 2 * scale);
}
result = Math.floor(result);
topResult = result;
bottomResult = result;
}
}
return {
paddingTop: Math.max(0, topResult),
paddingBottom: Math.max(0, bottomResult)
};
};
exports.adjustPaddingFlat = adjustPaddingFlat;
function calculateFlatAffixTopPosition({
height,
paddingTop,
paddingBottom,
affixHeight
}) {
const inputHeightWithoutPadding = height - paddingTop - paddingBottom;
const halfOfTheInputHeightDecreasedByAffixHeight = (inputHeightWithoutPadding - affixHeight) / 2;
return paddingTop + halfOfTheInputHeightDecreasedByAffixHeight;
}
function calculateOutlinedIconAndAffixTopPosition({
height,
affixHeight,
labelYOffset
}) {
return (height - affixHeight + labelYOffset) / 2;
}
const calculateFlatInputHorizontalPadding = ({
adornmentConfig,
isV3
}) => {
const {
LABEL_PADDING_HORIZONTAL,
ADORNMENT_OFFSET,
FLAT_INPUT_OFFSET
} = getConstants(isV3);
let paddingLeft = LABEL_PADDING_HORIZONTAL;
let paddingRight = LABEL_PADDING_HORIZONTAL;
adornmentConfig.forEach(({
type,
side
}) => {
if (type === _enums.AdornmentType.Icon && side === _enums.AdornmentSide.Left) {
paddingLeft = _constants.ADORNMENT_SIZE + ADORNMENT_OFFSET + FLAT_INPUT_OFFSET;
} else if (side === _enums.AdornmentSide.Right) {
if (type === _enums.AdornmentType.Affix) {
paddingRight = _constants.ADORNMENT_SIZE + ADORNMENT_OFFSET + FLAT_INPUT_OFFSET;
} else if (type === _enums.AdornmentType.Icon) {
paddingRight = _constants.ADORNMENT_SIZE + ADORNMENT_OFFSET + FLAT_INPUT_OFFSET;
}
}
});
return {
paddingLeft,
paddingRight
};
};
exports.calculateFlatInputHorizontalPadding = calculateFlatInputHorizontalPadding;
const getInputTextColor = ({
theme,
textColor,
disabled
}) => {
if (textColor) {
return textColor;
}
if (theme.isV3) {
if (disabled) {
return theme.colors.onSurfaceDisabled;
}
return theme.colors.onSurface;
}
if (disabled) {
return (0, _color.default)(theme.colors.text).alpha(0.54).rgb().string();
}
return theme.colors.text;
};
const getActiveColor = ({
theme,
disabled,
error,
activeUnderlineColor,
activeOutlineColor,
mode
}) => {
const isFlat = mode === 'flat';
const modeColor = isFlat ? activeUnderlineColor : activeOutlineColor;
if (error) {
return theme.colors.error;
}
if (modeColor) {
return modeColor;
}
if (disabled) {
if (theme.isV3) {
return theme.colors.onSurfaceDisabled;
}
return (0, _color.default)(theme.colors.text).alpha(0.54).rgb().string();
}
return theme.colors.primary;
};
const getPlaceholderColor = ({
theme,
disabled
}) => {
if (theme.isV3) {
if (disabled) {
return theme.colors.onSurfaceDisabled;
}
return theme.colors.onSurfaceVariant;
}
if (disabled) {
return theme.colors.disabled;
}
return theme.colors.placeholder;
};
const getSelectionColor = ({
activeColor,
customSelectionColor
}) => {
if (typeof customSelectionColor !== 'undefined') {
return customSelectionColor;
}
if (_reactNative.Platform.OS === 'android') {
return (0, _color.default)(activeColor).alpha(0.54).rgb().string();
}
return activeColor;
};
const getFlatBackgroundColor = ({
theme,
disabled
}) => {
var _theme$colors, _theme$colors2;
if (theme.isV3) {
if (disabled) {
return (0, _color.default)(theme.colors.onSurface).alpha(0.04).rgb().string();
} else {
return theme.colors.surfaceVariant;
}
}
if (disabled) {
return undefined;
}
return theme.dark ? (0, _color.default)((_theme$colors = theme.colors) === null || _theme$colors === void 0 ? void 0 : _theme$colors.background).lighten(0.24).rgb().string() : (0, _color.default)((_theme$colors2 = theme.colors) === null || _theme$colors2 === void 0 ? void 0 : _theme$colors2.background).darken(0.06).rgb().string();
};
const getFlatUnderlineColor = ({
theme,
disabled,
underlineColor
}) => {
if (!disabled && underlineColor) {
return underlineColor;
}
if (theme.isV3) {
if (disabled) {
return theme.colors.onSurfaceDisabled;
}
return theme.colors.onSurfaceVariant;
}
if (disabled) {
return 'transparent';
}
return theme.colors.disabled;
};
const getOutlinedOutlineInputColor = ({
theme,
disabled,
customOutlineColor
}) => {
const isTransparent = (0, _color.default)(customOutlineColor).alpha() === 0;
if (!disabled && customOutlineColor) {
return customOutlineColor;
}
if (theme.isV3) {
if (disabled) {
if (theme.dark) {
return 'transparent';
}
return theme.colors.surfaceDisabled;
}
return theme.colors.outline;
}
if (disabled) {
if (isTransparent) {
return customOutlineColor;
}
return theme.colors.disabled;
}
return theme.colors.placeholder;
};
const getFlatInputColors = ({
underlineColor,
activeUnderlineColor,
customSelectionColor,
textColor,
disabled,
error,
theme
}) => {
const baseFlatColorProps = {
theme,
disabled
};
const activeColor = getActiveColor({
...baseFlatColorProps,
error,
activeUnderlineColor,
mode: 'flat'
});
return {
inputTextColor: getInputTextColor({
...baseFlatColorProps,
textColor
}),
activeColor,
underlineColorCustom: getFlatUnderlineColor({
...baseFlatColorProps,
underlineColor
}),
placeholderColor: getPlaceholderColor(baseFlatColorProps),
selectionColor: getSelectionColor({
activeColor,
customSelectionColor
}),
errorColor: theme.colors.error,
backgroundColor: getFlatBackgroundColor(baseFlatColorProps)
};
};
exports.getFlatInputColors = getFlatInputColors;
const getOutlinedInputColors = ({
activeOutlineColor,
customOutlineColor,
customSelectionColor,
textColor,
disabled,
error,
theme
}) => {
const baseOutlinedColorProps = {
theme,
disabled
};
const activeColor = getActiveColor({
...baseOutlinedColorProps,
error,
activeOutlineColor,
mode: 'outlined'
});
return {
inputTextColor: getInputTextColor({
...baseOutlinedColorProps,
textColor
}),
activeColor,
outlineColor: getOutlinedOutlineInputColor({
...baseOutlinedColorProps,
customOutlineColor
}),
placeholderColor: getPlaceholderColor(baseOutlinedColorProps),
selectionColor: getSelectionColor({
activeColor,
customSelectionColor
}),
errorColor: theme.colors.error
};
};
exports.getOutlinedInputColors = getOutlinedInputColors;
const getConstants = isV3 => {
// Text input affix
let AFFIX_OFFSET;
// Text input icon
let ICON_OFFSET;
//Text input flat
let LABEL_PADDING_TOP;
let LABEL_PADDING_HORIZONTAL;
let FLAT_INPUT_OFFSET;
let MIN_HEIGHT;
// Text input outlined;
let INPUT_PADDING_HORIZONTAL;
let ADORNMENT_OFFSET;
let OUTLINED_INPUT_OFFSET;
if (isV3) {
AFFIX_OFFSET = _constants.MD3_AFFIX_OFFSET;
ICON_OFFSET = _constants.MD3_ICON_OFFSET;
LABEL_PADDING_TOP = _constants.MD3_LABEL_PADDING_TOP;
LABEL_PADDING_HORIZONTAL = _constants.MD3_LABEL_PADDING_HORIZONTAL;
FLAT_INPUT_OFFSET = _constants.MD3_FLAT_INPUT_OFFSET;
MIN_HEIGHT = _constants.MD3_MIN_HEIGHT;
INPUT_PADDING_HORIZONTAL = _constants.MD3_INPUT_PADDING_HORIZONTAL;
ADORNMENT_OFFSET = _constants.MD3_ADORNMENT_OFFSET;
OUTLINED_INPUT_OFFSET = _constants.MD3_OUTLINED_INPUT_OFFSET;
} else {
AFFIX_OFFSET = _constants.MD2_AFFIX_OFFSET;
ICON_OFFSET = _constants.MD2_ICON_OFFSET;
LABEL_PADDING_TOP = _constants.MD2_LABEL_PADDING_TOP;
LABEL_PADDING_HORIZONTAL = _constants.MD2_LABEL_PADDING_HORIZONTAL;
FLAT_INPUT_OFFSET = _constants.MD2_FLAT_INPUT_OFFSET;
MIN_HEIGHT = _constants.MD2_MIN_HEIGHT;
INPUT_PADDING_HORIZONTAL = _constants.MD2_INPUT_PADDING_HORIZONTAL;
ADORNMENT_OFFSET = _constants.MD2_ADORNMENT_OFFSET;
OUTLINED_INPUT_OFFSET = _constants.MD2_OUTLINED_INPUT_OFFSET;
}
return {
AFFIX_OFFSET,
ICON_OFFSET,
LABEL_PADDING_TOP,
LABEL_PADDING_HORIZONTAL,
FLAT_INPUT_OFFSET,
MIN_HEIGHT,
INPUT_PADDING_HORIZONTAL,
ADORNMENT_OFFSET,
OUTLINED_INPUT_OFFSET,
MIN_WIDTH: _constants.MIN_WIDTH
};
};
exports.getConstants = getConstants;
//# sourceMappingURL=helpers.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,6 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
//# sourceMappingURL=types.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":[],"sourceRoot":"../../../../src","sources":["components/TextInput/types.tsx"],"mappings":"","ignoreList":[]}